地理信息系统（GIS）系列——ArcGIS中的各种图层

1、Map 类

构造函数

new Map(divId, options?)

Map 属性

• attribution：属性
• autoResize：自动调整大小
• basemapLayerIds：地图当前的底图数组
• extent：地图范围
• fadeOnZoom：淡入效果的缩放
• geographicExtent：地图（或边界框）的地理范围
• graphics：提供对地图的 GraphicsLayer 的访问
• graphicsLayerIds：当前 GraphicsLayers 地图的数组
• height：高度
• id：编号
• infoWindow：信息窗
• isClickRecenter：是否单击重定位
• isDoubleClickZoom：是否双击缩放
• isKeyboardNavigation：是否按键导航
• isPan：是否地图平移
• isPanArrows：是否箭头显示地图上平移
• isScrollWheelZoom：是否滑轮旋转缩放
• isShiftDoubleClickZoom：是否按下shift键并双击缩放
• isZoomSlider：是否滑轮器缩放
• layerIds：图层数组
• loaded：图层加载后
• navigationMode：导航模式
• position：位置
• root：包含容器的DOM节点的层，内置信息窗口、图标和滑块
• showAttribution：是否显示属性
• snappingManager：闪光的管理
• spatialReference：空间参考
• timeExtent：时间范围
• visible：地图显示
• width：宽度

Map 方法

• addLayer(layer, index?)：添加图层
• addLayers(layers)：添加图层数组
• attr(name, value)：设置属性
• centerAndZoom(mapPoint, levelOrFactor)：中心点缩放
• centerAt(mapPoint)：设为中心点
• destroy()：销毁地图
• disableClickRecenter()：禁止单击重定位
• disableDoubleClickZoom()：禁止双击缩放
• disableKeyboardNavigation()：禁止按键导航
• disableMapNavigation()：禁止地图导航
• disablePan()：禁止平移
• disableScrollWheelZoom()：禁止滑轮缩放
• disableShiftDoubleClickZoom()：禁止按下shift键并双击缩放
• disableSnapping()：禁止闪光
• enableClickRecenter()：允许单击重定位
• enableDoubleClickZoom()：允许双击缩放
• enableKeyboardNavigation()：允许按键导航
• enableMapNavigation()：允许地图导航
• enablePan()：允许平移地图
• enableScrollWheelZoom()：允许滑轮缩放
• enableShiftDoubleClickZoom()：允许按下shift键并双击缩放
• enableSnapping(snapOptions?)：允许发光
• getBasemap()：获取底图
• getInfoWindowAnchor(screenCoords)：获取信息窗口锚点
• getLayer(id)：根据图层id获取图层
• getLayersVisibleAtScale()：获取图层显示的比例
• getLevel()：获取图层级别
• getMaxScale()：获取最大比例
• getMaxZoom()：获取最大缩放级别
• getMinScale()：获取最小比例
• getMinZoom()：获取最小缩放级别
• getScale()：获取比例
• getZoom()：获取缩放级别
• hidePanArrows()：隐藏平移箭头
• hideZoomSlider()：隐藏缩放滑轮
• panDown()：平移按下
• panLeft()：平移向左
• panLowerLeft()：向左下方平移
• panLowerRight()：向右下方平移
• panRight()：向右平移
• panUp()：平移抬起
• panUpperLeft()：向左上方平移
• panUpperRight()：向右上方平移
• removeAllLayers()：移除所有图层
• removeLayer(layer)：移除某个图层
• reorderLayer(layer, index)：对图层重排序
• reposition()：图层复位
• resize(immediate?)：调整大小
• setBasemap(basemap)：设置底图
• setExtent(extent, fit?)：设置范围
• setInfoWindowOnClick(enabled)：设置信息窗单击
• setLevel(level)：设置级别
• setMapCursor(cursor)：设置地图光标
• setScale(scale)：设置比例
• setTimeExtent(timeExtent)：设置时间范围
• setTimeSlider(timeSlider)：设置时间滑块
• setVisibility(visible)：设置是否显示
• setZoom(zoom)：设置缩放
• showPanArrows()：显示移动箭头
• showZoomSlider()：显示缩放滑轮
• toMap(screenPoint)：转换为地图坐标
• toScreen(mapPoint)：转换为屏幕坐标

Map 事件

• basemap-change：底图改变
• before-unload：卸载前
• click：单击事件
• dbl-click：双击事件
• extent-change：地图范围发生改变
• key-down：按键按下
• key-up：按键抬起
• layer-add：图层添加
• layer-add-result：图层添加结束
• layer-remove：图层移除
• layer-reorder：图层重排序
• layer-resume：图层复位
• layer-suspend：图层暂停
• layers-add-result：图层添加返回
• layers-removed：图层移除后
• layers-reordered：图层重排序后
• load：加载
• mouse-down：鼠标按下
• mouse-drag：鼠标拖拽
• mouse-drag-end：鼠标拖拽结束
• mouse-drag-start：鼠标拖拽开始
• mouse-move：鼠标移动
• mouse-out：鼠标离开
• mouse-over： 鼠标结束
• mouse-up：鼠标抬起
• mouse-wheel：鼠标滚轮
• pan：平移
• pan-end：平移结束
• pan-start：平移开始
• reposition：复位
• resize：调整大小
• time-extent-change：时间范围发生改变
• unload：卸载
• update-end：更新结束
• update-start：更新开始
• zoom：缩放
• zoom-end：缩放结束
• zoom-start：缩放开始

2、图层分类

Layer 类

• 图层基类，所有图层类都继承此类，没有构造函数

Layer 属性

• attributionDataUrl：图层的属性存储路径
• className：类属性层的节点名称
• hasAttributionData：真值时，图层属性数据
• id：唯一标示
• loadError：加载错误信息类
• loaded：加载后属性
• maxScale：最大比例尺
• minScale：最小比例尺
• opacity：透明度
• refreshInterval：刷新间隔
• showAttribution：显示属性
• suspended：暂停、延缓
• titleInfo：标题信息
• url：路径
• visible：显示
• visibleAtMapScale：显示比例尺

Layer 方法

• attr(name, value)：设置属性
• getAttributionData()：获取属性数据
• getMap()：获取地图
• getNode()：获取图层节点
• hide()：隐藏
• isVisibleAtScale(scale)：显示比例尺
• resume()：图层复原
• setMaxScale(scale)：设置最大比例尺
• setMinScale(scale)：设置最小比例尺
• setOpacity(opacity)：设置透明度
• setRefreshInterval(interval)；设置刷新间隔
• setScaleRange(minScale, maxScale)：设置比例尺范围
• setVisibility(isVisible)：设置是否显示
• show()：设置显示为True
• suspend()：暂停、延缓

Layer 事件

• error：错误事件
• load：加载事件
• opacity-change：透明度改变事件
• refresh-interval-change：刷新间隔发生变化
• resume：复原事件
• scale-range-change：标尺范围改变事件
• scale-visibility-change：标尺显示改变事件
• suspend：延缓推迟事件
• update：更新事件
• update-end：更新结束事件
• update-start：更新开始事件
• visibility-change：显示改变事件

图层分类

Arcgis Javascript API 提供了5种类型的图层，分别是地图切片图层、动态地图图层、图形图层、带地理参考的影像图层以及KML图层，这些图层类都继承于Layer类，分别是：TiledMapServiceLayer，DynamicMapServiceLayer，GraphicsLayer，MapImageLayer 和 KMLLayer。
其中，TiledMapServiceLayer（切片图层）又分为：ArcGISTiledMapServiceLayer，OpenStreetMapLayer，WMTSLayer 和 WebTiledLayer。
其中，DynamicMapServiceLayer（动态图层）又分为：ArcGISDynamicMapServiceLayer，ArcGISImageServiceLayer 和 WMSLayer。

