ArcGIS JS API加载WMTS地图服务
吉玉石
前言：本来是想用ArcGIS发布的WMTS地图，可是ArcGIS的WMTS没弄明白怎么用，就用IServer发布的WMTS作为案例基础数据。
http://www.supermap.com.cn:8090/iserver/services 超图官方的IServer
具体代码如下：
<!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>WMTS地图服务</title>
<link rel="stylesheet" href="http://localhost/arcgis_api_v325/3.25/esri/css/esri.css">
<script src="http://localhost/arcgis_api_v325/3.25/init.js"></script>
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<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,
parser
) {
var map = new Map("map", {
center: [117,36.651],
zoom: 8
});
var tileInfo = new TileInfo({
"dpi": 96,
"format": "image/png",
"compressionQuality": 0,
"spatialReference": new SpatialReference({
"wkid": 4326
}),
"rows": 256,
"cols": 256,
"origin": {
"x": -180,
"y": 90
},
"lods": [
{"level": "0","scale": 295829355.45,"resolution": 0.703125},
{"level": "1","scale": 147914677.725,"resolution": 0.3515625},
{"level": "2", "scale": 73957338.8625,"resolution": 0.17578125},
{"level": "3","scale": 36978669.43125,"resolution": 0.087890625},
{"level": "4","scale": 18489334.715625,"resolution": 0.0439453125},
{"level": "5","scale": 9244667.3578125,"resolution": 0.02197265625},
{"level": "6","scale": 4622333.67890625,"resolution": 0.010986328125},
{"level": "7","scale": 2311166.83945312,"resolution": 0.0054931640625},
{"level": "8","scale": 1155583.41972656,"resolution": 0.00274658203125},
{"level": "9","scale": 577791.709863281,"resolution": 0.001373291015625},
{"level": "10","scale": 288895.8549316406,"resolution": 0.0006866455078125},
{"level": "11","scale": 144447.9274658203,"resolution": 0.00034332275390625},
{"level": "12","scale": 4508.935440959931,"resolution": 0.000171661376953125},
{"level": "13","scale": 36111.98186645508,"resolution": 0.0000858306884765625},
{"level": "14","scale": 18055.99093322754,"resolution": 0.0000429153442382812},
{"level": "15","scale": 9027.99546661377,"resolution": 0.0000214576721191406},
{"level": "16","scale": 4513.997733306885,"resolution": 0.0000107288360595703},
{"level": "17","scale": 2256.9988666534423,"resolution": 0.00000536441802978515},
{"level": "18","scale": 1128.4994333267211,"resolution": 0.00000268220901489257},
{"level": "19","scale": 564.2497166633606,"resolution": 0.00000134110450744628}
]
});
var tileExtent = new Extent(-180.0 , -85.0511287798065,180.0 , 85.05112877980648, new SpatialReference({
wkid: 4326
}));
var layerInfo = new WMTSLayerInfo({
tileInfo: tileInfo,
fullExtent: tileExtent,
initialExtent: tileExtent,
identifier: "China",
tileMatrixSet: "ChinaPublicServices_China",
format: "png",
style: "default"
});
var resourceInfo = {
version: "1.0.0",
layerInfos: [layerInfo],
copyright: ""
};
var options = {
serviceMode: "KVP",
resourceInfo: resourceInfo,
layerInfo: layerInfo
};
var wmtsLayer = new WMTSLayer("http://www.supermap.com.cn:8090/iserver/services/map-china400/wmts-china", options);
map.addLayer(wmtsLayer);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
类似资料：