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

1、Map 类

构造函数
new Map(divId, options?)
Map 属性
  • attribution:属性
  • autoResize:自动调整大小
  • basemapLayerIds:地图当前的底图数组
  • extent:地图范围
  • fadeOnZoom:淡入效果的缩放
  • geographicExtent:地图(或边界框)的地理范围
  • graphics:提供对地图的 GraphicsLayer 的访问
  • graphicsLayerIds:当前 GraphicsLayers 地图的数组
  • height:高度
  • id:编号
  • infoWindow:信息窗
  • isClickRecenter:是否单击重定位
  • isDoubleClickZoom:是否双击缩放
  • isKeyboardNavigation:是否按键导航
  • isPan:是否地图平移
  • isPanArrows:是否箭头显示地图上平移
  • isScrollWheelZoom:是否滑轮旋转缩放
  • isShiftDoubleClickZoom:是否按下shift键并双击缩放
  • isZoomSlider:是否滑轮器缩放
  • layerIds:图层数组
  • loaded:图层加载后
  • navigationMode:导航模式
  • position:位置
  • root:包含容器的DOM节点的层,内置信息窗口、图标和滑块
  • showAttribution:是否显示属性
  • snappingManager:闪光的管理
  • spatialReference:空间参考
  • timeExtent:时间范围
  • visible:地图显示
  • width:宽度
Map 方法
  • addLayer(layer, index?):添加图层
  • addLayers(layers):添加图层数组
  • attr(name, value):设置属性
  • centerAndZoom(mapPoint, levelOrFactor):中心点缩放
  • centerAt(mapPoint):设为中心点
  • destroy():销毁地图
  • disableClickRecenter():禁止单击重定位
  • disableDoubleClickZoom():禁止双击缩放
  • disableKeyboardNavigation():禁止按键导航
  • disableMapNavigation():禁止地图导航
  • disablePan():禁止平移
  • disableScrollWheelZoom():禁止滑轮缩放
  • disableShiftDoubleClickZoom():禁止按下shift键并双击缩放
  • disableSnapping():禁止闪光
  • enableClickRecenter():允许单击重定位
  • enableDoubleClickZoom():允许双击缩放
  • enableKeyboardNavigation():允许按键导航
  • enableMapNavigation():允许地图导航
  • enablePan():允许平移地图
  • enableScrollWheelZoom():允许滑轮缩放
  • enableShiftDoubleClickZoom():允许按下shift键并双击缩放
  • enableSnapping(snapOptions?):允许发光
  • getBasemap():获取底图
  • getInfoWindowAnchor(screenCoords):获取信息窗口锚点
  • getLayer(id):根据图层id获取图层
  • getLayersVisibleAtScale():获取图层显示的比例
  • getLevel():获取图层级别
  • getMaxScale():获取最大比例
  • getMaxZoom():获取最大缩放级别
  • getMinScale():获取最小比例
  • getMinZoom():获取最小缩放级别
  • getScale():获取比例
  • getZoom():获取缩放级别
  • hidePanArrows():隐藏平移箭头
  • hideZoomSlider():隐藏缩放滑轮
  • panDown():平移按下
  • panLeft():平移向左
  • panLowerLeft():向左下方平移
  • panLowerRight():向右下方平移
  • panRight():向右平移
  • panUp():平移抬起
  • panUpperLeft():向左上方平移
  • panUpperRight():向右上方平移
  • removeAllLayers():移除所有图层
  • removeLayer(layer):移除某个图层
  • reorderLayer(layer, index):对图层重排序
  • reposition():图层复位
  • resize(immediate?):调整大小
  • setBasemap(basemap):设置底图
  • setExtent(extent, fit?):设置范围
  • setInfoWindowOnClick(enabled):设置信息窗单击
  • setLevel(level):设置级别
  • setMapCursor(cursor):设置地图光标
  • setScale(scale):设置比例
  • setTimeExtent(timeExtent):设置时间范围
  • setTimeSlider(timeSlider):设置时间滑块
  • setVisibility(visible):设置是否显示
  • setZoom(zoom):设置缩放
  • showPanArrows():显示移动箭头
  • showZoomSlider():显示缩放滑轮
  • toMap(screenPoint):转换为地图坐标
  • toScreen(mapPoint):转换为屏幕坐标
