前言
某些项目可能多方参与,每一方使用的GIS平台有时会有所不同,这时为了统一各方地图服务,通常会发布OGC标准的WMTS地图服务供各方使用。ArcGIS API for JavaScript提供了专门加载WMTS服务的类WMTSLayer
,通过一些配置参数后即可以添加图层;另外ArcGIS API 还提供了类TiledMapServiceLayer
,通过继承该类也可以自定义一个加载WMTS服务的类,这种方式和上篇基于ArcGIS API for JavaScript加载天地图相同。
方式一
直接使用WMTSLayer
API地址:https://developers.arcgis.com/javascript/3/jsapi/wmtslayer-amd.html
官方示例: https://developers.arcgis.com/javascript/3/jssamples/layers_wmtslayerresourceinfo.html
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ArcGIS JS API叠加WMTS图层(原生类WMTSLayer)</title>
</head>
<link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.27/"></script>
<script>
require([
"esri/map",
"esri/layers/WMTSLayer",
"esri/layers/WMTSLayerInfo",
"esri/geometry/Extent",
"esri/layers/TileInfo",
"esri/SpatialReference",
"dojo/domReady!"
], function (
Map, WMTSLayer, WMTSLayerInfo,
Extent, TileInfo, SpatialReference
) {
var map = new Map("map", {
center: [86.9, 28],
zoom: 3
});
var tileInfo = new TileInfo({
"dpi": 96,//又称ppi:pixel per inch
"format": "format/png",
"compressionQuality": 0,
"spatialReference": new SpatialReference({
"wkid": 4326
}),
"rows": 512,
"cols": 512,
"origin": {
"x": -180,
"y": 90
},
"lods": [{
"level": "0",
"scale": 236663484.36365247,
"resolution": 0.5624999999999999
}, {
"level": "1",
"scale": 118331742.18182631,
"resolution": 0.28125000000000017
}, {
"level": "2",
"scale": 59165871.090913124,
"resolution": 0.140625
}, {
"level": "3",
"scale": 29582935.545456562,
"resolution": 0.0703125
}, {
"level": "4",
"scale": 14791467.772728289,
"resolution": 0.03515625000000002
}, {
"level": "5",
"scale": 395733.8863641415,
"resolution": 0.017578125000000003
}, {
"level": "6",
"scale": 3697866.94318207,
"resolution": 0.008789062499999998
}, {
"level": "7",
"scale": 1848933.471591035,
"resolution": 0.004394531249999999
}, {
"level": "8",
"scale": 924466.7357955176,
"resolution": 0.002197265625
}, {
"level": "9",
"scale": 462233.3678977588,
"resolution": 0.0010986328125
}, {
"level": "10",
"scale": 231116.6839488794,
"resolution": 0.00054931640625
}, {
"level": "11",
"scale": 115558.3419744397,
"resolution": 0.000274658203125
}]
});
var tileExtent = new Extent(-180, -90, 180, 90, new SpatialReference({
wkid: 4326
}));
var layerInfo = new WMTSLayerInfo({
tileInfo: tileInfo,
fullExtent: tileExtent,
initialExtent: tileExtent,
identifier: "SRTM_Color_Index",//通过元数据即XML文件可查看
tileMatrixSet: "31.25m",
format: "png",
style: "default"
});
var resourceInfo = {
version: "1.0.0",
layerInfos: [layerInfo],
copyright: "earthdata"
};
var options = {
serviceMode: "KVP",
resourceInfo: resourceInfo,
layerInfo: layerInfo
};
wmtsLayer = new WMTSLayer("https://gibs.earthdata.nasa.gov/wmts/epsg4326/best", options);
map.addLayer(wmtsLayer);
});
</script>
<body>
<div id="map"></div>
</body>
</html>
效果图
方式二
扩展TiledMapServiceLayer
API地址: https://developers.arcgis.com/javascript/3/jsapi/tiledmapservicelayer-amd.html
这部分直接参考基于ArcGIS API for JavaScript加载天地图就可以了,天地图的服务是符合OGC标准的WMTS服务。