JavaScript+NAServer进行最短路径分析

最新推荐文章于 2023-11-02 11:14:35 发布

Leedoy

最新推荐文章于 2023-11-02 11:14:35 发布

阅读量3.3k

点赞数

文章标签： javascript 地图 arcgis map esri

本文链接：https://blog.csdn.net/u010067938/article/details/34446399

版权

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">在进行javascript+NAServer最短路径分析时，网上资源很少，经过一天的学习研究，终于完成了初始的功能，拿出来跟大家分享一下。。。。话不多说，进入正题。</span>

进行基于NAServer的最短路径分析首先是发布NAServer，这个不再赘述了，网上例子很多，接下来就是最主要的进行代码编写了。

1、首先进行本地Dojo库的配置（此处不做说明，网上例子也很多），并引入相关css和js文件：

    <link rel="stylesheet" href="http://dongyue/ArcGISJSWebsite/library/3.9/3.9/js/dojo/dijit/themes/claro/claro.css">

    <link rel="stylesheet" type="text/css" href="http://localhost/ArcGISJSWebsite/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css"/>

    <link rel="stylesheet" type="text/css" href="http://localhost/ArcGISJSWebsite/library/3.9/3.9/js/esri/css/esri.css" />

     <script type="text/javascript" src="http://localhost/ArcGISJSWebsite/library/3.9/3.9/init.js"></script>

上面的http://localhost/ArcGISJSWebsite/library/3.9是我本地配置的dojo库，若要使用网上的库只需把http://localhost/ArcGISJSWebsite/library/3.9改为http://js.arcgis.com即可。

并在javascript框架引入

require([ "dojo/dom", "dojo/_base/array", "esri/Color", "dojo/parser", "dijit/registry", "esri/map", "esri/lang", "esri/graphic", "esri/InfoTemplate", "esri/layers/GraphicsLayer", "esri/renderers/SimpleRenderer", "esri/geometry/Point", "esri/tasks/FeatureSet", "esri/tasks/RouteTask", "esri/tasks/RouteParameters", "esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol", "dijit/form/ComboBox", "dijit/layout/BorderContainer", "dijit/layout/ContentPane"], function (dom, array, Color, parser, registry, Map, esriLang, Graphic, InfoTemplate, GraphicsLayer, SimpleRenderer, Point, FeatureSet, RouteTask, RouteParameters, SimpleMarkerSymbol, SimpleLineSymbol) {......}

2、接下来要定义一些变量

 var myMap,params;//

var routeTask, stops, routeGraphicLayer, lastRoute;//定义RouteTask对象routeTask，stops用来临时存放停靠点坐标，<span style="font-family: Arial, Helvetica, sans-serif;">routeGraphicLayer用于最后求解路径的显示，</span>

<span style="font-family: Arial, Helvetica, sans-serif;">                                                                                                         //lastRoute临时存放路径用</span>
 var stopsGraphicsLayer = new GraphicsLayer(); //用于显示stop点图层
 var features = [];

3、加载地图

myMap = new esri.Map("mapDiv");
var baseMap = new esri.layers.ArcGISDynamicMapServiceLayer("http://dongyue/ArcGIS/rest/services/NAService/MapServer");
myMap.addLayer(baseMap);

routeTask = new esri.tasks.RouteTask("http://dongyue/ArcGIS/rest/services/NAService/NAServer/Route");

在发布NAServer后在服务器文档中可以看到一个MapServer和一个NAServer，上面两个地址中一个为NAServer地址，一个为MapServer地址，MapServer用于底图，NAServer用于路径分析。

4、添加load事件，并设置symbol

 myMap.on("load", function (evtObj) {
        var myMap = evtObj.target;

<span style="font-family: Arial, Helvetica, sans-serif;">               //停靠点symbol，设置渲染</span>

        var stopSymbol = new esri.symbol.SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 16,
                              new esri.symbol.SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new esri.Color([89, 95, 35]), 2),
                              new esri.Color([130, 159, 83, 0.40]));
        stopsGraphicsLayer = new GraphicsLayer(); 

        var stopRenderer = new esri.renderer.SimpleRenderer(stopSymbol);
        stopsGraphicsLayer.setRenderer(stopRenderer);
        myMap.addLayer(stopsGraphicsLayer);
        <span style="font-family: Arial, Helvetica, sans-serif;"> //路径symbol，并设置渲染</span>
        routeGraphicLayer = new GraphicsLayer();
        var routeSymbol = new esri.symbol.SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new esri.Color([89, 95, 35]), 4.0);
        var routeRenderer = new esri.renderer.SimpleRenderer(routeSymbol);
        routeGraphicLayer.setRenderer(routeRenderer);
        myMap.addLayer(routeGraphicLayer);
        // params.outSpatialReference = myMap.spatialReference;
 });

