前言

关于本篇功能实现用到的 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 下载

本篇实现地图最短路径分析功能效果，截图如下：

image

image

具体实现的思路

• 点击地图获取地名，调用了 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之家小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

GIS之家作品：GIS之家

GIS之家源码咨询：咨询模式