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():设置显示为Truesuspend():暂停、延缓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": -7508.34,"y": 7508.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.351957767649}, {"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./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 设置格式:/${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}./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="/" 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:当真时,图像保存到服务器,使用MapImageLayerversion:ArcGIS Server 的地图服务发布的版本visible:显示图层visibleAtMapScale:为真时,比例尺可见visibleLayers:可见的图层ArcGISDynamicMapServiceLayer 方法
createDynamicLayerInfosFromLayerInfos():基于当前设置创建一个数组 LayerInfo DynamicLayerInfosexportMapImage(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 事件
继承自 Layer9、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 事件
继承自 Layer10、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("/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("/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("/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("/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");// 设定查询条件var query = new Query();query.returnGeometry = true;query.outFields = ["NAME", "POP2000", "POP", "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> Population: </b>${POP}<br/>" +"<b> 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();// 遍历查询的内容,添加到GraphicsLayervar featureCount = features.length;for (var i = 0; i < featureCount; i++) {// Get the current feature from the featureSet.var graphic = features[i]; // Feature is a graphicgraphic.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 layervar 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:要素层的IDloadError:要素层未能加载报错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?):查询对象IDqueryRelatedFeatures(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("/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": 10 } });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 boundariesvar statesUrl = "/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 labelsvar statesLabel = new TextSymbol().setColor(statesColor);statesLabel.font.setSize("14pt");statesLabel.font.setFamily("arial");var statesLabelRenderer = new SimpleRenderer(statesLabel);// 创建 LabelLayervar labels = new LabelLayer({id: "labels" });// 添加 FeatureLayer,样式适配器,字段labels.addFeatureLayer(states, statesLabelRenderer, "${STATE_NAME}");// add the label layer to the mapmap.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():移除所有 MapImageremoveImage(mapImage):移除指定 MapImageresume():图层复原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:返回图像的urlscale:比例尺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 = "/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;// 创建MapImageLayervar 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):为指定的文件夹设置可见性其他方法继承于 LayerKMLLayer 事件
事件都继承于Layer<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="/3.9/js/esri/css/esri.css"><style>html, body, #map {padding:0;margin:0;height:100%;width:100%;}</style><script src="/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 = "/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 = "/u/2654618/kml/Wyoming.kml";var kml = new KMLLayer(kmlUrl);map.addLayer(kml);});</script></head><body class="tundra"><div id="map"></div></body></html>