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>