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

╰半夏微凉° 2023-01-10 11:56 443阅读 0赞

### 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 事件 ######

<!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>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">
        
        <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'">
    
            	
            	<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>             
          </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?)

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

### 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：图像的像素宽度

### 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：图像的像素宽度

### 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">
        
        <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">
        <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>