nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Help me about pointBarriers

PhuongNguyen_Thanh

I'm doing an example that when I click a location in a map, it will show me all markers of location that I can drive within 12 minutes car driving. I'm using ServiceAreaTask, SolveAreaResult and pointBarriers to do but it's not work. So anyone can help me please ? 😞 😞 I'm a new beginner so your help will be my best motivation for improvement 🙂 🙂 🙂

 <!DOCTYPE html>  <html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">         <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">      <script src="http://js.arcgis.com/3.6/"></script>             <title>Routing</title>     <style>         html, body, #map{         height: 100%;         margin: 0;         padding: 0;         }     </style>      <script>         var map, serviceAreaTask, params;         require([               "dojo/_base/Color",                                   "esri/map",              "esri/graphic",               "esri/symbols/SimpleMarkerSymbol",              "esri/symbols/SimpleLineSymbol",              "esri/symbols/SimpleFillSymbol",               "esri/tasks/FeatureSet",              "esri/tasks/ServiceAreaSolveResult",              "esri/tasks/ServiceAreaParameters",              "esri/tasks/ServiceAreaTask",              "dojo/domReady!"         ],        function (Color, Map, Graphic, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, FeatureSet, ServiceAreaSolveResult, ServiceAreaParameters, ServiceAreaTask) {              esriConfig.defaults.io.proxyUrl = "/proxy";                         map = new esri.Map("map", {                basemap: "streets",                center: [-95.249, 38.954],                zoom: 14            });             map.on("click", mapClickHandler);              params = new ServiceAreaParameters();            params.defaultBreaks = [5];            params.outSpatialReference = map.SpatialReference;            params.returnFacilities = true;             params.returnPointBarriers = true;              serviceAreaTask = new ServiceAreaTask("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/NAServer/Service Area");              function mapClickHandler(evt) {                 map.graphics.clear();                 var markerSymbol = new SimpleMarkerSymbol(                     SimpleMarkerSymbol.STYLE_SQUARE,                     20,                     new SimpleLineSymbol(                       SimpleLineSymbol.STYLE_SOLID,                       new Color([89, 95, 35]), 2                     ),                     new Color([130, 159, 83, 0.40])                   );                  var location = new Graphic(evt.mapPoint, markerSymbol);                 map.graphics.add(location);                 var features = [];                features.push(location);                var facilities = new FeatureSet();                facilities.features = features;                params.facilities = facilities;                 serviceAreaTask.solve(params, function (solveResult) {                    var result = solveResult;                   //var serviceAreaSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]));                    var dotSymbol = new SimpleMarkerSymbol(                        SimpleMarkerSymbol.STYLE_CIRCLE,                         12,                          new SimpleLineSymbol(                             SimpleLineSymbol.STYLE_NULL,                                   new Color([247, 34, 101, 0.9]),                                  1                                     ),                                 new Color([207, 34, 171, 0.5])                             );                                                             dojo.forEach(result.pointBarriers, function(serviceArea) {                        serviceArea.setSymbol(dotSymbol);                        map.graphics.add(serviceArea);                    });                });                }          });       </script> </head> <body class="claro">     <div id="map"></div> </body> </html>

タグ付けされた投稿をもっと見る

Accepted answers

ManishkumarPatel

Hi Sorry for the late reply. As per your requirment, what I can suggest conceptually (not sure if this can be implemented):

1. Get the map point where you click this you can get by attaching an event listener to the map

map.on("click",getmapPoint)

function getmapPoint(evt){
var mapX = evt.mapPoint.x;
var mapy = evt.mapPoint.y;
}

2. Use the geometry service and create buffer.
3. Use the buffer graphic to find the points which can be plotted on the map(real challenge is here to get the points and show on the map).
4. Use the plotted points(facilities) and Point (incident) where the map is clicked to find the route between them.

Hope this helps.

Although I will try to work and if I am able to reproduce this scenario will send you the code snippet.

Regards,
Manish

All comments

PhuongNguyen_Thanh

Hi Sorry for the late reply. As per your requirment, what I can suggest conceptually (not sure if this can be implemented):

1. Get the map point where you click this you can get by attaching an event listener to the map

map.on("click",getmapPoint)

function getmapPoint(evt){
var mapX = evt.mapPoint.x;
var mapy = evt.mapPoint.y;
}

2. Use the geometry service and create buffer.
3. Use the buffer graphic to find the points which can be plotted on the map(real challenge is here to get the points and show on the map).
4. Use the plotted points(facilities) and Point (incident) where the map is clicked to find the route between them.

Hope this helps.

Although I will try to work and if I am able to reproduce this scenario will send you the code snippet.

Regards,
Manish

