JavaScript+NAServer进行最短路径分析

来源：互联网发布：广电手游新规知乎编辑：程序博客网时间：2024/05/17 08:08

<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>

0 0