1.引言
在WebGIS中网络分析一直是比较常用的功能，比如：路径分析，服务点分析等等,在WebGIS中想要实现相应的功能需要将我们的服务发布为网络服务。
在此篇博文中以路径分析为例，来演示一下API中为我们提供的接口，如果不会发布网络服务，请先看：ArcGIS Server之发布网络分析服务
2.路径分析
在路径分析中，主要有两个比较关键的参数：
- 停靠点
- 障碍点
总体来说，路径分析的步骤主要有以下几步：
- 发布网络分析服务
- 在Web端创建路径分析对象
- 构建路径分析参数。
（1）停靠点
（2）障碍点 - 获得结果，进行处理。
2.1代码实现
- 创建三个按钮（停靠点，障碍点，分析）
<input id="Stop" type="button" value="停靠点" />
<input id="barriers" type="button" value="障碍点" />
<input id="Analyse" type="button" value="分析" />
- 添加地图（步骤省略）
- 创建路径分析对象，创建路径分析参数对象（注意：还缺少两个重要的参数，停靠点，障碍点）
//创建路径分析对象
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("没有返回结果");
}
}
2.2运行结果
- 添加停靠点
- 添加障碍点
- 分析获得结果
2.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>
3.代码下载地址
- GitHub的数据及代码下载地址为：GitHub的数据及代码下载链接（如果从GitHub下载代码，麻烦给小
Demo一个Star，您的支持是我最大的动力）
扫一扫
916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