Map 事件
  • basemap-change:底图改变
  • before-unload:卸载前
  • click:单击事件
  • dbl-click:双击事件
  • extent-change:地图范围发生改变
  • key-down:按键按下
  • key-up:按键抬起
  • layer-add:图层添加
  • layer-add-result:图层添加结束
  • layer-remove:图层移除
  • layer-reorder:图层重排序
  • layer-resume:图层复位
  • layer-suspend:图层暂停
  • layers-add-result:图层添加返回
  • layers-removed:图层移除后
  • layers-reordered:图层重排序后
  • load:加载
  • mouse-down:鼠标按下
  • mouse-drag:鼠标拖拽
  • mouse-drag-end:鼠标拖拽结束
  • mouse-drag-start:鼠标拖拽开始
  • mouse-move:鼠标移动
  • mouse-out:鼠标离开
  • mouse-over: 鼠标结束
  • mouse-up:鼠标抬起
  • mouse-wheel:鼠标滚轮
  • pan:平移
  • pan-end:平移结束
  • pan-start:平移开始
  • reposition:复位
  • resize:调整大小
  • time-extent-change:时间范围发生改变
  • unload:卸载
  • update-end:更新结束
  • update-start:更新开始
  • zoom:缩放
  • zoom-end:缩放结束
  • zoom-start:缩放开始

2、图层分类

Layer 类

  • 图层基类,所有图层类都继承此类,没有构造函数
Layer 属性
  • attributionDataUrl:图层的属性存储路径
  • className:类属性层的节点名称
  • hasAttributionData:真值时,图层属性数据
  • id:唯一标示
  • loadError:加载错误信息类
  • loaded:加载后属性
  • maxScale:最大比例尺
  • minScale:最小比例尺
  • opacity:透明度
  • refreshInterval:刷新间隔
  • showAttribution:显示属性
  • suspended:暂停、延缓
  • titleInfo:标题信息
  • url:路径
  • visible:显示
  • visibleAtMapScale:显示比例尺
Layer 方法
  • attr(name, value):设置属性
  • getAttributionData():获取属性数据
  • getMap():获取地图
  • getNode():获取图层节点
  • hide():隐藏
  • isVisibleAtScale(scale):显示比例尺
  • resume():图层复原
  • setMaxScale(scale):设置最大比例尺
  • setMinScale(scale):设置最小比例尺
  • setOpacity(opacity):设置透明度
  • setRefreshInterval(interval);设置刷新间隔
  • setScaleRange(minScale, maxScale):设置比例尺范围
  • setVisibility(isVisible):设置是否显示
  • show():设置显示为True
  • suspend():暂停、延缓
Layer 事件
  • error:错误事件
  • load:加载事件
  • opacity-change:透明度改变事件
  • refresh-interval-change:刷新间隔发生变化
  • resume:复原事件
  • scale-range-change:标尺范围改变事件
  • scale-visibility-change:标尺显示改变事件
  • suspend:延缓推迟事件
  • update:更新事件
  • update-end:更新结束事件
  • update-start:更新开始事件
  • visibility-change:显示改变事件

图层分类

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

3、ArcGISTiledMapServiceLayer

  • 静态切片图层类
