08-ArcGIS API For JavaScript网络分析

于 2019-11-26 20:06:16 发布
阅读量689 收藏 6
点赞数 1
CC 4.0 BY-SA版权
分类专栏： WebGIS ArcGIS API For JavaScript Map 文章标签： ArcGIS API For JavaScripy WebGIS
原文链接：https://blog.youkuaiyun.com/lovecarpenter/article/details/53022807
本文详细介绍了在WebGIS中如何实现路径分析功能，包括创建路径分析对象、设置参数、处理结果等步骤，并提供了完整的代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、引言

在 WebGIS 中网络分析一直是比较常用的功能，如路径分析、服务点分析等等，在 WebGIS 中想要实现相应的功能，我们需要将服务发布为网络服务。若不会发布网络服务，请先看：ArcGIS Server 发布网络分析服务

二、路径分析

在路径分析中，主要有两个比较关键的参数：（1）停靠点（2）障碍点

总体来说，路径分析需要以下几步：（1）发布网络分析服务；（2）在 Web 端创建路径分析对象；（3）构建路径分析参数：停靠点和障碍点；（4）获得结果，进行处理。

1、代码实现

（1）创建三个按钮（停靠点，障碍点，分析）

<input id="Stop" type="button" value="停靠点" />
<input id="barriers" type="button" value="障碍点" />
<input id="Analyse" type="button" value="分析" />

（2）创建路径分析对象，创建路径分析参数对象（注意：还缺少两个重要的参数，停靠点，障碍点）

//创建路径分析对象
var shortestAnalyst = new RouteTask("http://localhost:6080/arcgis/rest/services/Test/mynet/NAServer/Route");
//创建路径参数对象
var routeParas = new RouteParameters();
//障碍点，但是此时障碍点为空
routeParas.barriers = new FeatureSet();
//停靠点，但是此时停靠点为空
routeParas.stops = new FeatureSet();
//路径是否有方向
routeParas.returnDirections = false;
//是否返回路径，此处必须返回
routeParas.returnRoutes = true;
//空间参考
routeParas.outSpatialReference = map.SpatialReference;

（3）给停靠点按钮和障碍点按钮绑定点击事件

//定义一个标志
//selectPointID=0什么都不做
//selectPointID=1说明是添加停靠点
//selectPointID=2说明是添加障碍点
var selectPointID;
//给停靠点按钮添加点击事件
on(dom.byId("stop"),"click",function(){
	selectPointID = 1;
})
//给障碍点按钮添加点击事件
on(dom.byId("barriers"),"click",function(){
	selectPointID = 2;
})

（4）给地图绑定点击事件（为了获得点的坐标–>构建停靠点或者障碍点）

				//定义停靠点的符号
			    var stopSymbol = new SimpleMarkerSymbol();
                stopSymbol.style = SimpleMarkerSymbol.STYLE_CIRCLE;
                stopSymbol.setSize(8);
                stopSymbol.setColor(new Color("#FFFFCC"));
				//定义障碍点的符号
                var barrierSymbol = new SimpleMarkerSymbol();
                barrierSymbol.style = SimpleMarkerSymbol.STYLE_CIRCLE;
                barrierSymbol.setSize(8);
                barrierSymbol.setColor(new Color("#f1a340"));
				on(map, "mouse-down", function(evt){
					//通过selectPointID判断是添加是停靠点还是障碍点
					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;
                    }
					//如果selectPointID不等于0，将点的坐标在地图上显示出来
                    if (selectPointID != 0) {
                        addTextPoint("停靠点", pointStop, stopSymbol);
                        addTextPoint("障碍点", pointBarrier, barrierSymbol);
                        selectPointID = 0;
                    }
				});
				//文本符号：文本信息，点坐标，符号
				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);
                }

（5）给分析按钮绑定点击事件

				//给分析按钮添加点击事件
				on(dom.byId("analyse"),"click",function(){
					//如果障碍点或者停靠点的个数有一个为0，提示用户参数输入不对
					if  (routeParas.stops.features.length  ==  0  || routeParas.barriers.features.length==0)
                    {
                        alert("输入参数不全，无法分析");
                        return;
                    }
					//执行路径分析函数
                    shortestAnalyst.solve(routeParas, showRoute)
				})