3、ArcGISTiledMapServiceLayer

• 静态切片图层类

构造函数

new ArcGISTiledMapServiceLayer(url, options?)

ArcGISTiledMapServiceLayer 属性

• attributionDataUrl：图层的属性数据存储路径
• capabilities：地图服务的功能，可选值是地图，查询或数据
• className：类属性层的节点名称
• copyright：版权字符串定义的地图服务
• description：地图描述定义的地图服务
• fullExtent：地图全范围
• hasAttributionData：是否有属性数据
• id：唯一标示
• infoTemplates：信息模板
• initialExtent：初始化范围
• layerInfos：图层信息数组
• loadError：加载错误信息属性
• loaded：加载后属性
• maxImageHeight：最大图片高度
• maxImageWidth：最大图片宽度
• maxRecordCount：最大记录数量
• maxScale：最大比例
• minScale：最小比例
• opacity：透明度
• refreshInterval：刷新间隔
• showAttribution：是否显示属性
• spatialReference：空间参考
• suspended：暂停、延缓
• titleInfo：标题信息
• timeInfo：时间信息
• units：单位数组
• url：服务路径
• version：版本
• visible：是否显示
• visibleAtMapScale：是否显示地图比例尺

ArcGISTiledMapServiceLayer 方法

• attr(name, value)：添加属性
• getAttributionData()：获取属性数据
• getMap()：返回地图
• getNode()：返图层节点
• hide()：隐藏
• isVisibleAtScale(scale)：显示比例尺
• refresh()：刷新
• resume()：重新加载当前视图中的所有瓦片
• setExclusionAreas()：指定某些区域不显示标题
• setInfoTemplates(infoTemplates)：设置信息模板
• setMaxScale(scale)：设置最大比例尺
• setMinScale(scale)：设置最小比例尺
• setOpacity(opacity)：设置透明度
• setRefreshInterval(interval)：设置刷新间隔
• setScaleRange(minScale, maxScale)：设置比例尺范围
• setVisibility(isVisible)：设置是否显示
• suspend()：暂停、延缓

ArcGISTiledMapServiceLayer 事件

• error：错误事件
• load：加载事件
• opacity-change：透明度改变事件
• refresh-interval-change：刷新间隔发生变化
• resume：图层复原事件
• scale-range-change：标尺范围改变事件
• scale-visibility-change：标尺显示改变事件
• suspend：延缓推迟事件
• update：更新事件
• update-end：更新结束事件
• update-start：更新开始事件
• visibility-change：显示改变事件

4、OpenStreetMapLayer

• 开放的地图街道图层，世界地图

构造函数

new OpenStreetMapLayer(options?)

OpenStreetMapLayer 属性

• attributionDataUrl：图层的属性数据存储路径
• capabilities：地图服务的功能，可选值是地图，查询或数据
• className：类属性层的节点名称
• copyright：版权字符串定义的地图服务
• description：地图描述定义的地图服务
• fullExtent：地图全图范围
• hasAttributionData：是否有图层属性数据
• id：唯一标示
• loadError：加载错误信息类
• loaded：加载后属性
• maxScale：最大比例尺
• minScale：最小比例尺
• opacity：透明度
• refreshInterval：刷新间隔
• showAttribution：显示属性
• spatialReference：空间参考
• suspended：暂停、延缓
• titleInfo：标题信息
• url：路径
• visible：显示
• visibleAtMapScale：显示比例尺

OpenStreetMapLayer 方法

• attr(name, value)：添加属性
• getAttributionData()：获取属性数据
• getMap()：获取地图
• getNode()：获取图层节点
• getTileUrl(level, row, column)：获取切片路径
• hide()：隐藏
• isVisibleAtScale(scale)：是否显示比例尺
• refresh()：刷新
• resume()：复原图层
• setExclusionAreas()：指定某些区域不设置标题
• setMaxScale(scale)：设置最大比例尺
• setMinScale(scale)：设置最小比例尺
• setOpacity(opacity)：设置透明度
• setRefreshInterval(interval)：设置刷新间隔
• setScaleRange(minScale, maxScale)：设置比例尺范围
• setVisibility(isVisible)：设置图层是否显示
• show()：设置图层显示
• suspend()：图层加载延缓延迟

OpenStreetMapLayer 事件

• error：错误事件
• load：加载事件
• opacity-change：透明度改变事件
• refresh-interval-change：刷新间隔发生变化
• resume：图层复原事件
• scale-range-change：标尺范围改变事件
• scale-visibility-change：标尺显示改变事件
• suspend：延缓推迟事件
• update：更新事件
• update-end：更新结束事件
• update-start：更新开始事件
• visibility-change：显示改变事件

<!DOCTYPE html>
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>OpenStreetMap</title> 
    <link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/init.js"></script>
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/esri/css/esri.css" />
    <script>
        dojo.require("esri.map");
        dojo.require("esri.layers.osm");
        var map, osmLayer;

        function init() {
            map = new esri.Map("map", {
                center: [-89.924, 30.036],
                zoom: 12,
                logo: false
            });

            osmLayer = new esri.layers.OpenStreetMapLayer();
            map.addLayer(osmLayer);
        }

        dojo.ready(init);
    </script> 
  </head> 
  
  <body class="claro" style="font-size: small; font-family: Arial Unicode MS,Arial,sans-serif;"> 
    <div id="map" style="position:relative;width:700px; height:500px; border:1px solid #000;"></div> 
  </body> 
</html>

5、WMTSLayer

• 创建一个基于OGC Web地图切片图层

构造函数

new WMTSLayer(url, options?)

