ArcGIS API For JavaScript官方文档之Turtorials——④方向小部件D

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

Directions wiget

1、Directions widget简介

    Directions widget计算两个或更多位置之间的方向，并且使添加路线规划到页面、添加路径到地图变得容易。本教程描述如何向地图中添加directions widget、自定义页面布局以在地图旁边的侧栏中显示directions widget，还可以选择指定您自己的网络分析服务而不是默认的路径服务。

    在开始之前，您需要一个包含地图的页面。如果您没有地图或不知道如何创建地图，请参考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模块，并且在回调函数中输入别名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>之前添加一个div元素用于装载directions widget

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

4、创建一个Directions widget的实例

    向页面添加一个新的Directions widget。在构造函数中，有几个选项可以选填。创建小部件后，一定要调用startup()方法。

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

    在上面的代码中，map参数指定与这个小部件相关联的map，第二个参数srcNodeRef指定创建这个小部件的DOM元素的ID。其他选项可以在class reference page中找到。

    Directions widget使用World Network Analysis作为默认服务来计算驾驶方向，使用此服务需要使用ArcGIS Online订阅。默认情况下，在使用ArcGIS.com进行routing task（路径任务）时需要一个日志。如果您有一个想要用来计算方向的ArcGIS Server Network Analysis service，请为参数routeTaskUrl指定该URL。也请参看下面的”使用您自己的Network Analyst Service”一节。

5、使用标记创建layout widgets

    要使用步骤2中加载的小部件，可以添加一些带有自定义属性的DOM元素。下面的标记设置了带有两个ContentPane的BorderContainer：一个用于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 layout widgets的标记到位，它们就需要被解析。可以使用dojoConfig.parseOnLoad来完成这一任务，但是推荐的方法是加载dojo/parser并调用parser.parse()。通过使用自定义数据属性，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地图应用程序，输入不同的位置以查看计算和显示的方向。一个关于这个的生动例子：Directions Widget

7、使用您自己的network analyst service

    如果您喜欢使用自己的network analyst service而不是默认World Routing Servie，则可以在构造函数中指定routeTaskUrl参数为您自己的net work analyst 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/79938743