1、Map 类
构造函数
new Map(divId, options?)
Map 属性
attribution:属性
autoResize:自动调整大小
basemapLayerIds:地图当前的底图数组
extent:地图范围
fadeOnZoom:淡入效果的缩放
geographicExtent:地图(或边界框)的地理范围
graphics:提供对地图的 GraphicsLayer 的访问
graphicsLayerIds:当前 GraphicsLayers 地图的数组
height:高度
id:编号
infoWindow:信息窗
isClickRecenter:是否单击重定位
isDoubleClickZoom:是否双击缩放
isKeyboardNavigation:是否按键导航
isPan:是否地图平移
isPanArrows:是否箭头显示地图上平移
isScrollWheelZoom:是否滑轮旋转缩放
isShiftDoubleClickZoom:是否按下shift键并双击缩放
isZoomSlider:是否滑轮器缩放
layerIds:图层数组
loaded:图层加载后
navigationMode:导航模式
position:位置
root:包含容器的DOM节点的层,内置信息窗口、图标和滑块
showAttribution:是否显示属性
snappingManager:闪光的管理
spatialReference:空间参考
timeExtent:时间范围
visible:地图显示
width:宽度
Map 方法
addLayer(layer, index?):添加图层
addLayers(layers):添加图层数组
attr(name, value):设置属性
centerAndZoom(mapPoint, levelOrFactor):中心点缩放
centerAt(mapPoint):设为中心点
destroy():销毁地图
disableClickRecenter():禁止单击重定位
disableDoubleClickZoom():禁止双击缩放
disableKeyboardNavigation():禁止按键导航
disableMapNavigation():禁止地图导航
disablePan():禁止平移
disableScrollWheelZoom():禁止滑轮缩放
disableShiftDoubleClickZoom():禁止按下shift键并双击缩放
disableSnapping():禁止闪光
enableClickRecenter():允许单击重定位
enableDoubleClickZoom():允许双击缩放
enableKeyboardNavigation():允许按键导航
enableMapNavigation():允许地图导航
enablePan():允许平移地图
enableScrollWheelZoom():允许滑轮缩放
enableShiftDoubleClickZoom():允许按下shift键并双击缩放
enableSnapping(snapOptions?):允许发光
getBasemap():获取底图
getInfoWindowAnchor(screenCoords):获取信息窗口锚点
getLayer(id):根据图层id获取图层
getLayersVisibleAtScale():获取图层显示的比例
getLevel():获取图层级别
getMaxScale():获取最大比例
getMaxZoom():获取最大缩放级别
getMinScale():获取最小比例
getMinZoom():获取最小缩放级别
getScale():获取比例
getZoom():获取缩放级别
hidePanArrows():隐藏平移箭头
hideZoomSlider():隐藏缩放滑轮
panDown():平移按下
panLeft():平移向左
panLowerLeft():向左下方平移
panLowerRight():向右下方平移
panRight():向右平移
panUp():平移抬起
panUpperLeft():向左上方平移
panUpperRight():向右上方平移
removeAllLayers():移除所有图层
removeLayer(layer):移除某个图层
reorderLayer(layer, index):对图层重排序
reposition():图层复位
resize(immediate?):调整大小
setBasemap(basemap):设置底图
setExtent(extent, fit?):设置范围
setInfoWindowOnClick(enabled):设置信息窗单击
setLevel(level):设置级别
setMapCursor(cursor):设置地图光标
setScale(scale):设置比例
setTimeExtent(timeExtent):设置时间范围
setTimeSlider(timeSlider):设置时间滑块
setVisibility(visible):设置是否显示
setZoom(zoom):设置缩放
showPanArrows():显示移动箭头
showZoomSlider():显示缩放滑轮
toMap(screenPoint):转换为地图坐标
toScreen(mapPoint):转换为屏幕坐标
Map 事件
basemap-change:底图改变
before-unload:卸载前
click:单击事件
dbl-click:双击事件
extent-change:地图范围发生改变
key-down:按键按下
key-up:按键抬起
layer-add:图层添加
layer-add-result:图层添加结束
layer-remove:图层移除
layer-reorder:图层重排序
layer-resume:图层复位
layer-suspend:图层暂停
layers-add-result:图层添加返回
layers-removed:图层移除后
layers-reordered:图层重排序后
load:加载
mouse-down:鼠标按下
mouse-drag:鼠标拖拽
mouse-drag-end:鼠标拖拽结束
mouse-drag-start:鼠标拖拽开始
mouse-move:鼠标移动
mouse-out:鼠标离开
mouse-over: 鼠标结束
mouse-up:鼠标抬起
mouse-wheel:鼠标滚轮
pan:平移
pan-end:平移结束
pan-start:平移开始
reposition:复位
resize:调整大小
time-extent-change:时间范围发生改变
unload:卸载
update-end:更新结束
update-start:更新开始
zoom:缩放
zoom-end:缩放结束
zoom-start:缩放开始
2、图层分类
Layer 类
图层基类,所有图层类都继承此类,没有构造函数
Layer 属性
attributionDataUrl:图层的属性存储路径
className:类属性层的节点名称
hasAttributionData:真值时,图层属性数据
id:唯一标示
loadError:加载错误信息类
loaded:加载后属性
maxScale:最大比例尺
minScale:最小比例尺
opacity:透明度
refreshInterval:刷新间隔
showAttribution:显示属性
suspended:暂停、延缓
titleInfo:标题信息
url:路径
visible:显示
visibleAtMapScale:显示比例尺
Layer 方法
attributionDataUrl:图层的属性存储路径
className:类属性层的节点名称
hasAttributionData:真值时,图层属性数据
id:唯一标示
loadError:加载错误信息类
loaded:加载后属性
maxScale:最大比例尺
minScale:最小比例尺
opacity:透明度
refreshInterval:刷新间隔
showAttribution:显示属性
suspended:暂停、延缓
titleInfo:标题信息
url:路径
visible:显示
visibleAtMapScale:显示比例尺
Layer 方法
attr(name, value):设置属性
getAttributionData():获取属性数据
getMap():获取地图
getNode():获取图层节点
hide():隐藏
isVisibleAtScale(scale):显示比例尺
resume():图层复原
setMaxScale(scale):设置最大比例尺
setMinScale(scale):设置最小比例尺
setOpacity(opacity):设置透明度
setRefreshInterval(interval);设置刷新间隔
setScaleRange(minScale, maxScale):设置比例尺范围
setVisibility(isVisible):设置是否显示
show():设置显示为True
suspend():暂停、延缓
Layer 事件
error:错误事件
load:加载事件
opacity-change:透明度改变事件
refresh-interval-change:刷新间隔发生变化
resume:复原事件
scale-range-change:标尺范围改变事件
scale-visibility-change:标尺显示改变事件
suspend:延缓推迟事件
update:更新事件
update-end:更新结束事件
update-start:更新开始事件
visibility-change:显示改变事件
图层的分类
Arcgis Javascript API 提供了5种类型的图层,分别是地图切片图层、动态地图图层、图形图层、带地理参考的影像图层以及KML图层,这些图层类都继承于Layer类,分别是:TiledMapServiceLayer,DynamicMapServiceLayer,GraphicsLayer,MapImageLayer 和 KMLLayer。
其中,TiledMapServiceLayer(切片图层)又分为:ArcGISTiledMapServiceLayer,OpenStreetMapLayer,WMTSLayer 和 WebTiledLayer。
其中,DynamicMapServiceLayer(动态图层)又分为:ArcGISDynamicMapServiceLayer,ArcGISImageServiceLayer 和 WMSLayer
3、ArcGISTiledMapServiceLayer
静态切片图层类
构造函数
new ArcGISTiledMapServiceLayer(url, options?)
attributionDataUrl:图层的属性数据存储路径
capabilities:地图服务的功能,可选值是地图,查询或数据
className:类属性层的节点名称
copyright:版权字符串定义的地图服务
description:地图描述定义的地图服务
fullExtent:地图全范围
hasAttributionData:是否有属性数据
id:唯一标示
infoTemplates:信息模板
initialExtent:初始化范围
layerInfos:图层信息数组
loadError:加载错误信息属性
loaded:加载后属性
maxImageHeight:最大图片高度
maxImageWidth:最大图片宽度
maxRecordCount:最大记录数量
maxScale:最大比例
minScale:最小比例
opacity:透明度
refreshInterval:刷新间隔
showAttribution:是否显示属性
spatialReference:空间参考
suspended:暂停、延缓
titleInfo:标题信息
timeInfo:时间信息
units:单位数组
url:服务路径
version:版本
visible:是否显示
visibleAtMapScale:是否显示地图比例尺
ArcGISTiledMapServiceLayer 方法
attr(name, value):添加属性
getAttributionData():获取属性数据
getMap():返回地图
getNode():返图层节点
hide():隐藏
isVisibleAtScale(scale):显示比例尺
refresh():刷新
resume():重新加载当前视图中的所有瓦片
setExclusionAreas():指定某些区域不显示标题
setInfoTemplates(infoTemplates):设置信息模板
setMaxScale(scale):设置最大比例尺
setMinScale(scale):设置最小比例尺
setOpacity(opacity):设置透明度
setRefreshInterval(interval):设置刷新间隔
setScaleRange(minScale, maxScale):设置比例尺范围
setVisibility(isVisible):设置是否显示
suspend():暂停、延缓
ArcGISTiledMapServiceLayer 事件
error:错误事件
load:加载事件
opacity-change:透明度改变事件
refresh-interval-change:刷新间隔发生变化
resume:图层复原事件
scale-range-change:标尺范围改变事件
scale-visibility-change:标尺显示改变事件
suspend:延缓推迟事件
update:更新事件
update-end:更新结束事件
update-start:更新开始事件
visibility-change:显示改变事件
4、OpenStreetMapLayer
开放的地图街道图层,世界地图
构造函数
new OpenStreetMapLayer(options?)
OpenStreetMapLayer 属性
attributionDataUrl:图层的属性数据存储路径
capabilities:地图服务的功能,可选值是地图,查询或数据
className:类属性层的节点名称
copyright:版权字符串定义的地图服务
description:地图描述定义的地图服务
fullExtent:地图全图范围
hasAttributionData:是否有图层属性数据
id:唯一标示
loadError:加载错误信息类
loaded:加载后属性
maxScale:最大比例尺
minScale:最小比例尺
opacity:透明度
refreshInterval:刷新间隔
showAttribution:显示属性
spatialReference:空间参考
suspended:暂停、延缓
titleInfo:标题信息
url:路径
visible:显示
visibleAtMapScale:显示比例尺
OpenStreetMapLayer 方法
attr(name, value):添加属性
getAttributionData():获取属性数据
getMap():获取地图
getNode():获取图层节点
getTileUrl(level, row, column):获取切片路径
hide():隐藏
isVisibleAtScale(scale):是否显示比例尺
refresh():刷新
resume():复原图层
setExclusionAreas():指定某些区域不设置标题
setMaxScale(scale):设置最大比例尺
setMinScale(scale):设置最小比例尺
setOpacity(opacity):设置透明度
setRefreshInterval(interval):设置刷新间隔
setScaleRange(minScale, maxScale):设置比例尺范围
setVisibility(isVisible):设置图层是否显示
show():设置图层显示
suspend():图层加载延缓延迟
OpenStreetMapLayer 事件
error:错误事件
load:加载事件
opacity-change:透明度改变事件
refresh-interval-change:刷新间隔发生变化
resume:图层复原事件
scale-range-change:标尺范围改变事件
scale-visibility-change:标尺显示改变事件
suspend:延缓推迟事件
update:更新事件
update-end:更新结束事件
update-start:更新开始事件
visibility-change:显示改变事件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>OpenStreetMap</title>
<link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
<script type="text/javascript" src="http://localhost:2686/arcgisjs/init.js"></script>
<script type="text/javascript" src="http://localhost:2686/arcgisjs/jsapi_vsdoc12_v38.js"></script>
<link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/esri/css/esri.css" />
<script>
dojo.require("esri.map");
dojo.require("esri.layers.osm");
var map, osmLayer;
function init() {
map = new esri.Map("map", {
center: [-89.924, 30.036],
zoom: 12,
logo: false
});
osmLayer = new esri.layers.OpenStreetMapLayer();
map.addLayer(osmLayer);
}
dojo.ready(init);
</script>
</head>
<body class="claro" style="font-size: small; font-family: Arial Unicode MS,Arial,sans-serif;">
<div id="map" style="position:relative;width:700px; height:500px; border:1px solid #000;"></div>
</body>
</html>
5、WMTSLayer
创建一个基于OGC Web地图切片图层
构造函数
new WMTSLayer(url, options?)
方法,属性,事件同 Layer
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>WMTSLayer</title>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
padding:0;
}
#citationInfo {
position:absolute;
color:black;
font-weight:bold;
font-size:12pt;
left:10px;
bottom:10px;
z-Index:999;
}
</style>
<link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
<script type="text/javascript" src="http://localhost:2686/arcgisjs/init.js"></script>
<script type="text/javascript" src="http://localhost:2686/arcgisjs/jsapi_vsdoc12_v38.js"></script>
<link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/esri/css/esri.css" />
<script>
var map, wmtsLayer;
require([
"esri/map",
"esri/layers/WMTSLayer",
"esri/layers/WMTSLayerInfo",
"esri/geometry/Extent",
"esri/layers/TileInfo",
"esri/SpatialReference",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function (
Map,
WMTSLayer,
WMTSLayerInfo,
Extent,
TileInfo,
SpatialReference,
parser
) {
parser.parse();
var bounds = new Extent({
"xmin": -128.816, "ymin": 25.076, "xmax": -72.855, "ymax": 51.385,
"spatialReference": { "wkid": 4326 }
});
map = new Map("map", {
extent: bounds
});
var tileInfo1 = new TileInfo({ // 包含有关切片图层的切片方案
"dpi": 90.71428571428571, // 切片的dpi(每英寸点数)方案
"format": "image/png",
"compressionQuality": 0, // 压缩质量
"spatialReference": new SpatialReference({
"wkid": 3857
}),
"rows": 256,
"cols": 256,
"origin": { // 切片范围,起源,方案
"x": -20037508.34,
"y": 20037508.34
},
"lods": [{ // 数组定义切片方案的详细级别
"level": "EPSG:900913:8",
"scale": 2183915.0935581755,
"resolution": 611.4962261962892 // 分辨率
}, {
"level": "EPSG:900913:9",
"scale": 1091957.5467790877,
"resolution": 305.7481130981446
}, {
"level": "EPSG:900913:10",
"scale": 545978.7733895439,
"resolution": 152.8740565490723
}, {
"level": "EPSG:900913:11",
"scale": 272989.38669477194,
"resolution": 76.43702827453615
}, {
"level": "EPSG:900913:12",
"scale": 136494.69334738597,
"resolution": 38.21851413726807
}, {
"level": "EPSG:900913:13",
"scale": 68247.34667369298,
"resolution": 19.109257068634037
}, {
"level": "EPSG:900913:14",
"scale": 34123.67333684649,
"resolution": 9.554628534317018
}, {
"level": "EPSG:900913:15",
"scale": 17061.836668423246,
"resolution": 4.777314267158509
}, {
"level": "EPSG:900913:16",
"scale": 8530.918334211623,
"resolution": 2.3886571335792546
}, {
"level": "EPSG:900913:17",
"scale": 4265.4591671058115,
"resolution": 1.1943285667896273
}, {
"level": "EPSG:900913:18",
"scale": 2132.7295835529058,
"resolution": 0.5971642833948136
}, {
"level": "EPSG:900913:19",
"scale": 1066.3647917764529,
"resolution": 0.2985821416974068
}]
});
var tileExtent1 = new Extent(-13686470, 5203832, -13669272, 5215298, new SpatialReference({
wkid: 3857
}));
var layerInfo1 = new WMTSLayerInfo({
tileInfo: tileInfo1,
fullExtent: tileExtent1,
initialExtent: tileExtent1,
identifier: "medford:zoning", // 标示
tileMatrixSet: "EPSG:900913", // 瓦片矩阵
format: "gif",
style: "_null"
});
var tileInfo2 = new TileInfo({
"dpi": 90.71428571428571,
"format": "image/png",
"compressionQuality": 0,
"spatialReference": new SpatialReference({
"wkid": 4326
}),
"rows": 256,
"cols": 256,
"origin": {
"x": -180,
"y": 90
},
"lods": [{
"level": "EPSG:4326:0",
"scale": 279541132.0143589,
"resolution": 0.7039144025535298
}, {
"level": "EPSG:4326:1",
"scale": 139770566.00717944,
"resolution": 0.3519572012767649
}, {
"level": "EPSG:4326:2",
"scale": 69885283.00358972,
"resolution": 0.17597860063838244
}, {
"level": "EPSG:4326:3",
"scale": 34942641.50179486,
"resolution": 0.08798930031919122
}, {
"level": "EPSG:4326:4",
"scale": 17471320.75089743,
"resolution": 0.04399465015959561
}, {
"level": "EPSG:4326:5",
"scale": 8735660.375448715,
"resolution": 0.021997325079797805
}, {
"level": "EPSG:4326:6",
"scale": 4367830.1877243575,
"resolution": 0.010998662539898903
}, {
"level": "EPSG:4326:7",
"scale": 2183915.0938621787,
"resolution": 0.005499331269949451
}, {
"level": "EPSG:4326:8",
"scale": 1091957.5469310894,
"resolution": 0.0027496656349747257
}, {
"level": "EPSG:4326:9",
"scale": 545978.7734655447,
"resolution": 0.0013748328174873628
}]
});
var tileExtent2 = new Extent(-179.99999, -89.99999, 179.99999, 89.99999, new SpatialReference({
wkid: 4326
}));
var layerInfo2 = new WMTSLayerInfo({
tileInfo: tileInfo2,
fullExtent: tileExtent2,
initialExtent: tileExtent2,
identifier: "usa:states",
tileMatrixSet: "EPSG:4326",
format: "png",
style: "_null"
});
var resourceInfo = {
version: "1.0.0",
layerInfos: [layerInfo1, layerInfo2],
copyright: "open layer"
};
var options = {
serviceMode: "KVP", // 指定服务类型。有效值是最高值
resourceInfo: resourceInfo,
layerInfo: layerInfo2
};
wmtsLayer = new WMTSLayer("http://v2.suite.opengeo.org/geoserver/gwc/service/wmts", options);
map.addLayer(wmtsLayer);
});
</script>
</head>
<body>
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'">
<div id="citationInfo"></div>
</div>
</div>
</body>
</html>
6、WebTiledLayer
对于不是使用ArcGis Server发布的切片地图服务,可以使用该类
构造函数
new WebTiledLayer(urlTemplate, options?)
urlTemplate 设置格式:http://some.doman.com/
l
e
v
e
l
/
{level}/
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>