分析---网络分析（最短路径）附完整代码

留言
1.效果图

分析经过停靠点，避开障碍点之间的最优路径

2.发布服务

在ArcMap中进行网络分析制图后需要发布地图服务才可以被调用。

  • 为了以后方便，全选择
    在这里插入图片描述
  • 打开工具条，进行新建路径等，结束制图后进行服务发布
    在这里插入图片描述

发布服务时，需要增加Network Analysis功能
在这里插入图片描述

  • 成功发布之后进入http://localhost:6080/arcgis/rest/services找到存放目录

    这样说明服务发布成功了
  • 选择(NAServer)后缀的链接，复制URL
    1. 创建好之后
    2. 新建路径
    3. 新建的路径图层名称
  • 创建路径分析对象的时候参数为URL+/图层名称
  • 例如：http://localhost:6080/arcgis/rest/services/webgis/fzkt_streets_ND/NAServer/路径
    2.引入模块
    1
    2
    "esri/tasks/RouteTask",
             "esri/tasks/FeatureSet",
    3.分析

  1. 定义

    • 停靠点符号
    • 障碍点符号
    • 文本符号
    • 路径符号

  2. 网络分析

    • 创建路径分析对象
    • 创建路径分析参数对象
    • 设置分析参数参考坐标系
    • 设置分析参数对象的障碍点和停靠点属性实例化要素集
    • 设置分析参数返回无方向
    • 设置分析参数返回路径
      在这里插入图片描述

  3. 事件

    • 添加停靠点的点击事件
    • 添加障碍点的点击事件
    • 添加地图的mouse-down监听事件
    • 添加分析的点击事件

  4. 函数

    • 添加简单图形符号函数
    • 添加文本符号函数
    • 路径分析返回结果处理函数
4. 完整代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Geometric _Network</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css" />
    <script src="https://js.arcgis.com/3.28/"></script>
    <style type="text/css">
        .MapClass {
            width: 100%;
            height: 600px;
            border: 1px solid #000;
        }
    </style>
    <script type="text/javascript">

        require(["esri/map",
            "dojo/on",
            "dojo/dom",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/tasks/RouteTask",
            "esri/tasks/FeatureSet",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/TextSymbol",
            "esri/toolbars/draw",
            "esri/symbols/SimpleLineSymbol",
            "esri/tasks/RouteParameters",
            "dojo/colors",
            "esri/graphic",
            "dojo/domReady!"],
            function (Map, on, dom,
                ArcGISDynamicMapServiceLayer,
                RouteTask,
                FeatureSet,
                SimpleMarkerSymbol,
                TextSymbol,
                Draw,
                SimpleLineSymbol,
                RouteParameters,
                Color,
                Graphic
            ) {
                var map = new Map("MyMapDiv");
                var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/webgis/fzkt_streets_ND/MapServer");
                map.addLayer(layer)
                //创建路径分析对象
                var shortestAnalyst = new RouteTask("http://localhost:6080/arcgis/rest/services/webgis/fzkt_streets_ND/NAServer/路径");
                //创建路径参数对象
                var routeParas = new RouteParameters();
                //障碍点
                routeParas.barriers = new FeatureSet();
                //停靠点
                routeParas.stops = new FeatureSet();
                routeParas.returnDirections = false;
                routeParas.returnRoutes = true;
                //空间参考
                routeParas.outSpatialReference = map.SpatialReference;
                var selectPointID;
                on(dom.byId("stop"), "click", function () {
                    selectPointID = 1;
                })
                on(dom.byId("barriers"), "click", function () {
                    selectPointID = 2;
                })
                //停靠点的符号
                var stopSymbol = new SimpleMarkerSymbol();
                stopSymbol.style = SimpleMarkerSymbol.STYLE_CROSS;
                stopSymbol.setSize(15);
                //障碍点的符号
                var barrierSymbol = new SimpleMarkerSymbol();
                barrierSymbol.style = SimpleMarkerSymbol.STYLE_CIRCLE;
                barrierSymbol.setSize(14);
                barrierSymbol.setColor(new Color("#f1a340"));

                on(map, "mouse-down", function (evt) {
                    switch (selectPointID) {
                        case 0:
                            break;
                        case 1:
                            var pointStop = evt.mapPoint;
                            var gr = new Graphic(pointStop, stopSymbol);
                            routeParas.stops.features.push(gr);
                            break;
                        case 2:
                            var pointBarrier = evt.mapPoint;
                            var gr = new Graphic(pointBarrier, barrierSymbol);
                            routeParas.barriers.features.push(gr);
                            break;
                    }
                    if (selectPointID != 0) {
                        addPoint(pointStop, stopSymbol)
                        addTextPoint("障碍点", pointBarrier, barrierSymbol);
                        selectPointID = 0;
                    }
                });
                //单一
                function addPoint(point, symbol) {
                    var graphicpoint = new Graphic(point, symbol);
                    map.graphics.add(graphicpoint);
                }
                //文本
                function addTextPoint(text, point, symbol) {
                    var textSymbol = new TextSymbol(text);
                    textSymbol.setColor(new Color([128, 0, 0]));
                    var graphicText = Graphic(point, textSymbol);
                    var graphicpoint = new Graphic(point, symbol);
                    map.graphics.add(graphicpoint);
                    map.graphics.add(graphicText);
                }
                on(dom.byId("analyse"), "click", function () {
                    if (routeParas.stops.features.length == 0) {
                        alert("ERROR");
                        return;
                    }
                    shortestAnalyst.solve(routeParas, showRoute)
                })
                //处理路径分析返回的结果。
                function showRoute(solveResult) {
                    console.log(solveResult)
                    var routeResults = solveResult.routeResults;
                    //路径分析的长度
                    var res = routeResults.length;
                    routeSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([0, 0, 255, 0.5]), 3);
                    if (res > 0) {
                        for (var i = 0; i < res; i++) {
                            var graphic = routeResults[i].route;
                            graphic.setSymbol(routeSymbol);
                            map.graphics.add(graphic);
                        }
                    }
                    else {
                        alert("Null");
                    }
                }
            });


    </script>
</head>

<body>
    <input id="stop" type="button" value="停靠点" />
    <input id="barriers" type="button" value="障碍点" />
    <input id="analyse" type="button" value="分析" />
    <div id="MyMapDiv" class="MapClass"></div>
</body>

</html>