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

You may also like...