• 方法，属性，事件同 Layer

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>WMTSLayer</title>

    <style>
      html, body { 
      	height: 100%; 
      	width: 100%; 
      	margin: 0; 
      	padding: 0; 
      } 
      #map { 
      	padding:0; 
      } 
      #citationInfo { 
      	position:absolute; 
      	color:black; 
      	font-weight:bold; 
      	font-size:12pt; 
      	left:10px; 
      	bottom:10px; 
      	z-Index:999; 
      }
    </style>
    <link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/init.js"></script>
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/esri/css/esri.css" />
    <script>
        var map, wmtsLayer;
        require([
          "esri/map", 
          "esri/layers/WMTSLayer", 
          "esri/layers/WMTSLayerInfo",
          "esri/geometry/Extent", 
          "esri/layers/TileInfo", 
          "esri/SpatialReference",
          "dojo/parser",
          "dijit/layout/BorderContainer", 
          "dijit/layout/ContentPane", 
          "dojo/domReady!"
        ], function (
          Map, 
          WMTSLayer, 
          WMTSLayerInfo,
          Extent, 
          TileInfo, 
          SpatialReference,
          parser
        ) {
            parser.parse();

            var bounds = new Extent({
                "xmin": -128.816, "ymin": 25.076, "xmax": -72.855, "ymax": 51.385,
                "spatialReference": { "wkid": 4326 }
            });
            map = new Map("map", {
                extent: bounds
            });

            var tileInfo1 = new TileInfo({						// 包含有关切片图层的切片方案
                "dpi": 90.71428571428571,						// 切片的dpi（每英寸点数）方案
                "format": "image/png",
                "compressionQuality": 0,						// 压缩质量
                "spatialReference": new SpatialReference({
                    "wkid": 3857
                }),
                "rows": 256,
                "cols": 256,
                "origin": {										// 切片范围，起源，方案
                    "x": -20037508.34,
                    "y": 20037508.34
                },
                "lods": [{										// 数组定义切片方案的详细级别
                    "level": "EPSG:900913:8",
                    "scale": 2183915.0935581755,
                    "resolution": 611.4962261962892 			// 分辨率
                }, {
                    "level": "EPSG:900913:9",
                    "scale": 1091957.5467790877,
                    "resolution": 305.7481130981446
                }, {
                    "level": "EPSG:900913:10",
                    "scale": 545978.7733895439,
                    "resolution": 152.8740565490723
                }, {
                    "level": "EPSG:900913:11",
                    "scale": 272989.38669477194,
                    "resolution": 76.43702827453615
                }, {
                    "level": "EPSG:900913:12",
                    "scale": 136494.69334738597,
                    "resolution": 38.21851413726807
                }, {
                    "level": "EPSG:900913:13",
                    "scale": 68247.34667369298,
                    "resolution": 19.109257068634037
                }, {

                    "level": "EPSG:900913:14",
                    "scale": 34123.67333684649,
                    "resolution": 9.554628534317018
                }, {

                    "level": "EPSG:900913:15",
                    "scale": 17061.836668423246,
                    "resolution": 4.777314267158509
                }, {
                    "level": "EPSG:900913:16",
                    "scale": 8530.918334211623,
                    "resolution": 2.3886571335792546
                }, {
                    "level": "EPSG:900913:17",
                    "scale": 4265.4591671058115,
                    "resolution": 1.1943285667896273
                }, {
                    "level": "EPSG:900913:18",
                    "scale": 2132.7295835529058,
                    "resolution": 0.5971642833948136
                }, {
                    "level": "EPSG:900913:19",
                    "scale": 1066.3647917764529,
                    "resolution": 0.2985821416974068
                }]
            });
            var tileExtent1 = new Extent(-13686470, 5203832, -13669272, 5215298, new SpatialReference({
                wkid: 3857
            }));
            var layerInfo1 = new WMTSLayerInfo({
                tileInfo: tileInfo1,
                fullExtent: tileExtent1,
                initialExtent: tileExtent1,
                identifier: "medford:zoning", 					// 标示
                tileMatrixSet: "EPSG:900913",					// 瓦片矩阵
                format: "gif",
                style: "_null"
            });

            var tileInfo2 = new TileInfo({
                "dpi": 90.71428571428571,
                "format": "image/png",
                "compressionQuality": 0,
                "spatialReference": new SpatialReference({
                    "wkid": 4326
                }),
                "rows": 256,
                "cols": 256,
                "origin": {
                    "x": -180,
                    "y": 90
                },
                "lods": [{
                    "level": "EPSG:4326:0",
                    "scale": 279541132.0143589,
                    "resolution": 0.7039144025535298
                }, {
                    "level": "EPSG:4326:1",
                    "scale": 139770566.00717944,
                    "resolution": 0.3519572012767649
                }, {
                    "level": "EPSG:4326:2",
                    "scale": 69885283.00358972,
                    "resolution": 0.17597860063838244
                }, {
                    "level": "EPSG:4326:3",
                    "scale": 34942641.50179486,
                    "resolution": 0.08798930031919122
                }, {
                    "level": "EPSG:4326:4",
                    "scale": 17471320.75089743,
                    "resolution": 0.04399465015959561
                }, {
                    "level": "EPSG:4326:5",
                    "scale": 8735660.375448715,
                    "resolution": 0.021997325079797805
                }, {
                    "level": "EPSG:4326:6",
                    "scale": 4367830.1877243575,
                    "resolution": 0.010998662539898903
                }, {
                    "level": "EPSG:4326:7",
                    "scale": 2183915.0938621787,
                    "resolution": 0.005499331269949451
                }, {
                    "level": "EPSG:4326:8",
                    "scale": 1091957.5469310894,
                    "resolution": 0.0027496656349747257
                }, {
                    "level": "EPSG:4326:9",
                    "scale": 545978.7734655447,
                    "resolution": 0.0013748328174873628
                }]
            });
            var tileExtent2 = new Extent(-179.99999, -89.99999, 179.99999, 89.99999, new SpatialReference({
                wkid: 4326
            }));
            var layerInfo2 = new WMTSLayerInfo({
                tileInfo: tileInfo2,
                fullExtent: tileExtent2,
                initialExtent: tileExtent2,
                identifier: "usa:states",
                tileMatrixSet: "EPSG:4326",
                format: "png",
                style: "_null"
            });

            var resourceInfo = {
                version: "1.0.0",
                layerInfos: [layerInfo1, layerInfo2],
                copyright: "open layer"
            };

            var options = {
                serviceMode: "KVP",								// 指定服务类型。有效值是最高值
                resourceInfo: resourceInfo,
                layerInfo: layerInfo2
            };

            wmtsLayer = new WMTSLayer("http://v2.suite.opengeo.org/geoserver/gwc/service/wmts", options);
            map.addLayer(wmtsLayer);
        });

    </script>
  </head>
  
  <body>
    <div data-dojo-type="dijit/layout/BorderContainer" 
         data-dojo-props="design:'headline', gutters:false" 
         style="width: 100%; height: 100%; margin: 0;">

      	 <div id="map" 
           	data-dojo-type="dijit/layout/ContentPane" 
           	data-dojo-props="region:'center'">
        	<div id="citationInfo"></div>
      	</div>

    </div>
  </body>
</html>

6、WebTiledLayer

• 对于不是使用ArcGis Server发布的切片地图服务，可以使用该类

构造函数

new WebTiledLayer(urlTemplate, options?)

