arcgis各类图层的属性和方法

最新推荐文章于 2025-06-08 16:40:06 发布

原创最新推荐文章于 2025-06-08 16:40:06 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#arcgis #gis #layer

地理信息系统-arcgis 专栏收录该内容

4 篇文章

订阅专栏

本文深入介绍了ArcGIS JavaScript API中的Map类和各种图层类型，如MapServiceLayer、TiledMapServiceLayer、DynamicMapServiceLayer、GraphicsLayer、KMLLayer等。详细阐述了它们的构造函数、属性、方法和事件，以及如何进行地图操作、图层管理和数据交互。此外，还展示了如何使用ImageServiceParameters和MapImageLayer创建带有地理参考的图像图层。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 方法

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?)

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("\r\n");
					// 创建对象路径
                    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>