构造函数
new ArcGISTiledMapServiceLayer(url, options?)
ArcGISTiledMapServiceLayer 属性
  • attributionDataUrl:图层的属性数据存储路径
  • capabilities:地图服务的功能,可选值是地图,查询或数据
  • className:类属性层的节点名称
  • copyright:版权字符串定义的地图服务
  • description:地图描述定义的地图服务
  • fullExtent:地图全范围
  • hasAttributionData:是否有属性数据
  • id:唯一标示
  • infoTemplates:信息模板
  • initialExtent:初始化范围
  • layerInfos:图层信息数组
  • loadError:加载错误信息属性
  • loaded:加载后属性
  • maxImageHeight:最大图片高度
  • maxImageWidth:最大图片宽度
  • maxRecordCount:最大记录数量
  • maxScale:最大比例
  • minScale:最小比例
  • opacity:透明度
  • refreshInterval:刷新间隔
  • showAttribution:是否显示属性
  • spatialReference:空间参考
  • suspended:暂停、延缓
  • titleInfo:标题信息
  • timeInfo:时间信息
  • units:单位数组
  • url:服务路径
  • version:版本
  • visible:是否显示
  • visibleAtMapScale:是否显示地图比例尺
ArcGISTiledMapServiceLayer 方法
  • attr(name, value):添加属性
  • getAttributionData():获取属性数据
  • getMap():返回地图
  • getNode():返图层节点
  • hide():隐藏
  • isVisibleAtScale(scale):显示比例尺
  • refresh():刷新
  • resume():重新加载当前视图中的所有瓦片
  • setExclusionAreas():指定某些区域不显示标题
  • setInfoTemplates(infoTemplates):设置信息模板
  • setMaxScale(scale):设置最大比例尺
  • setMinScale(scale):设置最小比例尺
  • setOpacity(opacity):设置透明度
  • setRefreshInterval(interval):设置刷新间隔
  • setScaleRange(minScale, maxScale):设置比例尺范围
  • setVisibility(isVisible):设置是否显示
  • suspend():暂停、延缓
ArcGISTiledMapServiceLayer 事件
  • error:错误事件
  • load:加载事件
  • opacity-change:透明度改变事件
  • refresh-interval-change:刷新间隔发生变化
  • resume:图层复原事件
  • scale-range-change:标尺范围改变事件
  • scale-visibility-change:标尺显示改变事件
  • suspend:延缓推迟事件
  • update:更新事件
  • update-end:更新结束事件
  • update-start:更新开始事件
  • visibility-change:显示改变事件

4、OpenStreetMapLayer

  • 开放的地图街道图层,世界地图
构造函数
new OpenStreetMapLayer(options?)
OpenStreetMapLayer 属性
  • attributionDataUrl:图层的属性数据存储路径
  • capabilities:地图服务的功能,可选值是地图,查询或数据
  • className:类属性层的节点名称
  • copyright:版权字符串定义的地图服务
  • description:地图描述定义的地图服务
  • fullExtent:地图全图范围
  • hasAttributionData:是否有图层属性数据
  • id:唯一标示
  • loadError:加载错误信息类
  • loaded:加载后属性
  • maxScale:最大比例尺
  • minScale:最小比例尺
  • opacity:透明度
  • refreshInterval:刷新间隔
  • showAttribution:显示属性
  • spatialReference:空间参考
  • suspended:暂停、延缓
  • titleInfo:标题信息
  • url:路径
  • visible:显示
  • visibleAtMapScale:显示比例尺
OpenStreetMapLayer 方法
  • attr(name, value):添加属性
  • getAttributionData():获取属性数据
  • getMap():获取地图
  • getNode():获取图层节点
  • getTileUrl(level, row, column):获取切片路径
  • hide():隐藏
  • isVisibleAtScale(scale):是否显示比例尺
  • refresh():刷新
  • resume():复原图层
  • setExclusionAreas():指定某些区域不设置标题
  • setMaxScale(scale):设置最大比例尺
  • setMinScale(scale):设置最小比例尺
  • setOpacity(opacity):设置透明度
  • setRefreshInterval(interval):设置刷新间隔
  • setScaleRange(minScale, maxScale):设置比例尺范围
  • setVisibility(isVisible):设置图层是否显示
  • show():设置图层显示
  • suspend():图层加载延缓延迟
