要说网页端最经典的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类】的更多相关文章

  1. ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录

    放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...

  2. ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图

    ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...

  3. ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译

    内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View, ...

  4. ArcGIS API for JavaScript 4.2学习笔记[21] 对3D场景上的3D要素进行点击查询【Query类学习】

    有人问我怎么这个系列没有写自己做的东西呢? 大哥大姐,这是"学习笔记"啊!当然主要以解读和笔记为主咯. 也有人找我要实例代码(不是示例),我表示AJS尚未成熟,现在数据编辑功能才简 ...

  5. ArcGIS API for JavaScript 4.2学习笔记[30] 点和线高程查询（第八章完结）

    终于到最后一篇了,可喜可贺. 本例先说明了如何进行单点的高程差分析,然后说明了道路的起伏分析.前者很直观地比较了两个年份的高程数据之间的差值,体现山区的高程变化(有啥用啊?)后者,一条路上的起点终点起 ...

  6. ArcGIS API for JavaScript 4.2学习笔记[25] 官方第八章Analysis（空间查询）概览与解释

    开森,最关注的空间分析章节终于到了,在空间查询那节逻辑性的代码简直要命(呵呵,空间分析的代码也要命...). 上目录截图: [Geodesic buffers(GeometryEngine)] 使用G ...

  7. ArcGIS API for JavaScript 4.2学习笔记[16] 弹窗自定义功能按钮及为要素自定义按钮（第五章完结）

    这节对Popups这一章的最后两个例子进行介绍和解析. 第一个[Popup Actions]介绍了弹窗中如何自定义工具按钮(名为actions),以PopupTemplate+FeatureLayer ...

  8. ArcGIS API for JavaScript 4.2学习笔记[7] 鹰眼（缩略图的实现及异步处理、Promise、回调函数、监听的笔记）

    文前说明:关于style就是页面的css暂时不做评论,因为官方给的例子的样式实在太简单了,照抄阅读即可. 这篇文章有着大量AJS 4.x版本添加的内容,如监听watch.Promise对象.回调函数. ...

  9. ArcGIS API for JavaScript 4.2学习笔记[19] 搜索小部件——使用更多数据源

    上一篇中提到,空间搜索小部件是Search这个类的实例化,作为视图的ui属性添加进去后,视图就会出现搜索框了. 这节的主体代码和上篇几乎一致,区别就在上篇提及的sources属性. 先看看结果: 由于 ...

随机推荐

  1. 初识html5——试试博文编辑器

    1.html5简介 HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍处 ...

  2. TCP/IP协议（零）TCP/IP参考模型

    我们先浏览一下TCP/IP的参考模型,对网络模型有一个大致的了解,后续着重学习OSI参考模型. TCP/IP参考模型是计算机网络的祖父ARPANET和其后继的因特网使用的参考模型. 1.结构 TCP/ ...

  3. 关于开发中使用writeToFile时的注意事项

    总会有一些坑在前面等着你 我们先来看一下后台返回的部分json数据,稍后再来分析问题,仔细看一下userId和userCode两个字段,其他不用看 "list": [{ " ...

  4. MAC本如何优雅的创建定时任务

    在MACOS上设置定时任务大体有两种方案.一种是使用crontab,一种是使用Schedule,今天结合我的使用简单介绍一下. 先说一下背景,为什么MAC可以用crontab.如果使用过Linux的同 ...

  5. FineUIMvc随笔（4）自定义回发参数与自定义回发

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 不能忘却的回发 在上一篇文章中,我们对FineUIMvc中的回发进行了详细描述,目的是为了告诉大家: 1. FineUIMvc中 ...

  6. Kafka Eagle 源码解读

    1.概述 在<Kafka 消息监控 - Kafka Eagle>一文中,简单的介绍了 Kafka Eagle这款监控工具的作用,截图预览,以及使用详情.今天笔者通过其源码来解读实现细节.目 ...

  7. db2 load乱码问题

    在使用db2过程中经常需要从一个库里拿数据到自己库里来,通常需要将源表的数据导为数据文件,通过数据文件load到自己库里. 这个过程如果两个库的字符编码不一致,常规导入导出就会出现中文乱码. 以下是两 ...

  8. 安全体系（二）——RSA算法详解

    本文主要讲述RSA算法使用的基本数学知识.秘钥的计算过程以及加密和解密的过程. 安全体系(零)—— 加解密算法.消息摘要.消息认证技术.数字签名与公钥证书 安全体系(一)—— DES算法详解 1.概述 ...

  9. Eclipse的Spring IDE插件的安装和使用

    Spring IDE是Spring官方网站推荐的Eclipse插件,可提供在研发Spring时对Bean定义文件进行验证并以可视化的方式查看各个Bean之间的依赖关系等. 安装 使用Eclipse M ...

  10. ajax基础部分

    今天讲了ajax的组成及使用方法:首先我们看看一个简单的ajax的例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...