arcgis api for js入門開發系列十三地圖最短路徑分析

02-02

上一篇實現了demo的地圖列印，本篇新增地圖最短路徑分析，截圖如下：

具體實現的思路如下：

1.點擊地圖獲取地名，調用了arcgis的地理編碼服務，關於地理編碼服務製作以及發布章節，感興趣的請查看這裡

點擊地圖獲取地名的核心js代碼：

DCI.Route.locator = new esri.tasks.Locator(MapConfig.locatorUrl);nDCI.Route.drawtool = new esri.toolbars.Draw(map, { showTooltips: true });nDCI.Route.drawtool.on("draw-end", DCI.Route.addToMap);nn//起點位置添加事件n$("#point1").bind("click", function (event) {n DCI.Route.pointlayer.clear();n DCI.Route.map.graphics.clear();n DCI.Route.routeParams.stops.features = [];n $("#routeStar").val("");n $("#routeEnd").val("");n DCI.Route.flag = true;nn DCI.Route.map.setMapCursor(crosshair);n DCI.Route.drawtool.activate(esri.toolbars.Draw.POINT);n})n//終點位置添加事件n$("#point2").bind("click", function (event) {n DCI.Route.flag = false;n DCI.Route.map.setMapCursor(crosshair);n DCI.Route.drawtool.activate(esri.toolbars.Draw.POINT);n})nn /*n *根據坐標點獲取地名n */n addToMap: function (evt) {n if (DCI.Route.flag) n var stopSymbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/route/NAStartLocx.png", 29, 30);n elsen var stopSymbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/route/NAEndLocx.png", 29, 30);n var graphic = new esri.Graphic(evt.geometry, stopSymbol);n //DCI.Route.map.graphics.add(graphic);n DCI.Route.pointlayer.add(graphic);n DCI.Route.drawtool.deactivate();n DCI.Route.map.setMapCursor(auto);n DCI.Route.locator.locationToAddress(evt.geometry, 500, DCI.Route.GetAddress, DCI.Route.GetAddresserror);n },n /*n *獲取地名n */n GetAddress: function (evt) {n if (DCI.Route.flag)n $("#routeStar").val(evt.address.SingleKey);n elsen $("#routeEnd").val(evt.address.SingleKey);n }n

2.最短分析實現的思路，就是設置路徑分析函數執行的參數routeParams

DCI.Route.routeTask = new esri.tasks.RouteTask(MapConfig.routetaskUrl);nDCI.Route.routeParams = new esri.tasks.RouteParameters();nDCI.Route.routeParams.stops = new esri.tasks.FeatureSet();nDCI.Route.routeParams.returnDirections = true;nDCI.Route.routeParams.returnRoutes = true;nDCI.Route.routeParams.returnStops = true;nDCI.Route.routeParams.outSpatialReference = DCI.Route.map.spatialReference;nDCI.Route.routeTask.on("solve-complete", DCI.Route.showRoute);nDCI.Route.routeTask.on("error", DCI.Route.errorRoute);n

設置stops值：

/*n *獲取起點名稱坐標點n */n GetlocationsStart: function (evt) {n var point = new esri.geometry.Point(evt[0].location.x, evt[0].location.y, evt[0].location.spatialReference);n var stopSymbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/route/NAStartLocx.png", 29, 30);n var stop = DCI.Route.map.graphics.add(new esri.Graphic(point, stopSymbol));n DCI.Route.routeParams.stops.features.push(stop);n if (DCI.Route.routeParams.stops.features.length >= 2) {n DCI.Route.routeTask.solve(DCI.Route.routeParams);n DCI.Route.lastStop = DCI.Route.routeParams.stops.features.splice(0, 1)[0];n }n },n /*n *獲取終點名稱坐標點n */n GetlocationsEnd: function (evt) {n var point = new esri.geometry.Point(evt[0].location.x, evt[0].location.y, evt[0].location.spatialReference);n var stopSymbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/route/NAEndLocx.png", 29, 30);n var stop = DCI.Route.map.graphics.add(new esri.Graphic(point, stopSymbol));n DCI.Route.routeParams.stops.features.push(stop);n if (DCI.Route.routeParams.stops.features.length >= 2) {n DCI.Route.routeTask.solve(DCI.Route.routeParams);n DCI.Route.lastStop = DCI.Route.routeParams.stops.features.splice(0, 1)[0];n }n },n

執行路徑分析結果獲取：

showRoute: function (evt) {n $("#routeshowList").empty();n DCI.Route.map.graphics.add(evt.result.routeResults[0].route.setSymbol(DCI.Route.routeSymbol));//展示路徑線路n var directionsFS = evt.result.routeResults[0].directions;n var i = 1;n for(var feature in directionsFS.features)n {n var text = "";n if (i == 1) {n text += "從起點開始";n }n else if (i == directionsFS.features.length) {n text += "終點結束";n }n else {n text += i + "." + directionsFS.features[feature].attributes.text;n }n n //判斷路徑段類型n var maneuverType = directionsFS.features[feature].attributes.maneuverType;n var fileName = DCI.Route.getImgFileName(maneuverType);n var imgpath = getRootPath() + "Content/images/route/" + fileName;nn if (i > 1 && i < directionsFS.features.length)n { n text += " (" + DCI.Route.formatDistance(directionsFS.features[feature].attributes.length, "米");n var time = DCI.Route.formatTime(directionsFS.features[feature].attributes.time);n if (time != "")n {n text += ", " + time;n }n text += ")";n }n $(#routeshowList).append(<img src=" + imgpath + " alt="" class="route_img" />);n $(#routeshowList).append(<div class="route_list"> + text + </div>);n i++;n }nn }n

備註：團隊承接webgis/gis畢業設計以及webgis項目等業務，歡迎有相關需求的客戶來諮詢

GIS之家接受webgis開發遇到的技術疑點難點在線諮詢，採取在線分答計時收費模式，有需要的加QQ:406503412

GIS之家論壇（推薦）：GIS之家論壇

GIS作品：GIS之家

QQ興趣部落：GIS之家部落

GIS之家交流群一：432512093(已滿)

GIS之家交流群二：296438295