OpenStreetMapLayer 事件
  • error:错误事件
  • load:加载事件
  • opacity-change:透明度改变事件
  • refresh-interval-change:刷新间隔发生变化
  • resume:图层复原事件
  • scale-range-change:标尺范围改变事件
  • scale-visibility-change:标尺显示改变事件
  • suspend:延缓推迟事件
  • update:更新事件
  • update-end:更新结束事件
  • update-start:更新开始事件
  • visibility-change:显示改变事件
<!DOCTYPE html>
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>OpenStreetMap</title> 
    <link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/init.js"></script>
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/esri/css/esri.css" />
    <script>
        dojo.require("esri.map");
        dojo.require("esri.layers.osm");
        var map, osmLayer;

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

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

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

5、WMTSLayer

  • 创建一个基于OGC Web地图切片图层
构造函数
new WMTSLayer(url, options?)
  • 方法,属性,事件同 Layer
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>WMTSLayer</title>

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

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

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

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

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

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

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

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

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

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

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

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

6、WebTiledLayer

  • 对于不是使用ArcGis Server发布的切片地图服务,可以使用该类
构造函数
new WebTiledLayer(urlTemplate, options?)
  • urlTemplate 设置格式:http://some.doman.com/${level}/${col}/${row}/
  • level:层级
  • col:切片的列
  • row:切片的行
  • 属性,事件,方法同Layer
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>WebTiledLayer</title>

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

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

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

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

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

7、DynamicMapServiceLayer

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

8、ArcGISDynamicMapServiceLayer

  • 动态图层
构造函数
new ArcGISDynamicMapServiceLayer(url, options?)
ArcGISDynamicMapServiceLayer 属性
  • disableClientCaching:为真时,图片总是请求从服务器和浏览器的缓存将被忽略
  • dynamicLayerInfos:用来改变层排序或重新定义映射
  • fullExtent:全面定义的地图服务
  • hasAttributionData:当为真时,层属性数据
  • id:唯一标示
  • imageFormat:输出图像类型
  • imageTransparency:动态图像的背景是否透明
  • infoTemplates:信息模板
  • initialExtent:初始化范围
  • layerDefinitions:设置层定义用于过滤地图服务的各个层的特性
  • layerDrawingOptions:用于覆盖层的方式数组
  • layerInfos:返回可用的服务层和默认的可见性等信息
  • layerTimeOptions:返回当前层时间选项
  • maxImageHeight:最大图像的高度,以像素为单位
  • maxImageWidth:最大图像的宽度,以像素为单位
  • maxRecordCount:记录的最大数量,可以从结果中进行查找操作
  • maxScale:最大比例尺
  • minScale:最小比例尺
  • opacity:透明度
  • refreshInterval:刷新间隔
  • showAttribution:为真时,层的属性显示在地图上
  • spatialReference:空间参考
  • supportsDynamicLayers:为真时,服务支持动态图层
  • units:图层的默认单位
  • url:图层地址
  • useMapImage:当真时,图像保存到服务器,使用MapImageLayer
  • version:ArcGIS Server 的地图服务发布的版本
  • visible:显示图层
  • visibleAtMapScale:为真时,比例尺可见
  • visibleLayers:可见的图层
