一、使用WebTileLayer加載天地圖的投影坐標地圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ArcGIS API加載天地圖</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.18/"></script>
<style>
#mapView{
position: absolute;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="mapView"></div>
</body>
<script>
require(["esri/Map", "esri/views/MapView", "esri/layers/WebTileLayer"],
function (Map, MapView, WebTileLayer) {
let layer = new WebTileLayer({
urlTemplate:
`https://{subDomain}.tianditu.gov.cn/img_w/wmts?
SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default
&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILECOL={col}&TILEROW={row}&
tk=在天地圖官網申請的key`,
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
copyright: "天地圖",
});
let map = new Map({
layers: [layer],
ground: "world-elevation",
});
let view = new MapView({
container: "mapView",
map: map,
center: [90, 40],
zoom: 4,
constraints: {
minZoom: 4,
maxZoom: 17,
},
});
});
</script>
</html>
以上代碼加載的是天地圖的影像底圖，加載其他類型地圖時替換下圖中標記出來的兩個地方即可。
二、使用WebTileLayer加載天地圖的地理坐標地圖
待補。