Vue项目添加arcgis地图叠加天地图（一）

1.先通过npm把库先搞下来 npm install --save esri-loader
2.导入import * as esriLoader from ‘esri-loader’
3.添加地图的核心代码如下：
在需要添加地图的Vue文件中导入
import { loadModules } from “esri-loader”;

mounted() {
            // lazy load the required ArcGIS API for JavaScript modules and CSS
            loadModules(["esri/layers/WebTileLayer", "esri/Map", "esri/views/SceneView"], { css: true , 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 = "xxxxx"; //天地图管网申请token
                    const map = new Map({
                        basemap: 'topo-vector',
                        ground: "world-elevation",
                        logo: false,
                    });
                    this.view = new SceneView({
                    //这个是让地图显示在id为map_contentView的标签上，是id叫他不是其他的
                        container: 'map_contentView',
                        map: map,
                        center: [120.52, 31.53],
                        zoom: 8,
                    });
                    //球面墨卡托投影矢量底图
                    var tiledLayer = new  WebTileLayer({
                        urlTemplate:tiandituBaseUrl+'/DataServer?T=img_w/wmts&x={col}&y={row}&l={level}&tk='+token,
                        subDomains:["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
                    });
                    //矢量标注(球面墨卡托投影)
                    var tiledLayerAnno = new WebTileLayer({
                        urlTemplate: tiandituBaseUrl + "/DataServer?T=cia_w?T=vec_c/wmts&x={col}&y={row}&l={level}&tk=" +token,
                        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
                    });
                    //将天地图底图添加到map上
                    map.add(tiledLayer);
                    //标注添加到map上
                    map.add(tiledLayerAnno);

                });
        },
        beforeDestroy() {
            if (this.view) {
                // destroy the map view
                this.view.container = null;
            }
        }