Thanks Manish ! I will try to do this 😄 😄

ManishkumarPatel

PhuongNguyen_Thanh

anyone helps me please 😞 😞 😞

PhuongNguyen_Thanh

Hi there after looking through your code snippet it looks like you have the input point/graphic (FROM) but there are no TO graphics available.

You could try to refer to the esri sample and try adding the facility graphics to find the closest route between two locations.

for reference you can try this fiddle: http://jsfiddle.net/patelmanya/CrSgs/10/

Good luck!!

Thanks,
Manish

Hi Manish !

Thanks for you example. But I have a problem that when I see the code in this example, we must create these squares to complete the direction route.

 facilitiesGraphicsLayer.add(new Graphic(new Point(-13626184,4549247,map.spatialReference)));
        facilitiesGraphicsLayer.add(new Graphic(new Point(-13626477,4549415,map.spatialReference)));
        facilitiesGraphicsLayer.add(new Graphic(new Point(-13625385,4549659,map.spatialReference))); 
        facilitiesGraphicsLayer.add(new Graphic(new Point(-13624374,4548254,map.spatialReference))); 
        facilitiesGraphicsLayer.add(new Graphic(new Point(-13624891,4548570,map.spatialReference)));

So can you guide me how to create a direction route automatically when I click somewhere in the map and it will generate a direction route for me within 12 minutes to drive by car ?

ManishkumarPatel


<!DOCTYPE html>

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    
  <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">



  <script src="http://js.arcgis.com/3.6/"></script>


    

    <title>Routing</title>
    <style>
        html, body, #map{
        height: 100%;
        margin: 0;
        padding: 0;
        }
    </style>

    <script>
        var map, serviceAreaTask, params;
        require([

             "dojo/_base/Color",
           
        
             "esri/map",
             "esri/graphic",

             "esri/symbols/SimpleMarkerSymbol",
             "esri/symbols/SimpleLineSymbol",
             "esri/symbols/SimpleFillSymbol",

             "esri/tasks/FeatureSet",
             "esri/tasks/ServiceAreaSolveResult",
             "esri/tasks/ServiceAreaParameters",
             "esri/tasks/ServiceAreaTask",
             "dojo/domReady!"
        ],
       function (Color, Map, Graphic, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, FeatureSet, ServiceAreaSolveResult, ServiceAreaParameters, ServiceAreaTask) {


           esriConfig.defaults.io.proxyUrl = "/proxy";
          


           map = new esri.Map("map", {
               basemap: "streets",
               center: [-95.249, 38.954],
               zoom: 14
           });

           map.on("click", mapClickHandler);


           params = new ServiceAreaParameters();
           params.defaultBreaks = [5];
           params.outSpatialReference = map.SpatialReference;
           params.returnFacilities = true;

           params.returnPointBarriers = true;


           serviceAreaTask = new ServiceAreaTask("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/NAServer/Service Area");


           function mapClickHandler(evt) {

               map.graphics.clear(); 
               var markerSymbol = new SimpleMarkerSymbol(
                    SimpleMarkerSymbol.STYLE_SQUARE,
                    20,
                    new SimpleLineSymbol(
                      SimpleLineSymbol.STYLE_SOLID,
                      new Color([89, 95, 35]), 2
                    ),
                    new Color([130, 159, 83, 0.40])
                  );


               var location = new Graphic(evt.mapPoint, markerSymbol);

               map.graphics.add(location);

               var features = [];
               features.push(location);
               var facilities = new FeatureSet();
               facilities.features = features;
               params.facilities = facilities;

               serviceAreaTask.solve(params, function (solveResult) {
                   var result = solveResult;
                  //var serviceAreaSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]));
                   var dotSymbol = new SimpleMarkerSymbol(
                       SimpleMarkerSymbol.STYLE_CIRCLE,
                        12, 
                        new SimpleLineSymbol(
                            SimpleLineSymbol.STYLE_NULL, 
                                 new Color([247, 34, 101, 0.9]), 
                                1
                                    ),
                                new Color([207, 34, 171, 0.5])
                            );
                   
                   

                   dojo.forEach(result.pointBarriers, function(serviceArea) {
                       serviceArea.setSymbol(dotSymbol);
                       map.graphics.add(serviceArea);
                   });
               });




           }


       });


    </script>
</head>
<body class="claro">
    <div id="map"></div>
</body>
</html>

Hi there after looking through your code snippet it looks like you have the input point/graphic (FROM) but there are no TO graphics available.

You could try to refer to the esri sample and try adding the facility graphics to find the closest route between two locations.

for reference you can try this fiddle: http://jsfiddle.net/patelmanya/CrSgs/10/

Good luck!!

Thanks,
Manish

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.