ArcGIS API for JavaScript 4.2学习笔记[27] 网络分析之最短路径分析【RouteTask类】
要说网页端最经典的GIS应用，非网络分析莫属了。
什么？你没用过？百度高德谷歌地图的路线分析就是活生生的例子啊！只不过它们是根据大实际背景优化了结果显示而已。
这个例子使用RouteTask进行网络分析，我会先讲讲什么是RouteTask，再讲讲这个例子是怎么用的，这个例子代码量不多。
在官方的例子中，标题为：SimpleRouting - RouteTask
看看结果
点击两个点，安静等待十秒左右就会出现这个紫色的路线了。当然右键点击也是一样的。反应比较慢。
RouteTask类
这个例子用到了这个类，务必先介绍一下，因为在上一章中已经介绍了三个用于查询的Task类了。
介绍上说，RouteTask允许用户在AJS中方便地在给定的点上进行最短路径查询，RouteTask使用ArcGIS Server发布的网络分析服务（NAServer）。
有关ArcGIS Server如何发布NAServer，我会在我另一个系列中写一写。
这就说明了RouteTask是使用Server的REST URL进行实例化的。
它最常用的是solve()方法。（与AO二次开发类似）
同样的，它也有对应的RouteParameters和RouteResult类。
RouteParameters和RouteResult类
这个参数类拥有网络分析特有的属性：如途径点、障碍点、阻抗属性等，见桌面GIS网络分析的文档。
RouteTask的返回结果。取决于RouteParameters的参数设置。
好，咱们正式开始吧。
给出引用
require([
"esri/Map", "esri/views/MapView",
"esri/Graphic", "esri/layers/GraphicsLayer",
"esri/tasks/RouteTask", "esri/tasks/support/RouteParameters",
"esri/tasks/support/FeatureSet",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
"esri/Color",
"esri/core/urlUtils",
"dojo/on",
"dojo/domReady!"
],
function(Map, MapView, Graphic, GraphicsLayer, RouteTask, RouteParameters,
FeatureSet, SimpleMarkerSymbol, SimpleLineSymbol, Color, urlUtils, on) {
...
}
);
用到的模块很多。
函数骨架
function(...){
urlUtils.addProxyRule({...});
var routeTask = new RouteTask({
url: "https://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"
});
var routeLyr = new GraphicsLayer();
var routeParams = new RouteParameters({...});
var stopSymbol = new SimpleMarkerSymbol({...});
var routeSymbol = new SimpleLineSymbol({...});
var map = new Map({...});
var view = new MapView({...});
on(view, "click", addStop);
function addStop(event){...};
function showRoute(event){...};
)
重点应该是routeTask、routeParams这两个变量，和view的click事件、addStop()方法、showRoute()方法。
两个变量用于执行网络分析中的最短路径分析，而事件和方法就进行对分析结果的处理和显示。
routeTask使用了NAServer，这是一个ArcGIS Server的服务，参考Server的文档即可。
urlUtils类和addProxyRule是什么？查询API得知：这是个对url进行管理设置的一个类，addProxyRule好像是添加一条代理设置。//有待考究，删除是否可以执行网络分析。
两个符号：stopSymbol和routeSymbol是点击出现的十字点符号和路径分析结果的紫色线。
所以重点就放在了routeParams、view的click事件和两个方法体上：
routeParams对象
var routeParams = new RouteParameters({
stops: new FeatureSet(),
outSpatialReference: {
wkid: 3857
}
});
stops是RouteParameters类的一个属性，其类型为DataLayer或者FeatureSet。
意义是：进行网络分析时所需要的途径点集合。
在这里，直接实例化了一个FeatureSet对象，不过是空对象。
click事件和2个方法体
on(view, "click", addStop);
function addStop(event) {
var stop = new Graphic({
geometry: event.mapPoint,
symbol: stopSymbol
});
routeLyr.add(stop);
routeParams.stops.features.push(stop);
if (routeParams.stops.features.length >= 2) {
routeTask.solve(routeParams).then(showRoute);
}
}
function showRoute(data) {
var routeResult = data.routeResults[0].route;
routeResult.symbol = routeSymbol;
routeLyr.add(routeResult);
}
视图的点击事件，即addStop方法。
首先会产生一个新的图形对象，其geometry属性赋值为了：点击的点位置对应的Point对象（在事件流中）。
符号则用上方定义的点符号/
然后把这个图形对象stop添加到routeLyr这个图形图层中。
紧接着，把这个图形对象传递给routeParams。它最终传递到了哪里？
刚刚说了，stops给了一个FeatureSet对象，FeatureSet对象则拥有一个features属性（类型为Graphic[]），将刚刚实例化的stop对象push进去。
这样，RouteTask所需的RouteParameters中就多了一个需要停靠的点的信息。
然后，判断停靠点的数量是否大于等于2（两点才能始终嘛）
如果>=2，那么执行routeTask的solve方法，接着一个异步操作，回调函数为showRoute()。
showRoute()方法的作用是获取传入参数data的routeResults属性（其为routeResults[]类型）的第一个元素，即RouteResult对象。//data类型未知，查不到，应该是solve的回传。但是官方写着solve的返回值是RouteResult的实例...
然后把这个RouteResult对象的route属性获取，并设置其符号为上方实例化的线符号，加入到routeLyr图形图层中。
——————
总结一下
符号、图层、地图、场景都是老生常谈了。
最重要的部分即view的click事件，所触发的所有信息，包括RouteParameters对象的属性设置、RouteTask对象的solve方法的使用及RouteResult对象的数据处理。
点击视图——获取点位——设置RouteParameters对象——执行RouteTask.solve()——处理RouteResult对象。
最后给出完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Simple Routing - RouteTask - 4.2</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
} #paneDiv {
position: absolute;
top: 10px;
left: 62px;
padding: 0 12px 0 12px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
}
</style> <link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">
<script src="https://js.arcgis.com/4.2/"></script> <script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/tasks/RouteTask",
"esri/tasks/support/RouteParameters",
"esri/tasks/support/FeatureSet",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/Color",
"esri/core/urlUtils",
"dojo/on",
"dojo/domReady!"
], function(
Map, MapView, Graphic, GraphicsLayer, RouteTask, RouteParameters,
FeatureSet, SimpleMarkerSymbol, SimpleLineSymbol, Color, urlUtils, on
) { // proxy the route requests to avoid prompt for log in
urlUtils.addProxyRule({
urlPrefix: "route.arcgis.com",
proxyUrl: "/sproxy/"
}); // Point the URL to a valid route service
var routeTask = new RouteTask({
url: "https://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"
}); // The stops and route result will be stored in this layer
var routeLyr = new GraphicsLayer(); // Setup the route parameters
var routeParams = new RouteParameters({
stops: new FeatureSet(),
outSpatialReference: { // autocasts as new SpatialReference()
wkid: 3857
}
}); // Define the symbology used to display the stops
var stopSymbol = new SimpleMarkerSymbol({
style: "cross",
size: 15,
outline: { // autocasts as new SimpleLineSymbol()
width: 4
}
}); // Define the symbology used to display the route
var routeSymbol = new SimpleLineSymbol({
color: [0, 0, 255, 0.5],
width: 5
}); var map = new Map({
basemap: "streets",
layers: [routeLyr] // Add the route layer to the map
});
var view = new MapView({
container: "viewDiv", // Reference to the scene div created in step 5
map: map, // Reference to the map object created before the scene
center: [-117.195, 34.057],
zoom: 14
}); // Adds a graphic when the user clicks the map. If 2 or more points exist, route is solved.
on(view, "click", addStop); function addStop(event) {
// Add a point at the location of the map click
var stop = new Graphic({
geometry: event.mapPoint,
symbol: stopSymbol
});
routeLyr.add(stop); // Execute the route task if 2 or more stops are input
routeParams.stops.features.push(stop);
if (routeParams.stops.features.length >= 2) {
routeTask.solve(routeParams).then(showRoute);
}
}
// Adds the solved route to the map as a graphic
function showRoute(data) {
var routeResult = data.routeResults[0].route;
routeResult.symbol = routeSymbol;
routeLyr.add(routeResult);
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="paneDiv">
<div>
<p>Click on the map to add stops to the route. The route from the last stop to
the newly added stop is calculated. If a stop is not reachable, it is removed
and the last valid point is set as the starting point.</p>
</div>
</div>
</body>
</html>
完整HTML代码
ArcGIS API for JavaScript 4.2学习笔记[27] 网络分析之最短路径分析【RouteTask类】的更多相关文章
- ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录
放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...
- ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图
ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...
- ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译
内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View, ...
- ArcGIS API for JavaScript 4.2学习笔记[21] 对3D场景上的3D要素进行点击查询【Query类学习】
有人问我怎么这个系列没有写自己做的东西呢? 大哥大姐,这是"学习笔记"啊!当然主要以解读和笔记为主咯. 也有人找我要实例代码(不是示例),我表示AJS尚未成熟,现在数据编辑功能才简 ...
- ArcGIS API for JavaScript 4.2学习笔记[30] 点和线高程查询（第八章完结）
终于到最后一篇了,可喜可贺. 本例先说明了如何进行单点的高程差分析,然后说明了道路的起伏分析.前者很直观地比较了两个年份的高程数据之间的差值,体现山区的高程变化(有啥用啊?)后者,一条路上的起点终点起 ...
- ArcGIS API for JavaScript 4.2学习笔记[25] 官方第八章Analysis（空间查询）概览与解释
开森,最关注的空间分析章节终于到了,在空间查询那节逻辑性的代码简直要命(呵呵,空间分析的代码也要命...). 上目录截图: [Geodesic buffers(GeometryEngine)] 使用G ...
- ArcGIS API for JavaScript 4.2学习笔记[16] 弹窗自定义功能按钮及为要素自定义按钮（第五章完结）
这节对Popups这一章的最后两个例子进行介绍和解析. 第一个[Popup Actions]介绍了弹窗中如何自定义工具按钮(名为actions),以PopupTemplate+FeatureLayer ...
- ArcGIS API for JavaScript 4.2学习笔记[7] 鹰眼（缩略图的实现及异步处理、Promise、回调函数、监听的笔记）
文前说明:关于style就是页面的css暂时不做评论,因为官方给的例子的样式实在太简单了,照抄阅读即可. 这篇文章有着大量AJS 4.x版本添加的内容,如监听watch.Promise对象.回调函数. ...
- ArcGIS API for JavaScript 4.2学习笔记[19] 搜索小部件——使用更多数据源
上一篇中提到,空间搜索小部件是Search这个类的实例化,作为视图的ui属性添加进去后,视图就会出现搜索框了. 这节的主体代码和上篇几乎一致,区别就在上篇提及的sources属性. 先看看结果: 由于 ...
随机推荐
- C# 运行时通过鼠标拖动改变控件的大小
来源:http://blog.csdn.net/yanleigis/article/details/1819447 using System; using System.Collections.Gen ...
- 理解WEB API网关
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- Maven 使用笔记
一:手动添加包进本地仓库 Maven 安装 JAR 包的命令是: mvn install:install-file -Dfile=jar包的位置 -DgroupId=[groupId] -Dartif ...
- Ceph osd启动报错osd init failed (36) File name too long
在Ceph的osd节点上,启动osd进程失败,查看其日志/var/log/ceph/ceph-osd.{osd-index}.log日志,报错如下: 2017-02-14 16:26:13.55853 ...
- Git基础教程（二）
继续上篇Git基础教程(一),在开篇之前,先回顾一下上篇中的基本命令. 配置命令:git config --global * 版本库初始化:git init 向版本库添加文件:git add * 提交 ...
- [HDOJ2572]终曲
Problem Description 最后的挑战终于到了!站在yifenfei和MM面前的只剩下邪恶的大魔王lemon一人了!战胜他,yifenfei就能顺利救出MM.Yifenfei和魔王lemo ...
- spl之文件处理
spl是php标准库的缩写 spl文件处理类库: SplFileInfo //是一个类用以获取文件的各种信息SplFileInfo的所有方法如下 方法名 - --- 说明2 ...
- tp框架之对列表的一系列操作及跳转页面（详细步骤）
依旧是在Main控制器里面写类方法,如果想看tp全部的话,可以从前几篇开始看,都是一整个步骤下来的 在控制器中重新写个类 然后再做个shouye.html页面 nation表的数据,将会在shou.h ...
- Azure Messaging-ServiceBus Messaging消息队列技术系列5-重复消息：at-least-once at-most-once
上篇博客中,我们用实际的业务场景和代码示例了Azure Messaging-ServiceBus Messaging对复杂对象消息的支持和消息的持久化: Azure Messaging-Service ...
- Mac 上的 outlook 一直让输入密码
Mac 上的 outlook 即便输入了正确的密码,依然提示密码错误,让重新输入,需要输入多遍之后才能连上服务器. 出现这个问题的原因可能是证书过期了. 解决方式如下: 1.找到 2. 删掉 Exch ...