arcgis api for js入门开发系列十三地图最短路径分析

地图最短路径分析

上一篇实现了demo的地图打印，本篇新增地图最短路径分析，截图如下
：

 

具体实现的思路如下：

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);

/*
     *获取起点名称坐标点
     */
    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 js3.x入门开发系列列表

1. arcgis api离线部署
2. 不同地图服务展示
3. 地图工具栏
4. 地图查询
5. 地图态势标绘
6. 地图分屏对比
7. 图层控制
8. 聚合效果
9. 热力图效果
10. 叠加SHP图层
11. 地图统计图
12. 地图打印（GP服务）
13. 地图最短路径分析
14. 最近设施点路径分析
15. 台风轨迹
16. 迁徙流动图
17. 在线地图（天地图、百度地图、高德地图）
18. 风向流动图
19. 图层在线编辑
20. 打印地图的那些事
21. 气泡窗口信息动态配置模板

干货：

1. 自写算法实现地图量算工具
2. 自定义Navigation控件样式风格
3. 热力图优化篇-不依赖地图服务
4. 实现克里金插值渲染图–不依赖GP服务
5. echarts开源js库实现地图统计图分析