Vue Arcgis叠加天地图
<template>
<div style="width: 100%;
height: 100%">
<div id="viewDiv" style="width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: absolute;
top: 0;
left: 0;">
</div>
</div>
</template>
<script>
import { loadCss, setDefaultOptions, loadModules } from "esri-loader";
export default {
name: "Data",
mounted() {
loadModules(
["esri/layers/WebTileLayer", "esri/Map", "esri/views/SceneView"],
{
url: "http://localhost:8081/arcgis_js_api/4.18/init.js"
}
)
.then(([WebTileLayer, Map, SceneView]) => {
var tiandituBaseUrl = "http://{subDomain}.tianditu.gov.cn"; //天地图服务地址
var token = "7baeffb96bf61861b302d0f963cfda66"; //天地图token
var map = new Map({
ground: "world-elevation"
});
var view = new SceneView({
container: "viewDiv",
map: map,
scale: 123456789,
center: [120.75, 30.75]
});
//矢量地图(球面墨卡托投影)
var tiledLayer = new WebTileLayer({
urlTemplate:
tiandituBaseUrl +
"/img_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=img&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" +
token,
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
});
//矢量注记(球面墨卡托投影)
var tiledLayerAnno = new WebTileLayer({
urlTemplate:
tiandituBaseUrl +
"/cia_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cia&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" +
token,
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
});
map.add(tiledLayer);
map.add(tiledLayerAnno);
})
.catch(err => {
console.log(err);
});
}
};
</script>
</style>
