ArcGIS API for JavaScript入门教程_第二章_Map操作
分享
-
2016-03-17
Map基本操作
ArcGIS API for JavaScript 能够给地图添加不同的图层，包含ArcGIS for Server的地图服务图层，graphics 图层和自定义图层。除此之外使用ArcGIS Online或者Portal for ArcGIS创造一个webmap是一个用来分享包含图层，符号和弹出窗口，文件数据以及其他元数据资源的好方式。
地图提供了许多的方法，属性和事件用来支持图层操作。ArcGIS API for JavaScript 包含一系列的控件用来提升地图高级功能开发，如展示图例，切换地图和HOME键等。
学习内容
本次课程将学习主要以下方面的内容：
· 地图图层
· 控件的使用
· 地图事件
学习目标
完成本课程后，你将：
· 特定的场景下，能够指出使用图层类型
· 能够正常的使用地图相关控件
· 能够使用地图和图层事件
给Map添加数据
给地图添加数据通常有如下两种方式：
1. 使用地图服务
2. 使用web map
通常这两种方式不同时使用。
地图服务
地图服务通常由ArcGIS for Server的站点或者portal（ArcGIS Online或者portal for ArcGIS）提供。服务通过切片或者动态绘制提供优化的地图显示，且提供对要素的搜索和查询。
Web maps
用户能够登录门户（ArcGIS Online 和Portal for ArcGIS）来创建web map 分享资源。Web map以JSON表示地图信息和相关要素。服务信息，预定义的查询和弹窗和图层信息都能够包含在web map中。通过Map Viewer 能够快速的创建web map。从开发者的角度看，使用web map具有如下好处：
· 能够在门户中快速构建和维护地图
· 减低应用代码量
· 能够使用Web APPBuilder和应用程序模板
给地图添加多个图层的时候，考虑以下几个方面的问题：
· 需要什么样的图层
· 图层该以什么样的顺序显示
· 图层的参考对地图影响
考虑上面三个问题，才能构建一个预期显示效果的地图。
图层选择
图层选择的标准依赖于数据源类型以及如何使用图层，如下表中列出了四种最常见的图层以及使用的场景。
除了上表列出的数据，API还提供了更多的图层类型来显示KML，GeoRSS，CSV和OGC（WMS/WMTS）和实时连续的流数据。除此之外，还可以为了特定的常见，自定义图层类型。
图层顺序
Map存在图层顺序的数组，越往上面的添加的图层，其索引值越大。通常地图的索引为0。如下图所示。由于Graphics 图层在所有图层的上面，其不在Map图层数组，就是不能够通过map的图层索引获取到Graphics 图层。
地图和图层空间参考
所有的地图服务都具有基于GCS（geographic coordinate system）的空间参考。在代码中，可以通过WKT（well-known text）或者WKID(well-known ID)的形式应用空间参考。如下图的表现形式：
当两个数据集使用不同的空间参考时且要叠加到一起显示时，其中的一个数据集参考必须转换到另一个数据集中。API 尝试自动动态投影变换。当多个图层叠加显示的时候，一定需要注意Map 类对不同空间参考的处理：
· 默认情况下，地图采用第一个添加添加图层的参考。
· 当参考不同时，动态，要素和graphics 图层能够动态的转换参考。但是这会影响图形显示效率。
· 缓存图层不会能够动态的转换
编程实现图层
添加图层一般遵循五个步骤，分别为：
1. 获取服务信息
2. 根据上面的信息决定使用图层类型
3. 添加必要的模块
4. 构造需要使用实例
5. 添加图层到地图中
流程如下图所示：
发现服务细节
第一步是发现服务的必要信息，使用ArcGIS 服务目录去浏览和搜索可用服务，确定服务的以下信息：
1. 服务的REST Url
2. 服务的地理范围
3. 是否cached
4. 服务的空间参考
决定图层类型
根据上面的信息决定使用API的那种图层类型来加载和显示。如果其是Cached Service 则使用ArcGISTiledMapServiceLayer，如果不是的话，可以使用ArcGISDynamicMapServiceLayer
加载模块
不同的图层所依赖的模块是不同的，在require中添加模块如esri/map。参考API Refernce查询特定的模块和对应的别名
构造实例
通过提供一个服务URL及其他参数来构建实例，如下所示代码：
控件的使用
ArcGIS API for JavaScript 采用dojo/dijit提供控件。API中提供支持编辑，地理编码，导航，数据可视化等控件，如下图所示：
这些控件能够方便的在应用程序中使用。可以直接在控件的构造中提供必要的配置信息。控件可包含一个startup()方法，该方法在其绑定的对象初始化后，只需调用一次，如下所示：
下表中为可能会使用到的控件：
事件处理
与标准事件onload和onclick类似，API 提供了许多的事件用来确保在适当的时候执行适当的动作。地图类提供了许多的事件，用来与地图进行进行交互。下表为常见的地图控件事件，更多的事件参考API的reference。
当使用异步编程的时候，需要采用正确的事件处理才能保证代码的有序执行。有两点建议：
· 不要在html中插入事件。保证UI和逻辑的分离。
· 使用dojo/on 语法。为了方便和可读，使用object.on()用来对对象实例开启使用或者使用on(dom.byId(“element_name”))语法用来对DOM元素绑定事件。
使用object.on(…) 事件的时候,可以对多个事件添加相同的事件处理函数，如下所示：
练习2A：给map添加图层
本次练习将学习以下内容：
· 指定地图范围
· 添加透明动态图层
· 添加带图层定义要素图层
· 添加BaseMapToggle 控件
· 添加图例控件
STEP1：新建html页面
在新建的html页面中根据练习1中的内容添加必要的js和css文件以及使用require这种AMD的方式添加必要模块。
STEP2：指定初始范围
本次练习的要求是显示California州，地图的范围通过构造方法的center和zoom参数指定，通常这是指定地图范围的最方便的方式。
当不知道显示区域的范围的时候，可以通过手动缩放到感兴趣区，然后使用上面提到chrome或者firebug的调试方式捕捉extent。在控制台输入dojo.toJson(map.extent.toJson())获取当前的extent。如下图所示：
根据获取的json 形式的extent 去new一个extent对象。然后将
STEP3：添加缓存和动态图层
a. 从sampleserver6.arcgisonline.com的服务目录中获取USA地图服务的rest地址
b. 构造一个ArcGISDynamicMapServiceLayer 实例，并将其赋予变量lyrUSA
c. 给该实例传递服务URL
d. 调用addLayer()方法，并传入lyrUSA作为参数。
e. 运行程序
这个时候已经可以展示图了。根据需要我们设定图层的透明度为50%。在上面的动态图层的构造实例中添加opacity参数
STEP4：添加要素图层
根据数据的需要，需要显示过去七天中地震强大大于2级区域。
a. Sampleserver3.arcgisonline.com的rest服务目录，获取EarthquakesFromLastSevenDays
b. 根据上面的教程，查看服务属性获取地震强度字段
c. 使用require 添加对应模块
d. 构造FeatureLayer实例，并赋值给lyrQuakes
e. 传递图层URL
f. 对lyrQuakes调用setDefinitionExpress()方法
g. 运行程序
STEP5：添加BasemapToggle 控件
通过API提供的BasemapToggle 添加和切换地图。
a. 构造一个BasemapToggle的实例，并赋予变量toggle
b. 指定参数，第一个参数为map，指定basemap为topo，指定第二个参数为放置控件的div “BasemapToggle”。
c. 调用startup()
d. 运行程序
STEP6：添加Legend控件
Legend控件能够显示地图控件中的部分图层，当有图层添加和移除能够自动更新。
a. 将上面步骤中的添加addLayer的两行代码注释掉
b. 添加map.on监控layers-add-result事件，当图层添加完成后，构建Legend实例。
c. 在map.on 事件后调用addLayers()方法，并传递上面两个图层实例组成的数组。
d. 运行程序。
小结
通过本课程，了解到了不通Map能够添加的图层类型，根据具体的数据和业务判断使用具体的图层类型；掌握了控件的使用以及如何添加和处理事件。
思考题
1. 根据API帮助，如何使用AMD 模块加载的语法，加载geometry/extent 类?
2. 用来添加USA的地图服务，需要使用到esri/layers 中具体哪个模块？
本教程所有章节链接：
ArcGIS API for JavaScript入门教程_第一章_介绍：http://zhihu.esrichina.com.cn/?/article/556
ArcGIS API for JavaScript入门教程_第二章_Map操作：http://zhihu.esrichina.com.cn/?/article/557
ArcGIS API for JavaScript 能够给地图添加不同的图层，包含ArcGIS for Server的地图服务图层，graphics 图层和自定义图层。除此之外使用ArcGIS Online或者Portal for ArcGIS创造一个webmap是一个用来分享包含图层，符号和弹出窗口，文件数据以及其他元数据资源的好方式。
地图提供了许多的方法，属性和事件用来支持图层操作。ArcGIS API for JavaScript 包含一系列的控件用来提升地图高级功能开发，如展示图例，切换地图和HOME键等。
学习内容
本次课程将学习主要以下方面的内容：
· 地图图层
· 控件的使用
· 地图事件
学习目标
完成本课程后，你将：
· 特定的场景下，能够指出使用图层类型
· 能够正常的使用地图相关控件
· 能够使用地图和图层事件
给Map添加数据
给地图添加数据通常有如下两种方式：
1. 使用地图服务
2. 使用web map
通常这两种方式不同时使用。
地图服务
地图服务通常由ArcGIS for Server的站点或者portal（ArcGIS Online或者portal for ArcGIS）提供。服务通过切片或者动态绘制提供优化的地图显示，且提供对要素的搜索和查询。
Web maps
用户能够登录门户（ArcGIS Online 和Portal for ArcGIS）来创建web map 分享资源。Web map以JSON表示地图信息和相关要素。服务信息，预定义的查询和弹窗和图层信息都能够包含在web map中。通过Map Viewer 能够快速的创建web map。从开发者的角度看，使用web map具有如下好处：
· 能够在门户中快速构建和维护地图
· 减低应用代码量
· 能够使用Web APPBuilder和应用程序模板
给地图添加多个图层的时候，考虑以下几个方面的问题：
· 需要什么样的图层
· 图层该以什么样的顺序显示
· 图层的参考对地图影响
考虑上面三个问题，才能构建一个预期显示效果的地图。
图层选择
图层选择的标准依赖于数据源类型以及如何使用图层，如下表中列出了四种最常见的图层以及使用的场景。
除了上表列出的数据，API还提供了更多的图层类型来显示KML，GeoRSS，CSV和OGC（WMS/WMTS）和实时连续的流数据。除此之外，还可以为了特定的常见，自定义图层类型。
图层顺序
Map存在图层顺序的数组，越往上面的添加的图层，其索引值越大。通常地图的索引为0。如下图所示。由于Graphics 图层在所有图层的上面，其不在Map图层数组，就是不能够通过map的图层索引获取到Graphics 图层。
地图和图层空间参考
所有的地图服务都具有基于GCS（geographic coordinate system）的空间参考。在代码中，可以通过WKT（well-known text）或者WKID(well-known ID)的形式应用空间参考。如下图的表现形式：
当两个数据集使用不同的空间参考时且要叠加到一起显示时，其中的一个数据集参考必须转换到另一个数据集中。API 尝试自动动态投影变换。当多个图层叠加显示的时候，一定需要注意Map 类对不同空间参考的处理：
· 默认情况下，地图采用第一个添加添加图层的参考。
· 当参考不同时，动态，要素和graphics 图层能够动态的转换参考。但是这会影响图形显示效率。
· 缓存图层不会能够动态的转换
编程实现图层
添加图层一般遵循五个步骤，分别为：
1. 获取服务信息
2. 根据上面的信息决定使用图层类型
3. 添加必要的模块
4. 构造需要使用实例
5. 添加图层到地图中
流程如下图所示：
发现服务细节
第一步是发现服务的必要信息，使用ArcGIS 服务目录去浏览和搜索可用服务，确定服务的以下信息：
1. 服务的REST Url
2. 服务的地理范围
3. 是否cached
4. 服务的空间参考
注：ArcGIS for server的服务目录的url地址如下：http://<server>/arcgis/rest/services
决定图层类型
根据上面的信息决定使用API的那种图层类型来加载和显示。如果其是Cached Service 则使用ArcGISTiledMapServiceLayer，如果不是的话，可以使用ArcGISDynamicMapServiceLayer
加载模块
不同的图层所依赖的模块是不同的，在require中添加模块如esri/map。参考API Refernce查询特定的模块和对应的别名
构造实例
通过提供一个服务URL及其他参数来构建实例，如下所示代码：
var censusLayerRUL="<Server url>"
var censuslayerOptions={
"id": "censusLayer",
"opacity":0.5,
"showAttribution":true
};
VAr censusLayer=new ArcGISDynamicMapServicesLayer(censusLayerRUL,censuslayerOptions);
mapMain.addLayer(censusLayer);
控件的使用
ArcGIS API for JavaScript 采用dojo/dijit提供控件。API中提供支持编辑，地理编码，导航，数据可视化等控件，如下图所示：
这些控件能够方便的在应用程序中使用。可以直接在控件的构造中提供必要的配置信息。控件可包含一个startup()方法，该方法在其绑定的对象初始化后，只需调用一次，如下所示：
var mapMain=new Map("ui-map",{<mapOptions>});
var toggle=new BaseMapToggle({
map:mapMain,
baseMap:"topo"
},"BaseMap-Toggle"); //div
//strart widget
toggle.startup();
下表中为可能会使用到的控件：
事件处理
与标准事件onload和onclick类似，API 提供了许多的事件用来确保在适当的时候执行适当的动作。地图类提供了许多的事件，用来与地图进行进行交互。下表为常见的地图控件事件，更多的事件参考API的reference。
当使用异步编程的时候，需要采用正确的事件处理才能保证代码的有序执行。有两点建议：
· 不要在html中插入事件。保证UI和逻辑的分离。
· 使用dojo/on 语法。为了方便和可读，使用object.on()用来对对象实例开启使用或者使用on(dom.byId(“element_name”))语法用来对DOM元素绑定事件。
使用object.on(…) 事件的时候,可以对多个事件添加相同的事件处理函数，如下所示：
//给map传递多个字符串
map.on("pan-end,zoom-end", function(e){
console.log("Map Pan or Zoom",e);
});
练习2A：给map添加图层
本次练习将学习以下内容：
· 指定地图范围
· 添加透明动态图层
· 添加带图层定义要素图层
· 添加BaseMapToggle 控件
· 添加图例控件
STEP1：新建html页面
在新建的html页面中根据练习1中的内容添加必要的js和css文件以及使用require这种AMD的方式添加必要模块。
STEP2：指定初始范围
本次练习的要求是显示California州，地图的范围通过构造方法的center和zoom参数指定，通常这是指定地图范围的最方便的方式。
当不知道显示区域的范围的时候，可以通过手动缩放到感兴趣区，然后使用上面提到chrome或者firebug的调试方式捕捉extent。在控制台输入dojo.toJson(map.extent.toJson())获取当前的extent。如下图所示：
根据获取的json 形式的extent 去new一个extent对象。然后将
STEP3：添加缓存和动态图层
a. 从sampleserver6.arcgisonline.com的服务目录中获取USA地图服务的rest地址
b. 构造一个ArcGISDynamicMapServiceLayer 实例，并将其赋予变量lyrUSA
c. 给该实例传递服务URL
d. 调用addLayer()方法，并传入lyrUSA作为参数。
e. 运行程序
这个时候已经可以展示图了。根据需要我们设定图层的透明度为50%。在上面的动态图层的构造实例中添加opacity参数
STEP4：添加要素图层
根据数据的需要，需要显示过去七天中地震强大大于2级区域。
a. Sampleserver3.arcgisonline.com的rest服务目录，获取EarthquakesFromLastSevenDays
b. 根据上面的教程，查看服务属性获取地震强度字段
c. 使用require 添加对应模块
d. 构造FeatureLayer实例，并赋值给lyrQuakes
e. 传递图层URL
f. 对lyrQuakes调用setDefinitionExpress()方法
g. 运行程序
STEP5：添加BasemapToggle 控件
通过API提供的BasemapToggle 添加和切换地图。
a. 构造一个BasemapToggle的实例，并赋予变量toggle
b. 指定参数，第一个参数为map，指定basemap为topo，指定第二个参数为放置控件的div “BasemapToggle”。
c. 调用startup()
d. 运行程序
STEP6：添加Legend控件
Legend控件能够显示地图控件中的部分图层，当有图层添加和移除能够自动更新。
a. 将上面步骤中的添加addLayer的两行代码注释掉
b. 添加map.on监控layers-add-result事件，当图层添加完成后，构建Legend实例。
c. 在map.on 事件后调用addLayers()方法，并传递上面两个图层实例组成的数组。
d. 运行程序。
小结
通过本课程，了解到了不通Map能够添加的图层类型，根据具体的数据和业务判断使用具体的图层类型；掌握了控件的使用以及如何添加和处理事件。
思考题
1. 根据API帮助，如何使用AMD 模块加载的语法，加载geometry/extent 类?
2. 用来添加USA的地图服务，需要使用到esri/layers 中具体哪个模块？
本教程所有章节链接：
ArcGIS API for JavaScript入门教程_第一章_介绍：http://zhihu.esrichina.com.cn/?/article/556
ArcGIS API for JavaScript入门教程_第二章_Map操作：http://zhihu.esrichina.com.cn/?/article/557