• urlTemplate 设置格式：http://some.doman.com/${level}/${col}/${row}/
• level：层级
• col：切片的列
• row：切片的行
• 属性，事件，方法同Layer

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>WebTiledLayer</title>

    <link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/init.js"></script>
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/esri/css/esri.css" />
    <style>
      html, body, #map { 
        height: 100%; width: 100%;
        margin: 0; padding: 0;
      } 
      body{
        background-color: #fff; overflow:hidden; 
        font-family: sans-serif;
      } 
      #header {
        padding: 4px 15px 4px 0;
        background-color: #F2F2EC; 
        color: #575757; 
        font-size: 16pt; 
        text-align: right; 
        font-weight: bold;
        height:55px;
      }
      #subheader {
        color: #575757;
        font-size: small;
        padding: 5px 0 0 0;
        text-align: right;
      }
      #subheader a { color: #575757; }

      .ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }
      #ds-h div { width: 100%; }
      #ds .o1 { filter: alpha(opacity=10); opacity: .1; }
      #ds .o2 { filter: alpha(opacity=8); opacity: .08; }
      #ds .o3 { filter: alpha(opacity=6); opacity: .06; }
      #ds .o4 { filter: alpha(opacity=4); opacity: .04; }
      #ds .o5 { filter: alpha(opacity=2); opacity: .02; }
      #ds .h1 { height: 1px; }
      #ds .h2 { height: 2px; }
      #ds .h3 { height: 3px; }
      #ds .h4 { height: 4px; }
      #ds .h5 { height: 5px; }
    </style>
 
    <script>
        var map;
        require([
          "esri/map", 
          "esri/layers/WebTiledLayer", 
          "dojo/parser",
          "dijit/layout/BorderContainer", 
          "dijit/layout/ContentPane", 
          "dojo/domReady!"
        ], function (
          Map, 
          WebTiledLayer, 
          parser,
          BorderContainer,
          ContentPane
        ) {
            parser.parse();

            map = new Map("map", {
                center: [-89.985, 29.822],
                zoom: 8
            });

            var cycleMap = new WebTiledLayer("http://${subDomain}.tile.opencyclemap.org/cycle/${level}/${col}/${row}.png", {
                "copyright": "Open Cycle Map",
                "id": "Open Cycle Map",
                "subDomains": ["a"]						// 指定子域,瓷砖,加快瓦片检索,如果指定了子域,urlTemplate应该包括一个$ {子域名}占位符
            });
           	// alert(cycleMap.url);
            map.addLayer(cycleMap);
        });
    </script>
  </head>
  <body class="nihilo">
    <div id="mainWindow" 
         data-dojo-type="dijit/layout/BorderContainer" 
         data-dojo-props="design:'headline',gutters:false"
         style="width: 100%; height: 100%; margin: 0;">
      	 <div id="header" 
           	data-dojo-type="dijit/layout/ContentPane"
           	data-dojo-props="region:'top'">
        	Open Cycle Map
        	<div id="subheader">Display <a href="http://www.opencyclemap.org/" target="_blank">Open Cycle Map</a> using the WebTiledLayer class</div>
      	</div>
      	<div id="map" class="shadow" 
           	data-dojo-type="dijit/layout/ContentPane"
           	data-dojo-props="region:'center'">

        	<!-- drop shadow divs -->
        	<div id="ds">
          		<div id="ds-h">
            		<div class="ds h1 o1"></div>
            		<div class="ds h2 o2"></div>
            		<div class="ds h3 o3"></div>
            		<div class="ds h4 o4"></div>
            		<div class="ds h5 o5"></div>
          		</div>
        	</div> <!-- end drop shadow divs -->            
      </div>
    </div>
  </body>
</html>

7、DynamicMapServiceLayer

• 动态地图图层是即时产生的图片，而不是在服务器上预先缓存的图片
• DynamicMapServiceLayer是动态地图图层的基类，该类不能实例化
• 属性、方法、事件继承于 Layer 类

8、ArcGISDynamicMapServiceLayer

• 动态图层

构造函数

new ArcGISDynamicMapServiceLayer(url, options?)

ArcGISDynamicMapServiceLayer 属性

• disableClientCaching：为真时,图片总是请求从服务器和浏览器的缓存将被忽略
• dynamicLayerInfos：用来改变层排序或重新定义映射
• fullExtent：全面定义的地图服务
• hasAttributionData：当为真时,层属性数据
• id：唯一标示
• imageFormat：输出图像类型
• imageTransparency：动态图像的背景是否透明
• infoTemplates：信息模板
• initialExtent：初始化范围
• layerDefinitions：设置层定义用于过滤地图服务的各个层的特性
• layerDrawingOptions：用于覆盖层的方式数组
• layerInfos：返回可用的服务层和默认的可见性等信息
• layerTimeOptions：返回当前层时间选项
• maxImageHeight：最大图像的高度，以像素为单位
• maxImageWidth：最大图像的宽度，以像素为单位
• maxRecordCount：记录的最大数量，可以从结果中进行查找操作
• maxScale：最大比例尺
• minScale：最小比例尺
• opacity：透明度
• refreshInterval：刷新间隔
• showAttribution：为真时，层的属性显示在地图上
• spatialReference：空间参考
• supportsDynamicLayers：为真时，服务支持动态图层
• units：图层的默认单位
• url：图层地址
• useMapImage：当真时，图像保存到服务器，使用MapImageLayer
• version：ArcGIS Server 的地图服务发布的版本
• visible：显示图层
• visibleAtMapScale：为真时，比例尺可见
• visibleLayers：可见的图层

ArcGISDynamicMapServiceLayer 方法

• createDynamicLayerInfosFromLayerInfos()：基于当前设置创建一个数组 LayerInfo DynamicLayerInfos
• exportMapImage(imageParameters?, callback?)：使用指定的参数值导出地图
• getImageUrl(extent, width, height, callback)：获取图片路径
• getMap()：返回的引用添加到地图控制层
• getNode()：返回图层的 DOM 节点
• hide()：隐藏图层
• isVisibleAtScale(scale)：图层在某一比例尺内是可见的
• refresh()：刷新
• setDefaultLayerDefinitions(doNotRefresh?)：重置所有层定义中定义的服务
• setDefaultVisibleLayers(doNotRefresh?)：设置默认可见的图层
• setDisableClientCaching(disable) ：设置禁用客户端缓存
• setDynamicLayerInfos(dynamicLayerInfos, doNotRefresh?)：设置动态图层信息
• setGDBVersion(gdbVersion, doNotRefresh?)：设置 ArcGISDynamicMapServiceLayer 的 GDB 版本
• setImageFormat(imageFormat, doNotRefresh?)：设置导出地图的图像格式
• setImageTransparency(transparent, doNotRefresh?)：设置地图图像的透明度
• setInfoTemplates(infoTemplates)：设置显示的信息模板
• setLayerDefinitions(layerDefinitions, doNotRefresh?)：设置图层定义，用于过滤地图服务的各个层的特性
• setLayerDrawingOptions(layerDrawingOptions, doNotRefresh?)：指定图层的绘制方式
• setLayerTimeOptions(options, doNotRefresh?)：设置图层的时间选项
• setMaxScale(scale)：设置最大比例尺
• setMinScale(scale)：设置最小比例尺
• setOpacity(opacity)：设置透明度
• setRefreshInterval(interval)：设置刷新间隔时间
• setScaleRange(minScale, maxScale)：设置比例尺范围
• setUseMapTime(update)：设置使用地图的当前时间
• setVisibility(isVisible)：设置层的可见性

ArcGISDynamicMapServiceLayer 事件

• 继承自 Layer

9、ArcGISImageServiceLayer

• 用来访问影像服务（非切片）

构造函数

new ArcGISImageServiceLayer(url, options?)

ArcGISImageServiceLayer 属性

• bandCount：队列数量
• bandIds：队列编号数组
• bands：队列数组
• className：类名称
• compressionQuality：当前压缩质量值
• copyrightText：版权字符串
• defaultMosaicRule：默认的马赛克规则
• description：描述定义的服务
• disableClientCaching：禁用客户端缓存
• format：图片类型
• fullExtent：地图全图范围
• mosaicRule：mosaic 规则
• pixelSizeX：X 方向的像素大小
• pixelSizeY：Y 方向的像素大小
• pixelType：图像的像素类型
• 其他属性同其他图层类

ArcGISImageServiceLayer 方法

• exportMapImage(imageServiceParameters?, callback?)：导出动态地图
• getDefinitionExpression()：返回当前定义的表达式
• getImageUrl(extent, width, height, callback)：获取图片路径
• getKeyProperties()：得到关键属性，包括名字等信息与图像
• getRasterAttributeTable()：异步返回栅格属性表
• getVisibleRasters()：得到可见的栅格影像
• queryVisibleRasters(query, options?, callback?, errback?)：查询可见栅格影像
• setCompressionQuality(quality, doNotRefresh?)：设置导出图像的压缩质量
• setDefinitionExpression(expression, doNotRefresh)：设置定义表达式
• setDisableClientCaching(disable)：禁用客户端缓存
• setInterpolation(interpolation, doNotRefresh?)：设置插值法
• setMosaicRule(mosaicRule, doNotRefresh?)：设置马赛克规则
• setOpacity(opacity)：设置透明度
• setRefreshInterval(interval)：设置刷新间隔
• setRenderingRule(renderingRule, doNotRefresh?)：设置渲染规则