ArcGISDynamicMapServiceLayer 方法
  • createDynamicLayerInfosFromLayerInfos():基于当前设置创建一个数组 LayerInfo DynamicLayerInfos
  • exportMapImage(imageParameters?, callback?):使用指定的参数值导出地图
  • getImageUrl(extent, width, height, callback):获取图片路径
  • getMap():返回的引用添加到地图控制层
  • getNode():返回图层的 DOM 节点
  • hide():隐藏图层
  • isVisibleAtScale(scale):图层在某一比例尺内是可见的
  • refresh():刷新
  • setDefaultLayerDefinitions(doNotRefresh?):重置所有层定义中定义的服务
  • setDefaultVisibleLayers(doNotRefresh?):设置默认可见的图层
  • setDisableClientCaching(disable) :设置禁用客户端缓存
  • setDynamicLayerInfos(dynamicLayerInfos, doNotRefresh?):设置动态图层信息
  • setGDBVersion(gdbVersion, doNotRefresh?):设置 ArcGISDynamicMapServiceLayer 的 GDB 版本
  • setImageFormat(imageFormat, doNotRefresh?):设置导出地图的图像格式
  • setImageTransparency(transparent, doNotRefresh?):设置地图图像的透明度
  • setInfoTemplates(infoTemplates):设置显示的信息模板
  • setLayerDefinitions(layerDefinitions, doNotRefresh?):设置图层定义,用于过滤地图服务的各个层的特性
  • setLayerDrawingOptions(layerDrawingOptions, doNotRefresh?):指定图层的绘制方式
  • setLayerTimeOptions(options, doNotRefresh?):设置图层的时间选项
  • setMaxScale(scale):设置最大比例尺
  • setMinScale(scale):设置最小比例尺
  • setOpacity(opacity):设置透明度
  • setRefreshInterval(interval):设置刷新间隔时间
  • setScaleRange(minScale, maxScale):设置比例尺范围
  • setUseMapTime(update):设置使用地图的当前时间
  • setVisibility(isVisible):设置层的可见性
ArcGISDynamicMapServiceLayer 事件
  • 继承自 Layer

9、ArcGISImageServiceLayer

  • 用来访问影像服务(非切片)
构造函数
new ArcGISImageServiceLayer(url, options?)
ArcGISImageServiceLayer 属性
  • bandCount:队列数量
  • bandIds:队列编号数组
  • bands:队列数组
  • className:类名称
  • compressionQuality:当前压缩质量值
  • copyrightText:版权字符串
  • defaultMosaicRule:默认的马赛克规则
  • description:描述定义的服务
  • disableClientCaching:禁用客户端缓存
  • format:图片类型
  • fullExtent:地图全图范围
  • mosaicRule:mosaic 规则
  • pixelSizeX:X 方向的像素大小
  • pixelSizeY:Y 方向的像素大小
  • pixelType:图像的像素类型
  • 其他属性同其他图层类
ArcGISImageServiceLayer 方法
  • exportMapImage(imageServiceParameters?, callback?):导出动态地图
  • getDefinitionExpression():返回当前定义的表达式
  • getImageUrl(extent, width, height, callback):获取图片路径
  • getKeyProperties():得到关键属性,包括名字等信息与图像
  • getRasterAttributeTable():异步返回栅格属性表
  • getVisibleRasters():得到可见的栅格影像
  • queryVisibleRasters(query, options?, callback?, errback?):查询可见栅格影像
  • setCompressionQuality(quality, doNotRefresh?):设置导出图像的压缩质量
  • setDefinitionExpression(expression, doNotRefresh):设置定义表达式
  • setDisableClientCaching(disable):禁用客户端缓存
  • setInterpolation(interpolation, doNotRefresh?):设置插值法
  • setMosaicRule(mosaicRule, doNotRefresh?):设置马赛克规则
  • setOpacity(opacity):设置透明度
  • setRefreshInterval(interval):设置刷新间隔
  • setRenderingRule(renderingRule, doNotRefresh?):设置渲染规则
ArcGISImageServiceLayer 事件
  • 继承自 Layer

10、WMSLayer

  • 网络地图服务(WMS)
构造函数
new WMSLayer(url, options?)
  • 方法、属性、事件都与其他图层类相同
<!DOCTYPE html>
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
   	<!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>WMSlayer</title> 

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

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

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

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

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

11、ImageParameters

  • 图像参数选项
构造函数
new ImageParameters()
ImageParameters 常量
  • LAYER_OPTION_EXCLUDE:默认显示所有图层,指定ID的图层除外
  • LAYER_OPTION_HIDE:隐藏指定ID的图层
  • LAYER_OPTION_INCLUDE:显示指定ID的图层,除了默认可见层
  • LAYER_OPTION_SHOW:只显示指定ID的层
