arcgis api for js入门开发系列十三地图最短路径分析
2017-06-23 16:42
429 查看
上一篇实现了demo的地图打印,本篇新增地图最短路径分析,截图如下:
具体实现的思路如下:
1.点击地图获取地名,调用了arcgis的地理编码服务,关于地理编码服务制作以及发布章节,感兴趣的请查看这里
点击地图获取地名的核心js代码:
2.最短分析实现的思路,就是设置路径分析函数执行的参数routeParams
设置stops值:
执行路径分析结果获取:
具体实现的思路如下:
1.点击地图获取地名,调用了arcgis的地理编码服务,关于地理编码服务制作以及发布章节,感兴趣的请查看这里
点击地图获取地名的核心js代码:
DCI.Route.locator = new esri.tasks.Locator(MapConfig.locatorUrl); DCI.Route.drawtool = new esri.toolbars.Draw(map, { showTooltips: true }); DCI.Route.drawtool.on("draw-end", DCI.Route.addToMap); //起点位置添加事件 $("#point1").bind("click", function (event) { DCI.Route.pointlayer.clear(); DCI.Route.map.graphics.clear(); DCI.Route.routeParams.stops.features = []; $("#routeStar").val(""); $("#routeEnd").val(""); DCI.Route.flag = true; DCI.Route.map.setMapCursor('crosshair'); DCI.Route.drawtool.activate(esri.toolbars.Draw.POINT); }) //终点位置添加事件 $("#point2").bind("click", function (event) { DCI.Route.flag = false; DCI.Route.map.setMapCursor('crosshair'); DCI.Route.drawtool.activate(esri.toolbars.Draw.POINT); }) /* *根据坐标点获取地名 */ addToMap: function (evt) { if (DCI.Route.flag) var stopSymbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/route/NAStartLocx.png", 29, 30); else var stopSymbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/route/NAEndLocx.png", 29, 30); var graphic = new esri.Graphic(evt.geometry, stopSymbol); //DCI.Route.map.graphics.add(graphic); DCI.Route.pointlayer.add(graphic); DCI.Route.drawtool.deactivate(); DCI.Route.map.setMapCursor('auto'); DCI.Route.locator.locationToAddress(evt.geometry, 500, DCI.Route.GetAddress, DCI.Route.GetAddresserror); }, /* *获取地名 */ GetAddress: function (evt) { if (DCI.Route.flag) $("#routeStar").val(evt.address.SingleKey); else $("#routeEnd").val(evt.address.SingleKey); }
2.最短分析实现的思路,就是设置路径分析函数执行的参数routeParams
DCI.Route.routeTask = new esri.tasks.RouteTask(MapConfig.routetaskUrl); DCI.Route.routeParams = new esri.tasks.RouteParameters(); DCI.Route.routeParams.stops = new esri.tasks.FeatureSet(); DCI.Route.routeParams.returnDirections = true; DCI.Route.routeParams.returnRoutes = true; DCI.Route.routeParams.returnStops = true; DCI.Route.routeParams.outSpatialReference = DCI.Route.map.spatialReference; DCI.Route.routeTask.on("solve-complete", DCI.Route.showRoute); DCI.Route.routeTask.on("error", DCI.Route.errorRoute);
设置stops值:
/* *获取起点名称坐标点 */ GetlocationsStart: function (evt) { var point = new esri.geometry.Point(evt[0].location.x, evt[0].location.y, evt[0].location.spatialReference); var stopSymbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/route/NAStartLocx.png", 29, 30); var stop = DCI.Route.map.graphics.add(new esri.Graphic(point, stopSymbol)); DCI.Route.routeParams.stops.features.push(stop); if (DCI.Route.routeParams.stops.features.length >= 2) { DCI.Route.routeTask.solve(DCI.Route.routeParams); DCI.Route.lastStop = DCI.Route.routeParams.stops.features.splice(0, 1)[0]; } }, /* *获取终点名称坐标点 */ GetlocationsEnd: function (evt) { var point = new esri.geometry.Point(evt[0].location.x, evt[0].location.y, evt[0].location.spatialReference); var stopSymbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/route/NAEndLocx.png", 29, 30); var stop = DCI.Route.map.graphics.add(new esri.Graphic(point, stopSymbol)); DCI.Route.routeParams.stops.features.push(stop); if (DCI.Route.routeParams.stops.features.length >= 2) { DCI.Route.routeTask.solve(DCI.Route.routeParams); DCI.Route.lastStop = DCI.Route.routeParams.stops.features.splice(0, 1)[0]; } },
执行路径分析结果获取:
showRoute: function (evt) { $("#routeshowList").empty(); DCI.Route.map.graphics.add(evt.result.routeResults[0].route.setSymbol(DCI.Route.routeSymbol));//展示路径线路 var directionsFS = evt.result.routeResults[0].directions; var i = 1; for(var feature in directionsFS.features) { var text = ""; if (i == 1) { text += "从起点开始"; } else if (i == directionsFS.features.length) { text += "终点结束"; } else { text += i + "." + directionsFS.features[feature].attributes.text; } //判断路径段类型 var maneuverType = directionsFS.features[feature].attributes.maneuverType; var fileName = DCI.Route.getImgFileName(maneuverType); var imgpath = getRootPath() + "Content/images/route/" + fileName; if (i > 1 && i < directionsFS.features.length) { text += " (" + DCI.Route.formatDistance(directionsFS.features[feature].attributes.length, "米"); var time = DCI.Route.formatTime(directionsFS.features[feature].attributes.time); if (time != "") { text += ", " + time; } text += ")"; } $('#routeshowList').append('<img src="' + imgpath + '" alt="" class="route_img" />'); $('#routeshowList').append('<div class="route_list">' + text + '</div>'); i++; } }
相关文章推荐
- arcgis api for js入门开发系列十三地图最短路径分析
- arcgis api for js入门开发系列十二地图打印(GP服务)
- ArcGIS.Server.9.3和ArcGIS API for Flex的GeoprocessingServices和最短路径分析(十三)
- Silverlight 4系列 +VS2010 + ArcGIS9.3 最短路径分析
- ArcGIS.Server.9.3和ArcGIS API for Flex的GeoprocessingServices和最短路径分析(十三)
- Silverlight 4系列 +VS2010 + ArcGIS9.3 最短路径分析
- arcgis api for js入门开发系列三地图工具栏
- ArcGIS Server的最短路径开发系列(2)补充
- 【教程连载】ArcGIS for iOS 开发系列(4) – 基础篇-地图组件
- arcgis for android 短路径分析 查找最短路径
- ArcGISServer Flex API调用GP模型实现最短路径分析
- ArcGIS API for JavaScript开发教程系列(一)之创建地图
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(十三)牵引式地图移动模式①
- arcgis for flex api version3.7 教程:7.使用Directions查询路线(最短路径分析)
- ArcGIS API for JavaScript开发教程系列(二)之地图控件
- Arcgis for Androd API开发系列教程(一)——地图显示与GPS定位
- ArcGIS.Server.9.2.DotNet网络分析之最短路径分析
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(十三)牵引式地图移动模式①
- 算法导论原理分析系列6:最短路径Dijkstra的图示化证明
- 一个ArcGIS网络分析的最短路径例子||A Network Analyst Shortest Route of ArcGIS