ArcGISImageServiceLayer 事件

• 继承自 Layer

10、WMSLayer

• 网络地图服务（WMS）

构造函数

new WMSLayer(url, options?)

• 方法、属性、事件都与其他图层类相同

<!DOCTYPE html>
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
   	<!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>WMSlayer</title> 

  	<link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/init.js"></script>
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/esri/css/esri.css" />
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>  
    
    <script>
        var map;

        require([
        	"esri/map", 
        	"esri/layers/WMSLayer", 
        	"esri/config", 
        	"dojo/domReady!"
        ], function (
        	Map, 
        	WMSLayer, 
        	esriConfig
        ) {
        
              esriConfig.defaults.io.proxyUrl = "/proxy/";

              map = new Map("map", {
                  basemap: "streets",
                  center: [-98, 37],
                  zoom: 5
              });

              var wmsLayer = new WMSLayer("http://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer", {
                  format: "png",
                  visibleLayers: [2]
              });

              map.addLayer(wmsLayer);
          });
    </script> 
  </head> 
  
  <body> 
      <div id="map"></div>
  </body> 
</html>

11、ImageParameters

• 图像参数选项

构造函数

new ImageParameters()

ImageParameters 常量

• LAYER_OPTION_EXCLUDE：默认显示所有图层，指定ID的图层除外
• LAYER_OPTION_HIDE：隐藏指定ID的图层
• LAYER_OPTION_INCLUDE：显示指定ID的图层，除了默认可见层
• LAYER_OPTION_SHOW：只显示指定ID的层

ImageParameters 属性

• bbox：导出的地图边框
• dpi：每英寸像素值
• format：地图图片格式
• height：图像的像素高度
• imageSpatialReference：空间参考
• layerDefinitions：一系列层定义表达式，允许通过过滤特性导出地图图像的各个层
• layerIds：层ID的列表
• layerOption：选择显示或隐藏的层
• layerTimeOptions：图层的时间选项
• timeExtent：地图图像的时间范围
• transparent：动态图像的背景是否透明
• width：图像的像素宽度

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>ArcGISDynamicMapServiceLayer</title>

    <link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/init.js"></script>
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/esri/css/esri.css" />

    <script>
        var map;

        require([
          	"esri/map",
          	"esri/layers/ArcGISDynamicMapServiceLayer",
          	"esri/layers/ImageParameters",
          	"dojo/dom",
          	"dojo/on",
          	"dojo/query",
          	"dojo/domReady!"
        ], function (
        	Map, 
        	ArcGISDynamicMapServiceLayer, 
        	ImageParameters, 
        	dom, 
        	on, 
        	query
        ) {
              var layer, visibleLayerIds = [];

              map = new Map("map");
           
              var imageParameters = new ImageParameters();
              imageParameters.layerIds = [2];
              imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW; //只显示指定的层ID              

              layer = new ArcGISDynamicMapServiceLayer(
              "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer",
                { "imageParameters": imageParameters });
              map.addLayer(layer);

              on(dom.byId("layer0CheckBox"), "change", updateLayerVisibility);
              on(dom.byId("layer1CheckBox"), "change", updateLayerVisibility);

              function updateLayerVisibility() {
                  var inputs = query(".list_item");						// 筛选符合条件的控件
                  var inputCount = inputs.length;
                  visibleLayerIds = [2];

                  for (var i = 0; i < inputCount; i++) {
                      if (inputs[i].checked) {
                          visibleLayerIds.push(inputs[i].value);		//指定显示图层的索引
                      }
                  }

                  if (visibleLayerIds.length === 0) {
                      visibleLayerIds.push(-1);
                  }

                  layer.setVisibleLayers(visibleLayerIds);
              }
          });
    </script>
  </head>

  <body>
  	This sample loads an ArcGISDynamicMapServiceLayer and presents check boxes for only the layers that should be toggled on and off by users.  <br />
    <br>
        Layer List : 
        <span id="layer_list">
        	<input type='checkbox' class='list_item' id='layer0CheckBox' value=0 />Cities  
          	<input type='checkbox' class='list_item' id='layer1CheckBox' value=1 />Rivers  
        </span>
    <br>
    <br>
    <div id="map" class="claro" style="width:600px; height:400px; border:1px solid #000;"></div>
  </body>

</html>

12、ImageServiceParameters

• 代表了影像服务调用参数选项

构造函数

new ImageServiceParameters()

ImageServiceParameters 常量

• INTERPOLATION_BILINEAR：通过双线性插值对像素重新取样
• INTERPOLATION_CUBICCONVOLUTION：通过立方体卷积对像素重新取样
• INTERPOLATION_MAJORITY：多数重新取样
• INTERPOLATION_NEARESTNEIGHBOR：通过最近邻像素重新取样

ImageServiceParameters 属性

• bandIds：当前波段ID列表
• compressionQuality：当前图像压缩质量值
• extent：输出图像范围
• format：地图图像格式
• height：图像的像素高度
• interpolation：当前的插值法
• mosaicRule：马赛克规则
• noData：无数据
• renderingRule：渲染规则
• timeExtent：时间范围
• width：图像的像素宽度

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>ArcGISImageServiceLayer</title>
  	<link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/init.js"></script>
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/esri/css/esri.css" />

    <style>
      html, body, #map { 
      	height: 100%; 
      	width: 100%; 
      	margin: 0; 
      	padding: 0; 
      }
    </style>

    <script>
        var map;
        require([
          "esri/map", 
          "esri/layers/ArcGISImageServiceLayer",
          "esri/layers/ImageServiceParameters", 
          "dojo/parser", 
          "dojo/domReady!"
        ], function (
          Map, 
          ArcGISImageServiceLayer,
          ImageServiceParameters, 
          parser
        ) {
            parser.parse();

            map = new Map("map", {
                basemap: "topo",
                center: [-79.40, 43.64],
                zoom: 12
            });

            var params = new ImageServiceParameters();
            params.noData = 0; 								// 代表的任何信息
            var imageServiceLayer = new ArcGISImageServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Toronto/ImageServer", {
                imageServiceParameters: params,
                opacity: 0.75
            });
            map.addLayer(imageServiceLayer);
        });
    </script>
  </head>
  
  <body>
    <div id="map"> </div>
  </body>

</html>

13、GraphicsLayer

• 一个层包含一个或多个图形功能。每个地图都包含一个 GraphicsLayer，默认情况下使用Map.graphics属性访问。可以创建自己的图形层，并将它们添加到地图上

构造函数

new GraphicsLayer()
new GraphicsLayer(options?)

