arcgis api 3.x for js 入門開發系列十三地圖最短路徑分析（附源碼下載）

前言

關於本篇功能實現用到的 api 涉及類看不懂的，請參照 esri 官網的 arcgis api 3.x for js：esri 官網 api，里面詳細的介紹 arcgis api 3.x 各個類的介紹，還有就是在線例子：esri 官網在線例子，這個也是學習 arcgis api 3.x 的好素材。

內容概覽

1. 基於 arcgis api 3.x 實現地圖最短路徑分析
2. 源代碼 demo 下載

本篇實現地圖最短路徑分析功能效果，截圖如下：

具體實現的思路

點擊地圖獲取地名，調用了 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);

}

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

更多的詳情見：GIS之家小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波