vue 加载天地图

<template>
  <div id="viewDiv"></div>
</template>
  
<script>
import { loadModules } from "esri-loader";
 
export default {
  data() {},
  methods: {
    //创建地图
    createMapView: function () {
      const options = {
        url: " /api/arcgis/API/4.15/init.js",
        css: "/api/arcgis/API/4.15/esri/themes/light/main.css",
      };
      // esriConfig.request.corsEnabledServers.push("localhost:80/arcgis/API/4.15/")
      loadModules(
        ["esri/Map", "esri/views/MapView", "esri/layers/WebTileLayer"],
        options
      )
        .then(([Map, MapView, WebTileLayer]) => {
          var tiledLayer = new WebTileLayer({
            urlTemplate:
              "http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=aeae35f8750027dc9790a7437c5ec3c0",
            subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
          });
 
          var tiledLayer_poi = new WebTileLayer({
            urlTemplate:
              "http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=aeae35f8750027dc9790a7437c5ec3c0",
            subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
          });
 
          var map = new Map({
            basemap: {
              baseLayers: [tiledLayer, tiledLayer_poi],
            },
          });
 
          var view = new MapView({
            container: "viewDiv",
            map: map,
            zoom: 12,
            center: [116.402544, 39.915599],
          });
 
          //   view.ui.components = []; //清除掉地图左上角默认的缩放图标
        })
        .catch((err) => {
          this.$message("地图创建失败，" + err);
        });
    },
  },
  mounted: function () {
    this.createMapView();
  },
};
</script>
  
<style>
#viewDiv {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>