<template>
<div class="wrapper">
<div id="viewDiv">
<PageSwitch />
</div>
</div>
</template>
<script>
import PageSwitch from "@/components/PageSwitch";
import { loadModules } from "esri-loader";
export default {
name: "Data",
components: {
PageSwitch
},
mounted() {
loadModules(
["esri/layers/WebTileLayer", "esri/Map", "esri/views/SceneView"],
{
url: "https://zrzyhghj3.jiaxing.gov.cn/arcgis/api/4.12/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 lang="less" scoped>
.wrapper {
width: 100%;
height: 100%;
#viewDiv {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
}
</style>
天地图带你走上土星世界
最新推荐文章于 2023-02-16 15:26:04 发布