<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) {......}
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>