ImageParameters 属性
  • bbox:导出的地图边框
  • dpi:每英寸像素值
  • format:地图图片格式
  • height:图像的像素高度
  • imageSpatialReference:空间参考
  • layerDefinitions:一系列层定义表达式,允许通过过滤特性导出地图图像的各个层
  • layerIds:层ID的列表
  • layerOption:选择显示或隐藏的层
  • layerTimeOptions:图层的时间选项
  • timeExtent:地图图像的时间范围
  • transparent:动态图像的背景是否透明
  • width:图像的像素宽度
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>ArcGISDynamicMapServiceLayer</title>

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

    <script>
        var map;

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

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

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

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

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

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

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

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

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

</html>

12、ImageServiceParameters

  • 代表了影像服务调用参数选项
构造函数
new ImageServiceParameters()
ImageServiceParameters 常量
  • INTERPOLATION_BILINEAR:通过双线性插值对像素重新取样
  • INTERPOLATION_CUBICCONVOLUTION:通过立方体卷积对像素重新取样
  • INTERPOLATION_MAJORITY:多数重新取样
  • INTERPOLATION_NEARESTNEIGHBOR:通过最近邻像素重新取样
ImageServiceParameters 属性
  • bandIds:当前波段ID列表
  • compressionQuality:当前图像压缩质量值
  • extent:输出图像范围
  • format:地图图像格式
  • height:图像的像素高度
  • interpolation:当前的插值法
  • mosaicRule:马赛克规则
  • noData:无数据
  • renderingRule:渲染规则
  • timeExtent:时间范围
  • width:图像的像素宽度
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>ArcGISImageServiceLayer</title>
  	<link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/init.js"></script>
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/esri/css/esri.css" />

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

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

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

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

</html>

13、GraphicsLayer

  • 一个层包含一个或多个图形功能。每个地图都包含一个 GraphicsLayer,默认情况下使用Map.graphics属性访问。可以创建自己的图形层,并将它们添加到地图上
构造函数
new GraphicsLayer()
new GraphicsLayer(options?)
  • GraphicsLayer 属性、事件、方法同前面的各个图层类
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>GraphicsLayer</title>

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

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

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

              map.on("load", setUpQuery);

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

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

                  map.infoWindow.resize(245, 125);

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

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

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

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

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

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

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

14、FeatureLayer

  • 要素图层,继承关系如下:
esri/layers/Layer 
	|_esri/layers/GraphicsLayer          	
		|_esri/layers/FeatureLayer
FeatureLayer 构造函数
new FeatureLayer(url, options?)
new FeatureLayer(featureCollectionObject, options?)
  • featureCollectionObject:要素集合对象
FeatureLayer 属性
  • advancedQueryCapabilities:是否支持使用统计查询
  • allowGeometryUpdates:允许地理位置更新
  • attributionDataUrl:属性数据存储的 URL 地址
  • capabilities:要素层的信息
  • className:类名
  • copyright:版权信息
  • credential:认证信息
  • dataAttributes:数据属性
  • defaultDefinitionExpression:默认定义表达式
  • defaultVisibility:默认的图层的可见性
  • displayField:层的主显示字段的名称
  • editFieldsInfo:编辑字段的字段名
  • fields:字段的数组
  • fullExtent:要素层全图范围
  • geometryType:几何类型
  • graphics:绘制要素层数组
  • hasAttachments:存在附件
  • hasAttributionData:存在层属性数据
  • htmlPopupType:HTML 定义弹出气泡类型
  • id:唯一标示
  • infoTemplate:信息模板
  • labelingInfo:标签信息
  • layerId:要素层的ID
  • loadError:要素层未能加载报错
  • loaded:要素层已加载
  • maxRecordCount:最大记录数量
  • maxScale:最大比例尺
  • minScale:最小比例尺
  • multipatchOption:支持要素服务的数据源选项
  • name:要素层名称
  • objectIdField:对象ID字段
  • opacity:透明度
  • refreshInterval:刷新间隔
  • relationships:要素层关系
  • renderer:渲染器
  • showAttribution:显示属性
  • showLabels:显示标签
  • source:数据源
  • styling:样式
  • supportsAdvancedQueries:支持orderByFields查询操作
  • supportsAttachmentsByUploadId:支持上传附件
  • supportsCalculate:更新时,支持计算操作
  • supportsStatistics:支持查询操作的要素统计
  • surfaceType:类型的矢量图形,用来绘制图形
  • suspended:暂停
  • templates:模板