（6）获得结果，处理路径分析返回的结果

				//处理路径分析返回的结果。
                function showRoute(solveResult) {
					//路径分析的结果
                    var routeResults = solveResult.routeResults;
					//路径分析的长度
                    var res = routeResults.length;
					//路径的符号
                    routeSymbol  = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);
                    if (res > 0) {
                        for (var i = 0; i < res; i++) {
                            var graphicroute = routeResults[i];
                            var graphic = graphicroute.route;
                            graphic.setSymbol(routeSymbol);
                            map.graphics.add(graphic);
                        }
                    }
                    else {
                        alert("没有返回结果");
                    }
                }

2、运行结果

（1）添加停靠点

（2）添加障碍点

（3）分析获得结果

3、完整代码

<!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"  type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
    <link  rel="stylesheet"  type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
    <script  type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></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/Test/mynet/MapServer");
                map.addLayer(layer)
				//创建路径分析对象
                var shortestAnalyst = new RouteTask("http://localhost:6080/arcgis/rest/services/Test/mynet/NAServer/Route");
				//创建路径参数对象
                var routeParas = new RouteParameters();
				//障碍点，但是此时障碍点为空
                routeParas.barriers = new FeatureSet();
				//停靠点，但是此时停靠点为空
                routeParas.stops = new FeatureSet();
				//路径是否有方向
                routeParas.returnDirections = false;
				//是否返回路径，此处必须返回
                routeParas.returnRoutes = true;
				//空间参考
                routeParas.outSpatialReference = map.SpatialReference;
				//定义一个标志
				//selectPointID=0什么都不做
				//selectPointID=1说明是添加停靠点
				//selectPointID=2说明是添加障碍点
				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_CIRCLE;
                stopSymbol.setSize(8);
                stopSymbol.setColor(new Color("#FFFFCC"));
				//定义障碍点的符号
                var barrierSymbol = new SimpleMarkerSymbol();
                barrierSymbol.style = SimpleMarkerSymbol.STYLE_CIRCLE;
                barrierSymbol.setSize(8);
                barrierSymbol.setColor(new Color("#f1a340"));
				on(map, "mouse-down", function(evt){
					//通过selectPointID判断是添加是停靠点还是障碍点
					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;
                    }
					//如果selectPointID不等于0，将点的坐标在地图上显示出来
                    if (selectPointID != 0) {
                        addTextPoint("停靠点", pointStop, stopSymbol);
                        addTextPoint("障碍点", pointBarrier, barrierSymbol);
                        selectPointID = 0;
                    }
				});
				//文本符号：文本信息，点坐标，符号
				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(){
					//如果障碍点或者停靠点的个数有一个为0，提示用户参数输入不对
					if  (routeParas.stops.features.length  ==  0  || routeParas.barriers.features.length==0)
                    {
                        alert("输入参数不全，无法分析");
                        return;
                    }
					//执行路径分析函数
                    shortestAnalyst.solve(routeParas, showRoute)
				})
				//处理路径分析返回的结果。
                function showRoute(solveResult) {
					//路径分析的结果
                    var routeResults = solveResult.routeResults;
					//路径分析的长度
                    var res = routeResults.length;
					//路径的符号
                    routeSymbol  = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);
                    if (res > 0) {
                        for (var i = 0; i < res; i++) {
                            var graphicroute = routeResults[i];
                            var graphic = graphicroute.route;
                            graphic.setSymbol(routeSymbol);
                            map.graphics.add(graphic);
                        }
                    }
                    else {
                        alert("没有返回结果");
                    }
                }               
            });
    </script>
</head>
<body>
    <div id="MyMapDiv" class="MapClass"></div>
    <input id="stop" type="button" value="停靠点" />
    <input id="barriers" type="button" value="障碍点" />
    <input id="analyse" type="button" value="分析" />
</body>
</html>

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值