5、添加地图点击实现停靠点显示

myMap.on("click", mapClickHandler);//点击地图时调用mapClickHandler事件
 function mapClickHandler(evt) {
       var stopP = new esri.geometry.Point(evt.mapPoint.x, evt.mapPoint.y, myMap.spatialReference);//保存点击的点坐标
       var stopPoint = new esri.Graphic(stopP);
       //stopsGraphicsLayer = new esri.layers.GraphicsLayer();
       stopsGraphicsLayer.add(stopPoint);//将点加入到<span style="font-family: Arial, Helvetica, sans-serif;">stopsGraphicsLayer图层</span>
       features.push(stopPoint);
        if (features.length > 1) {
            stops = new FeatureSet();
            stops.features = features;
            params = new esri.tasks.RouteParameters();//新建Route参数类
            params.stops = stops;//将所选停靠点传入参数类
            params.returnStops = true;
            params.returnRoutes = true;
            params.returnDirections = true;
            params.outSpatialReference = myMap.spatialReference;
                    
          }
 }

6、路径求解并显示

  //solve 
  routeTask.solve(params, function (solveResult) {
          var routeResult = solveResult.routeResults[0];
          lastRoute = new esri.Graphic();
          lastRoute = routeResult.route;
          routeGraphicLayer.add(lastRoute);

});

以上就是全部的过程，写博的时候时间有些仓促，一些注释写的不太明了，望见谅，希望可以给大家带来帮助，最终效果图如下所示。

附上全部代码文件，如下所示：