FeatureLayer 方法
  • add(graphic):添加一个图形
  • addAttachment(objectId, formNode, callback?, errback?):添加一个附件
  • applyEdits(adds?, updates?, deletes?, callback?, errback?):编辑应用到要素层
  • attr(name, value):添加一个新的属性
  • clear():清除所有图形
  • clearSelection():清除所选图形
  • deleteAttachments(objectId, attachmentIds, callback?, errback?):删除一个或多个附件
  • disableMouseEvents():禁用图形层上的所有鼠标事件
  • enableMouseEvents():允许图形层上的所有鼠标事件
  • getAttributionData():获取自定义属性数据
  • getDefinitionExpression():获取当前定义的表达式
  • getDomain(fieldName, options?):获取与给定的字段相关联的域的名称
  • getEditCapabilities(options?):获取编辑功能
  • getEditInfo(feature, options?):获取编辑信息
  • getEditSummary(feature, options?):获取编辑的概要信息
  • getField(fieldName):获取指定字段名的字段
  • getMap():获取地图
  • getMaxAllowableOffset():获取最大允许偏移
  • getNode():获取 DOM 节点
  • getOrderByFields():获取字段排序顺序
  • getSelectedFeatures():获取当前选择的要素
  • getSelectionSymbol():获取当前选择的符号
  • getTimeDefinition():获得当前的时间定义
  • getType(feature):获取要素类型
  • hide():隐藏某一要素层
  • isEditable():要素层是否可编辑
  • isVisibleAtScale(scale):在某一比例尺是否可见
  • queryAttachmentInfos(objectId, callback?, errback?):查询指定附件相关信息
  • queryCount(query, callback?, errback?):查询数量
  • queryExtent(query, callback?, errback?):查询范围
  • queryFeatures(query, callback?, errback?):查询特定要素
  • queryIds(query, callback?, errback?):查询对象ID
  • queryRelatedFeatures(relQuery, callback?, errback?):查询相关要素
  • redraw():重绘图形层中的所有图形
  • refresh():刷新
  • remove(graphic):移除图形
  • selectFeatures(query, selectionMethod?, callback?, errback?):选择查询
  • setAutoGeneralize(enable):启用或禁用自动生成
  • setDefinitionExpression(expression):设置定义表达式
  • setEditable(editable):设置要素层是否可编辑
  • setInfoTemplate(infoTemplate):为一层指定或更改信息模板
  • setLabelingInfo(labelingInfo):设置标签信息
  • setMaxAllowableOffset(offset):设置最大允许偏移
  • setMaxScale(scale):设置层的最大比例尺
  • setMinScale(scale):设置层的最小比例尺
  • setSelectionSymbol(symbol):设置选择的符号
  • setShowLabels(showLabels):设置是否显示标签
