ArcGIS API for JavaScript官方文档Tutorials之Directions widget（方向小部件）

ArcGIS API For JS官方文档解析目录

Directions widget

1、介绍方向小部件

    Directions widget计算两个或多个位置之间的方向，并方便地向页面添加转向方向，以及向地图添加路径。本教程介绍如何将Directions widget添加到map，自定义页面布局以在位于地图旁边的边栏中显示Directions widget，并且可以选择指定您自己的network analysis service（网络分析服务）以替代默认routing service（路径服务）。

    开始之前，您需要一个包含一个map的页面。如果您没有或不知道如何创建这样的页面，请参阅Create a Map sample。还需要在ArcGIS.com订阅World Network Analysis，或者您可以使用自己的ArcGIS Server Network Analysis service。此外，请确保您正在使用最新的ArcGIS API for JavaScript。Directions widget首次在版本3.4引用，并且在所有后续版本都可用。

2、加载Directions widget

    使用require()加载esri/dijit/Directions module，并在回调函数中将其命名为Directions。还加载了一对简化页面布局的Dojo布局模块。更多关于布局模块的内容在步骤5和6。

require([
  "esri/map",
  "esri/dijit/Directions",
  "dojo/parser", 
  "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
  "dojo/domReady!"
], function (Map, Directions, parser) {
    // code goes here
});

3、为小部件添加一个DOM元素

    在<div id=”map”></div>添加一个带有id的<div>元素，此元素将包含小部件的用户界面。

<div id="dir"></div>

4、创建一个Directions widget的实例

    向页面添加一个新的Directions widget，对于小部件，第一个参数中，有几个选项可以设置。创建小部件后，请确保调用startup()。

var directions = new Directions({
  map: map
}, "dir");
directions.startup();

    在上面的代码中，map属性指定了该小部件与哪个地图关联，第二个参数：srcNodeRef，指定了将创建这个小部件的DOM元素的ID。其他可设置选项可以在class reference page中找到。

    Directions widget使用World Network Analysis作为默认服务来计算驱动方向。需要使用ArcGIS Online 订阅来使用此服务，默认情况下，当使用ArcGIS.com用于一个routing task（路径任务）时需要一个日志。如果您有一个想要用于计算方向的ArcGIS Server Network Analysis service，请将Directions widget的构造函数的参数routeTaskUrl指定为该URL。或者参阅下面的“使用您自己的Network Analyst Service”小节。

5、使用标记创建布局小部件

       若要使用第2步加载的布局小部件，请添加一些带有自定义属性的DOM元素。下面的标记设置了一个带有两个内容窗格的边框容器：一个用于map，一个用于Directions widget。

<div data-dojo-type="dijit/layout/BorderContainer" 
     data-dojo-props="design:'headline', gutters:false" 
     style="width:100%;height:100%;">
  <div data-dojo-type="dijit/layout/ContentPane" 
       data-dojo-props="region:'right'" 
       style="width:250px;">
    
    <div id="dir"></div>
  </div>
  <div id="map" 
       data-dojo-type="dijit/layout/ContentPane" 
       data-dojo-props="region:'center'">
  </div>
</div>

6、解析页面布局

    一旦Dojo布局小部件的标记已经到位，它们就需要被解析。可以使用dojoConfig.parseOnLoad来实现这一点，但是推荐的方法是加载dojo/parser并显式调用parser.parse()。通过使用custom data attributes，dojo parser能够查找、创建适当大小的页面布局组件。参考Dojo’s Dijit layout documentation，了解有关这些模块如何操作以及如何使用它们的详细信息。

require([
  "esri/map",
  "esri/dijit/Directions",
  "dojo/parser", 
  "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
  "dojo/domReady!"
], function (Map, Directions, parser) {
    // call the parser
    parser.parse();
    // additional code to create a map and directions widget
});

    此时，您就有一个简单的拥有Directions widget的Web地图应用程序，输入各个位置以查看被计算和显示的方向。本教程的一个生动版本

7、附加：使用您自己的network analyst service

如果您希望使用自己的network analysis service而不是默认的World Routing Service，您可以指定构造函数中的routeTaskUrl选项为您自己的network analysis service的URL路径。

var directions = new Directions({
  map: map,
  routeTaskUrl: "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/NAServer/Route",
}, "dir");

转载自：https://blog.csdn.net/qq_35732147/article/details/80153428