• GraphicsLayer 属性、事件、方法同前面的各个图层类

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>GraphicsLayer</title>

   	<link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/init.js"></script>
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/esri/css/esri.css" />
    <script>
        var map;

        require([
          "esri/map",
          "esri/graphic",
          "esri/InfoTemplate",
          "esri/SpatialReference",
          "esri/geometry/Extent",
          "esri/layers/GraphicsLayer",
          "esri/symbols/SimpleFillSymbol",
          "esri/symbols/SimpleLineSymbol",
          "esri/tasks/query",
          "esri/tasks/QueryTask",
          "esri/Color",
          "dojo/domReady!"
        ],
          function (
            Map, 
            Graphic, 
            InfoTemplate, 
            SpatialReference, 
            Extent, 
            GraphicsLayer,
            SimpleFillSymbol, 
            SimpleLineSymbol, 
            Query, 
            QueryTask, 
            Color
          ) {

              map = new Map("mapDiv", {
                  basemap: "streets",
                  center: [-80.94, 33.646],
                  zoom: 8
              });

              map.on("load", setUpQuery);

              function setUpQuery() {
                  var queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");

                  // 设定查询条件
                  var query = new Query();
                  query.returnGeometry = true;
                  query.outFields = ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"];
                  query.outSpatialReference = { "wkid": 102100 };
                  query.where = "STATE_NAME = 'South Carolina'";
                  // 信息模板
                  var infoTemplate = new InfoTemplate();
                  var content = "<b>2000 Population: </b>${POP2000}<br/>" +
                                "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI}<br/>" +
                                "<b>2007 Population: </b>${POP2007}<br/>" +
                                "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI}";
                  infoTemplate.setTitle("${NAME}");
                  infoTemplate.setContent(content);

                  map.infoWindow.resize(245, 125);

                  // 查询完成执行事件
                  queryTask.on("complete", function (event) {
                      map.graphics.clear();
                      var highlightSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                          new Color([255, 0, 0]), 3), new Color([125, 125, 125, 0.35]));

                      var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                          new Color([255, 255, 255, 0.35]), 1), new Color([125, 125, 125, 0.35]));

                      var features = event.featureSet.features;
                      var countiesGraphicsLayer = new GraphicsLayer();
                      // 遍历查询的内容，添加到GraphicsLayer
                      var featureCount = features.length;
                      for (var i = 0; i < featureCount; i++) {
                          // Get the current feature from the featureSet.
                          var graphic = features[i]; 					// Feature is a graphic
                          graphic.setSymbol(symbol);
                          graphic.setInfoTemplate(infoTemplate);

                          countiesGraphicsLayer.add(graphic);
                      }
                      map.addLayer(countiesGraphicsLayer);				// 添加到地图中
                      map.graphics.enableMouseEvents();					// 鼠标事件可用
                      // 鼠标在GraphicsLayer移动产生事件
                      countiesGraphicsLayer.on("mouse-over", function (event) {
                          map.graphics.clear();  						// use the maps graphics layer as the highlight layer
                          var graphic = event.graphic;
                          map.infoWindow.setContent(graphic.getContent());
                          map.infoWindow.setTitle(graphic.getTitle());
                          var highlightGraphic = new Graphic(graphic.geometry, highlightSymbol);
                          map.graphics.add(highlightGraphic);
                          map.infoWindow.show(event.screenPoint,
                            map.getInfoWindowAnchor(event.screenPoint));
                      });

                      // 鼠标离开产生的事件
                      map.graphics.on("mouse-out", function () {
                          map.graphics.clear();
                          map.infoWindow.hide();
                      });
                  });

                  queryTask.execute(query);
              }
          });
    </script>
  </head>

  <body class="claro">
    Hover over a county in South Carolina to get more information.
    <div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
  </body>
</html>

14、FeatureLayer

• 要素图层，继承关系如下：

esri/layers/Layer 
	|_esri/layers/GraphicsLayer          	
		|_esri/layers/FeatureLayer

FeatureLayer 构造函数

new FeatureLayer(url, options?)
new FeatureLayer(featureCollectionObject, options?)

• featureCollectionObject：要素集合对象

FeatureLayer 属性

• advancedQueryCapabilities：是否支持使用统计查询
• allowGeometryUpdates：允许地理位置更新
• attributionDataUrl：属性数据存储的 URL 地址
• capabilities：要素层的信息
• className：类名
• copyright：版权信息
• credential：认证信息
• dataAttributes：数据属性
• defaultDefinitionExpression：默认定义表达式
• defaultVisibility：默认的图层的可见性
• displayField：层的主显示字段的名称
• editFieldsInfo：编辑字段的字段名
• fields：字段的数组
• fullExtent：要素层全图范围
• geometryType：几何类型
• graphics：绘制要素层数组
• hasAttachments：存在附件
• hasAttributionData：存在层属性数据
• htmlPopupType：HTML 定义弹出气泡类型
• id：唯一标示
• infoTemplate：信息模板
• labelingInfo：标签信息
• layerId：要素层的ID
• loadError：要素层未能加载报错
• loaded：要素层已加载
• maxRecordCount：最大记录数量
• maxScale：最大比例尺
• minScale：最小比例尺
• multipatchOption：支持要素服务的数据源选项
• name：要素层名称
• objectIdField：对象ID字段
• opacity：透明度
• refreshInterval：刷新间隔
• relationships：要素层关系
• renderer：渲染器
• showAttribution：显示属性
• showLabels：显示标签
• source：数据源
• styling：样式
• supportsAdvancedQueries：支持orderByFields查询操作
• supportsAttachmentsByUploadId：支持上传附件
• supportsCalculate：更新时，支持计算操作
• supportsStatistics：支持查询操作的要素统计
• surfaceType：类型的矢量图形，用来绘制图形
• suspended：暂停
• templates：模板

FeatureLayer 方法

• add(graphic)：添加一个图形
• addAttachment(objectId, formNode, callback?, errback?)：添加一个附件
• applyEdits(adds?, updates?, deletes?, callback?, errback?)：编辑应用到要素层
• attr(name, value)：添加一个新的属性
• clear()：清除所有图形
• clearSelection()：清除所选图形
• deleteAttachments(objectId, attachmentIds, callback?, errback?)：删除一个或多个附件
• disableMouseEvents()：禁用图形层上的所有鼠标事件
• enableMouseEvents()：允许图形层上的所有鼠标事件
• getAttributionData()：获取自定义属性数据
• getDefinitionExpression()：获取当前定义的表达式
• getDomain(fieldName, options?)：获取与给定的字段相关联的域的名称
• getEditCapabilities(options?)：获取编辑功能
• getEditInfo(feature, options?)：获取编辑信息
• getEditSummary(feature, options?)：获取编辑的概要信息
• getField(fieldName)：获取指定字段名的字段
• getMap()：获取地图
• getMaxAllowableOffset()：获取最大允许偏移
• getNode()：获取 DOM 节点
• getOrderByFields()：获取字段排序顺序
• getSelectedFeatures()：获取当前选择的要素
• getSelectionSymbol()：获取当前选择的符号
• getTimeDefinition()：获得当前的时间定义
• getType(feature)：获取要素类型
• hide()：隐藏某一要素层
• isEditable()：要素层是否可编辑
• isVisibleAtScale(scale)：在某一比例尺是否可见
• queryAttachmentInfos(objectId, callback?, errback?)：查询指定附件相关信息
• queryCount(query, callback?, errback?)：查询数量
• queryExtent(query, callback?, errback?)：查询范围
• queryFeatures(query, callback?, errback?)：查询特定要素
• queryIds(query, callback?, errback?)：查询对象ID
• queryRelatedFeatures(relQuery, callback?, errback?)：查询相关要素
• redraw()：重绘图形层中的所有图形
• refresh()：刷新
• remove(graphic)：移除图形
• selectFeatures(query, selectionMethod?, callback?, errback?)：选择查询
• setAutoGeneralize(enable)：启用或禁用自动生成
• setDefinitionExpression(expression)：设置定义表达式
• setEditable(editable)：设置要素层是否可编辑
• setInfoTemplate(infoTemplate)：为一层指定或更改信息模板
• setLabelingInfo(labelingInfo)：设置标签信息
• setMaxAllowableOffset(offset)：设置最大允许偏移
• setMaxScale(scale)：设置层的最大比例尺
• setMinScale(scale)：设置层的最小比例尺
• setSelectionSymbol(symbol)：设置选择的符号
• setShowLabels(showLabels)：设置是否显示标签