<!DOCTYPE html>  <html >   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title></title>      <link rel="stylesheet" href="http://dongyue/ArcGISJSWebsite/library/3.9/3.9/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" type="text/css" href="http://localhost/ArcGISJSWebsite/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css"/>     <link rel="stylesheet" type="text/css" href="http://localhost/ArcGISJSWebsite/library/3.9/3.9/js/esri/css/esri.css" />          <script type="text/javascript" src="http://localhost/ArcGISJSWebsite/library/3.9/3.9/init.js"></script>          <script type="text/javascript">           var myMap, params;
          require([
              "dojo/dom", "dojo/_base/array", "esri/Color", "dojo/parser", "dijit/registry", "esri/map", "esri/lang",
              "esri/graphic", "esri/InfoTemplate", "esri/layers/GraphicsLayer", "esri/renderers/SimpleRenderer", "esri/geometry/Point",
              "esri/tasks/FeatureSet", "esri/tasks/RouteTask", "esri/tasks/RouteParameters", "esri/symbols/SimpleMarkerSymbol",
              "esri/symbols/SimpleLineSymbol", "dijit/form/ComboBox", "dijit/layout/BorderContainer", "dijit/layout/ContentPane"],
          function (dom, array, Color, parser, registry, Map, esriLang, Graphic, InfoTemplate, GraphicsLayer, SimpleRenderer, Point,
                   FeatureSet, RouteTask, RouteParameters, SimpleMarkerSymbol, SimpleLineSymbol) {

              var routeTask, stops, routeGraphicLayer, lastRoute;
              //var  = new FeatureSet([]);
              //var barriers = new FeatureSet([]);
              var stopsGraphicsLayer = new GraphicsLayer(); //stop点图层
              // var lastRoute = new Graphic();
              //inputsLayer.clear();
              var features = [];

              parser.parse();

              esri.config.defaults.io.corsDetection = false; //跨域问题
              //esri.config.defaults.io._processedCorsServers[“你的server url”]=1;

              myMap = new esri.Map("mapDiv");
              var baseMap = new esri.layers.ArcGISDynamicMapServiceLayer("http://dongyue/ArcGIS/rest/services/NAService/MapServer");
              myMap.addLayer(baseMap);

              routeTask = new esri.tasks.RouteTask("http://dongyue/ArcGIS/rest/services/NAService/NAServer/Route");

              myMap.on("click", mapClickHandler);

              myMap.on("load", function (evtObj) {
                  var myMap = evtObj.target;
                  var stopSymbol = new esri.symbol.SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 16,
                                   new esri.symbol.SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new esri.Color([89, 95, 35]), 2),
                                   new esri.Color([130, 159, 83, 0.40]));
                  stopsGraphicsLayer = new GraphicsLayer();

                  var stopRenderer = new esri.renderer.SimpleRenderer(stopSymbol);
                  stopsGraphicsLayer.setRenderer(stopRenderer);
                  myMap.addLayer(stopsGraphicsLayer);

                  routeGraphicLayer = new GraphicsLayer();
                  var routeSymbol = new esri.symbol.SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new esri.Color([89, 95, 35]), 4.0);
                  var routeRenderer = new esri.renderer.SimpleRenderer(routeSymbol);
                  routeGraphicLayer.setRenderer(routeRenderer);
                  myMap.addLayer(routeGraphicLayer);
                  // params.outSpatialReference = myMap.spatialReference;
              });

              function mapClickHandler(evt) {
                  var stopP = new esri.geometry.Point(evt.mapPoint.x, evt.mapPoint.y, myMap.spatialReference);
                  var stopPoint = new esri.Graphic(stopP);
                  //stopsGraphicsLayer = new esri.layers.GraphicsLayer();
                  stopsGraphicsLayer.add(stopPoint);
                  features.push(stopPoint);

                  if (features.length > 1) {
                      stops = new FeatureSet();
                      stops.features = features;
                      params = new esri.tasks.RouteParameters();
                      params.stops = stops;
                      params.returnStops = true;
                      params.returnRoutes = true;
                      params.returnDirections = true;
                      params.outSpatialReference = myMap.spatialReference;

                      myMap.graphics.enableMouseEvents();

                      routeGraphicLayer.on("mouse-over", function (evt) {
                          //clear existing directions and highlight symbol
                          myMap.graphics.clear();
                          dom.byId("directionsDiv").innerHTML = "Hover over the route to view directions";

                          var highlightSymbol = new esri.symbol.SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 255, 255], 0.25), 4.5);
                          var highlightGraphic = new esri.Graphic(evt.graphic.geometry, highlightSymbol);

                          myMap.graphics.add(highlightGraphic);
                          dom.byId("directionsDiv").innerHTML = esriLang.substitute(evt.graphic.attributes, "${*}");
                      });

                      //solve 
                      routeTask.solve(params, function (solveResult) {
                          var routeResult = solveResult.routeResults[0];
                          lastRoute = new esri.Graphic();
                          lastRoute = routeResult.route;
                          routeGraphicLayer.add(lastRoute);
                          //lastRoute.toolTip = routeResult.routeName;
                          if (routeResult.route.attributes.Total_Time) {
                              lastRoute.toolTip += " in " + Math.round(Number(routeResult.route.attributes.Total_Time)) + " minutes.";
                          }
                          var directions = solveResult.directions;

                          array.forEach(solveResult.routes, function (route, index) {
                              //build an array of route info
                              var attr = array.map(solveResult.directions[index].features, function (feature) {
                                  return feature.attributes.text;
                              });
                              var infoTemplate = new InfoTemplate("Attributes", "${*}");
                              route.setInfoTemplate(infoTemplate);
                              route.setAttributes(attr);
                              routeGraphicLayer.add(route);
                              dom.byId("directionsDiv").innerHTML = "Hover over the route to view directions";

                          });
                      });
                  }
              }
          });          </script> </head>  <body class="claro">       <div id="mapDiv" style="width:800px; height:600px; border:1px solid #000;">  </div>             <div id="directionsDiv"></div>       </body> </html>