[JavaScript知识库]基于vue使用arcgis加载天地图

cv就能运行了，加载有些慢有时候一时半会没显示出地图或者注记也不要着急。
token申请的是服务端的
1、先安装插件：esri-loader

2、代码

<template>
  <div>
    <div>使用Arcgis JS API加载天地图</div>
    <div id="viewBox" class="viewBox"></div>
  </div>
</template>

<script>
import { loadModules } from "esri-loader";
export default {
  data() {
    return {};
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const option = {
        //定义一个包含有JS API中js开发包和css样式文件的对象
        url: "https://js.arcgis.com/4.20/",
        css: "https://js.arcgis.com/4.20/esri/themes/light/main.css",
      };
      loadModules(
        [
          "esri/Map",
          "esri/views/MapView",
          "esri/layers/WebTileLayer"
          
        ],
        option
      ).then(([Map, MapView, WebTileLayer) => {
       const map = new Map();        
        const view = new MapView({
          //实例化地图视图
          container: "viewBox",
          map: map,
          zoom: 8,
          center: [121.607331, 31.1879],          
        });

        const veccLayer = new WebTileLayer({
          urlTemplate:
            "https://{subDomain}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=5d4236a2a06043cd0b0880bbf270c958",
          subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],         
        });
        const cvacLayer = new WebTileLayer({
          urlTemplate:
            "https://{subDomain}.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=5d4236a2a06043cd0b0880bbf270c958",
          subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],         
        });
        map.add(veccLayer);
        map.add(cvacLayer);
      });
    },
  },
};
</script>

<style scoped>
.viewBox {
  width: 100%;
  height: 600px;
}
</style>