FeatureLayer 事件

• add-attachment-complete：添加附件完成时产生的事件
• before-apply-edits：编辑前触发的事件
• click：单击事件
• dbl-click：双击事件
• delete-attachments-complete：删除附件完成后产生的事件
• edits-complete：编辑完成后产生的事件
• error：出现错误产生的事件
• graphic-add：添加图形到GraphicsLayer产生的事件
• graphic-draw：画图形到GraphicsLayer产生的事件
• graphic-node-add：图形的DOM节点添加到要素层产生的事件
• graphic-node-remove：图形的DOM节点移除产生的事件
• graphic-remove：图形移除产生的事件
• load：要素层加载产生的事件
• mouse-down：鼠标按下事件
• mouse-drag：鼠标拖动事件
• mouse-move：鼠标移动事件
• mouse-out：鼠标离开事件
• mouse-over：鼠标结束事件
• mouse-up：鼠标抬起事件
• opacity-change：透明度改变事件
• query-attachment-infos-complete：查询附件信息完成产生的事件
• query-count-complete：查询数量统计完成事件
• query-extent-complete：查询范围完成事件
• query-features-complete：查询要素完成事件
• query-ids-complete：查询id完成事件
• query-related-features-complete：查询相关要素完成产生的事件
• refresh-interval-change：刷新间隔改变事件
• resume：图层复原产生事件
• scale-range-change：比例尺范围变化产生事件
• scale-visibility-chang：比例尺可见性变化产生事件
• selection-clear：选择清除产生事件
• selection-complete：选择完成产生事件
• show-labels-change：显示标签变化产生事件
• suspend：图层加载延缓时产生的事件
• update：图层更新时产生的事件
• update-end：图层更新结束后产生的事件
• update-start：图层更新开始的事件
• visibility-change：图层可见性改变时产生的事件

15、FeatureEditResult

• 要素的添加、更新或删除等编辑功能的结果

16、FeatureTemplate

• 要素模板定义所需的信息来创建一个新的要素

17、FeatureType

• 要素类型

18、LabelLayer

• 将文本和符号显示在地图上

构造函数

new LabelLayer(params?)

• LabelLayer属性、方法、事件大部分与 Layer 相同

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>FeatureLayer</title>

   	<link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/init.js"></script>
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/esri/css/esri.css" />
    
    <script>var dojoConfig = { parseOnLoad: true };</script>

    <script>
        dojo.require("esri.map");
        dojo.require("esri.tasks.query");
        dojo.require("esri.layers.FeatureLayer");

        var map;
        var stateName = "Florida";
        var attributeField = "POP1990";

        function init() {
            map = new esri.Map("map", {
                basemap: "streets",
                center: [-83.101, 27.753],
                zoom: 7,
                slider: false
            });
            dojo.connect(map, "onLoad", initOperationalLayer);
        }

        function initOperationalLayer() {
            // 创建FeatureLayer对象
            var featureLayer = new esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0", {
                mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
                outFields: ["*"]
            });
            // 筛选表达式
            featureLayer.setDefinitionExpression("STATE_NAME = '" + stateName + "'");
            // 查询
            var query = new esri.tasks.Query();
            query.where = "STATE_NAME = '" + stateName + "'";
            featureLayer.queryFeatures(query, function (featureSet) {
                var features = featureSet.features;
                var min, max;
                min = max = parseFloat(features[0].attributes[attributeField]);//返回属性值，转换为float类型

                dojo.forEach(features, function (feature) {
                    min = Math.min(min, feature.attributes[attributeField]);//遍历所有属性值
                    max = Math.max(max, feature.attributes[attributeField]);
                });

                // 设置范围
                var numRanges = 7;
                var breaks = (max - min) / numRanges;

				// 设置外围画线宽度
                var outline = new esri.symbol.SimpleLineSymbol().setWidth(1);
                // 设置填充颜色
                var fillColor = new dojo.Color([240, 150, 240, 0.75]);
                // 创建画圆符号
                var defaultSymbol = new esri.symbol.SimpleMarkerSymbol().setSize(1).setOutline(outline);
				// 创建适配器
                var renderer = new esri.renderer.ClassBreaksRenderer(defaultSymbol, attributeField);	

                // 根据值大小设定范围
                for (var i = 0; i < numRanges; i++) {
                    renderer.addBreak(parseFloat(min + (i * breaks)), parseFloat(min + ((i + 1) * breaks)), new esri.symbol.SimpleMarkerSymbol().setSize((i + 1) * 6).setColor(fillColor).setOutline(outline));
                }
                featureLayer.setRenderer(renderer);
            });
            map.addLayer(featureLayer);
        }
        dojo.ready(init);
    </script>
  </head>
  
  <body>
    <div id="map" class="claro" style="width:800px; height:600px; border:1px solid #000;"></div>
  </body>

</html>

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    
   	<link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/init.js"></script>
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/esri/css/esri.css" />
    <style>
      html, body, #map {
        height: 100%; 
        width: 100%; 
        margin: 0; 
        padding: 0; 
      }
    </style>

    <script>
        var map;

        require([
          "esri/map",
          "esri/geometry/Extent",
          "esri/layers/FeatureLayer",
          "esri/symbols/SimpleLineSymbol",
          "esri/symbols/SimpleFillSymbol",
          "esri/symbols/TextSymbol",
          "esri/renderers/SimpleRenderer",
          "esri/layers/LabelLayer",
          "esri/Color",
          "dojo/domReady!"
        ], function (
          Map, 
          Extent, 
          FeatureLayer,
          SimpleLineSymbol, 
          SimpleFillSymbol, 
          TextSymbol, 
          SimpleRenderer,
          LabelLayer,
          Color
        ) {
        
            var bbox = new Extent({ 
	            "xmin": -1940058, 
	            "ymin": -814715, 
	            "xmax": 1683105, 
	            "ymax": 1446096, 
	            "spatialReference": { "wkid": 102003 } 
           	});
            map = new Map("map", {
                extent: bbox
            });

            var labelField = "STATE_NAME";
  
            var statesColor = new Color("#666");
            var statesLine = new SimpleLineSymbol("solid", statesColor, 1.5);
            var statesSymbol = new SimpleFillSymbol("solid", statesLine, null);
            var statesRenderer = new SimpleRenderer(statesSymbol);
            // create a feature layer to show country boundaries
            var statesUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3";
            var states = new FeatureLayer(statesUrl, {
                id: "states",
                outFields: [labelField]
            });
            states.setRenderer(statesRenderer);
            map.addLayer(states);

            // create a text symbol to define the style of labels
            var statesLabel = new TextSymbol().setColor(statesColor);
            statesLabel.font.setSize("14pt");
            statesLabel.font.setFamily("arial");
            var statesLabelRenderer = new SimpleRenderer(statesLabel);
            // 创建 LabelLayer
            var labels = new LabelLayer({ id: "labels" });
            // 添加 FeatureLayer，样式适配器，字段
            labels.addFeatureLayer(states, statesLabelRenderer, "${STATE_NAME}");
            // add the label layer to the map
            map.addLayer(labels);
        });
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