FeatureLayer 事件
  • add-attachment-complete:添加附件完成时产生的事件
  • before-apply-edits:编辑前触发的事件
  • click:单击事件
  • dbl-click:双击事件
  • delete-attachments-complete:删除附件完成后产生的事件
  • edits-complete:编辑完成后产生的事件
  • error:出现错误产生的事件
  • graphic-add:添加图形到GraphicsLayer产生的事件
  • graphic-draw:画图形到GraphicsLayer产生的事件
  • graphic-node-add:图形的DOM节点添加到要素层产生的事件
  • graphic-node-remove:图形的DOM节点移除产生的事件
  • graphic-remove:图形移除产生的事件
  • load:要素层加载产生的事件
  • mouse-down:鼠标按下事件
  • mouse-drag:鼠标拖动事件
  • mouse-move:鼠标移动事件
  • mouse-out:鼠标离开事件
  • mouse-over:鼠标结束事件
  • mouse-up:鼠标抬起事件
  • opacity-change:透明度改变事件
  • query-attachment-infos-complete:查询附件信息完成产生的事件
  • query-count-complete:查询数量统计完成事件
  • query-extent-complete:查询范围完成事件
  • query-features-complete:查询要素完成事件
  • query-ids-complete:查询id完成事件
  • query-related-features-complete:查询相关要素完成产生的事件
  • refresh-interval-change:刷新间隔改变事件
  • resume:图层复原产生事件
  • scale-range-change:比例尺范围变化产生事件
  • scale-visibility-chang:比例尺可见性变化产生事件
  • selection-clear:选择清除产生事件
  • selection-complete:选择完成产生事件
  • show-labels-change:显示标签变化产生事件
  • suspend:图层加载延缓时产生的事件
  • update:图层更新时产生的事件
  • update-end:图层更新结束后产生的事件
  • update-start:图层更新开始的事件
  • visibility-change:图层可见性改变时产生的事件

15、FeatureEditResult

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

16、FeatureTemplate

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

17、FeatureType

  • 要素类型

18、LabelLayer

  • 将文本和符号显示在地图上
构造函数
new LabelLayer(params?)
  • LabelLayer属性、方法、事件大部分与 Layer 相同
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>FeatureLayer</title>

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

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

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

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

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

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

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

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

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

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

    <script>
        var map;

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

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

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

19、MapImageLayer

构造函数
new MapImageLayer(options?)
MapImageLayer 属性
  • maxScale:最大比例尺
  • minScale:最小比例尺
  • opacity:透明度
  • refreshInterval:刷新间隔
  • showAttribution:显示属性
  • url:服务路径
  • visible:图层可见性
  • visibleAtMapScale:图层在某一比例尺下可见
MapImageLayer 方法
  • addImage(mapImage):添加一个参数对象
  • attr(name, value):添加属性
  • getAttributionData():获取属性数据
  • getImages():得到一个MapImage对象数组定义MapImageLayer图像
  • getMap():返回Map对象
  • getNode():获取节点
  • hide():隐藏图层
  • isVisibleAtScale(scale):图层在某一比例尺下是否可见
  • removeAllImages():移除所有 MapImage
  • removeImage(mapImage):移除指定 MapImage
  • resume():图层复原
  • setMaxScale(scale):设置最大比例尺
  • setMinScale(scale):设置最小比例尺
  • setOpacity(opacity):设置透明度
  • setRefreshInterval(interval):设置刷新间隔
  • setScaleRange(minScale, maxScale):设置比例尺范围
  • setVisibility(isVisible):设置图层可见性
  • show():显示图层
MapImageLayer 事件
  • error:错误产生事件
  • load:加载事件
  • opacity-change:透明度改变事件
  • refresh-interval-change:刷新间隔事件
  • scale-range-change:比例尺范围变化事件
  • scale-visibility-change:比例尺可见性变化事件
  • update:更新事件
  • update-end:更新结束事件
  • update-start:更新开始事件
  • visibility-change:可见性改变事件

20、MapImage

  • 带地理参考的图像参数类
构造函数
new MapImage(options)
MapImage 属性
  • extent:范围
  • height:高度
  • href:返回图像的url
  • scale:比例尺
  • width:宽度
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
 	<link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/init.js"></script>
    <script type="text/javascript" src="http://localhost:2686/arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/esri/css/esri.css" />
    <script type="text/javascript">
        var map;

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

            setupDropZone();

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

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

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

            function readDataFromFile(pngFile, tfwFile) {
                // 读文件对象
                var reader = new FileReader();
                // 获取文件名称
                var layerName = pngFile.name.split('.')[0];
                reader.onload = function () {
                    // 读取TFW文件中的参数
                    var newLineIdx = reader.result.indexOf("\n");
                    var lines = reader.result.split("\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>
上一篇:ArcGIS Runtime SDK for WPF 初始化


下一篇:Arcgis Engine 报错:异常来自HRESULT:0x80040228