19、MapImageLayer

构造函数

new MapImageLayer(options?)

MapImageLayer 属性

• maxScale：最大比例尺
• minScale：最小比例尺
• opacity：透明度
• refreshInterval：刷新间隔
• showAttribution：显示属性
• url：服务路径
• visible：图层可见性
• visibleAtMapScale：图层在某一比例尺下可见

MapImageLayer 方法

• addImage(mapImage)：添加一个参数对象
• attr(name, value)：添加属性
• getAttributionData()：获取属性数据
• getImages()：得到一个MapImage对象数组定义MapImageLayer图像
• getMap()：返回Map对象
• getNode()：获取节点
• hide()：隐藏图层
• isVisibleAtScale(scale)：图层在某一比例尺下是否可见
• removeAllImages()：移除所有 MapImage
• removeImage(mapImage)：移除指定 MapImage
• resume()：图层复原
• setMaxScale(scale)：设置最大比例尺
• setMinScale(scale)：设置最小比例尺
• setOpacity(opacity)：设置透明度
• setRefreshInterval(interval)：设置刷新间隔
• setScaleRange(minScale, maxScale)：设置比例尺范围
• setVisibility(isVisible)：设置图层可见性
• show()：显示图层

MapImageLayer 事件

• error：错误产生事件
• load：加载事件
• opacity-change：透明度改变事件
• refresh-interval-change：刷新间隔事件
• scale-range-change：比例尺范围变化事件
• scale-visibility-change：比例尺可见性变化事件
• update：更新事件
• update-end：更新结束事件
• update-start：更新开始事件
• visibility-change：可见性改变事件

20、MapImage

• 带地理参考的图像参数类

构造函数

new MapImage(options)

MapImage 属性

• extent：范围
• height：高度
• href：返回图像的url
• scale：比例尺
• width：宽度

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
 	<link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/init.js"></script>
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/esri/css/esri.css" />
    <script type="text/javascript">
        var map;

        require([
	        "esri/map",
	        "esri/layers/ArcGISTiledMapServiceLayer",
	        "esri/layers/MapImageLayer",
	        "esri/layers/MapImage",
	
	        "dojo/dom",
	        "dojo/on",
	        "dojo/domReady!"
        ], function (
	        Map, 
	        ArcGISTiledMapServiceLayer, 
	        MapImageLayer, 
	        MapImage, 
	        dom, 
	        on
        ) {
            var agoServiceURL = "http://server.arcgisonline.com/arcgis/rest/services/ESRI_StreetMap_World_2D/MapServer";
            var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL);
            map = new Map("map", {
                center: [-122.488609, 48.189605],
                zoom: 6
            });
            map.addLayer(agoLayer);

            setupDropZone();

            function setupDropZone() {
                var node = dom.byId("map");
                // 拖动开始
                on(node, "dragenter", function (evt) {
                    evt.preventDefault();
                });
				// 拖动结束
                on(node, "dragover", function (evt) {
                    evt.preventDefault();
                });
				// 放下事件
                on(node, "drop", handleDrop);
            }

            function handleDrop(evt) {
            	// 取消原来事件，重新写
                evt.preventDefault();
                // 数据转换为文件
                var files = evt.dataTransfer.files;
                if (files.length != 2) {
                    return;
                }

                var tfwFile;
                // 判断是否为.tfw文件
                if (files[0].name.indexOf(".tfw") !== -1) {
                    pngFile = files[1];
                    tfwFile = files[0];
                }
                else {
                    pngFile = files[0];
                    tfwFile = files[1];
                }
				// 读取数据
                readDataFromFile(pngFile, tfwFile);
            }

            function readDataFromFile(pngFile, tfwFile) {
                // 读文件对象
                var reader = new FileReader();
                // 获取文件名称
                var layerName = pngFile.name.split('.')[0];
                reader.onload = function () {
                    // 读取TFW文件中的参数
                    var newLineIdx = reader.result.indexOf("n");
                    var lines = reader.result.split("rn");
					// 创建对象路径
                    var objectURL = URL.createObjectURL(pngFile);

                    var img = new Image();
                    img.onload = function () {
                        // 设置范围
                        var xminValue = parseFloat(lines[4]);
                        var xmaxValue = xminValue + lines[0] * img.width;
                        var ymaxValue = parseFloat(lines[5]);
                        var yminValue = ymaxValue + lines[3] * img.height;
                        // 创建MapImageLayer
                        var lyr = new MapImageLayer({ id: layerName, visible: true });
                        var hrefValue = objectURL;
                        var image = new MapImage({
                            extent: {
                                xmin: xminValue, ymin: yminValue,
                                xmax: xmaxValue, ymax: ymaxValue,
                                spatialReference: { wkid: 4326 }
                            },
                            // 绑定文件
                            href: hrefValue
                        });
                        // image对象添加到MapImageLayer图层
                        lyr.addImage(image);

                        map.addLayer(lyr);
                        // 获取范围
                        var fullExtent = image.extent;
                        // 设置地图范围
                        map.setExtent(fullExtent, true);
						// 撤销路径
                        URL.revokeObjectURL(objectURL);
                    };
                    img.src = objectURL;
                };
                // 读取文件
                reader.readAsText(tfwFile);
            }
        });
    </script>
</head>
<body class="tundra">
    <div id="map" style="position:relative;width:99%; height:100%;border:1px solid #000;"></div>
</body>
</html>

21、KMLLayer

• KMLLayer 类用于创建基于KML文件，如果系统中使用KML文件，可以使用KMLLayer类来实现

构造函数

new KMLLayer(id, url, options?)

KMLLayer 属性

• featureInfos：要素数组，包括要素id及其类型
• folders：KMLFolder 要素数组描述 KML 文件中定义的文件夹
• hasAttributionData：图层属性数据
• id：编号
• linkInfo：链接信息对象信息
• maxScale：最大比例尺
• minScale：最小比例尺
• opacity：透明度
• refreshInterval：刷新间隔
• showAttribution：显示属性
• url：路径

KMLayer 方法

• setFolderVisibility(folder, isVisible)：为指定的文件夹设置可见性
• 其他方法继承于 Layer

KMLLayer 事件

• 事件都继承于Layer

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
        html, body, #map {
            padding:0;
            margin:0;
            height:100%;
            width:100%;
        }
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script type="text/javascript">
        var map;

        require([
	        "esri/map",
	        "esri/layers/ArcGISTiledMapServiceLayer",
	        "esri/layers/KMLLayer",
	        "dojo/domReady!"
        ], function (
	        Map, 
	        ArcGISTiledMapServiceLayer, 
	        KMLLayer
        ) {
            var agoServiceURL = "http://server.arcgisonline.com/arcgis/rest/services/ESRI_StreetMap_World_2D/MapServer";
            var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL);
            map = new Map("map", {
                center: [-122.393, 40.593],
                zoom: 12
            });
            map.addLayer(agoLayer);

           var kmlUrl = "https://dl.dropboxusercontent.com/u/2654618/kml/Wyoming.kml";
            var kml = new KMLLayer(kmlUrl);
            map.addLayer(kml);
        });
    </script>
</head>
<body class="tundra">
    <div id="map">
    </div>
</body>
</html>

最后

以上就是激昂宝贝为你收集整理的地理信息系统（GIS）系列——ArcGIS中的各种图层的全部内容，希望文章能够帮你解决地理信息系统（GIS）系列——ArcGIS中的各种图层所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。