<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>

　　需要esri-loader（npm i esri-loader--save-dev）

　　tk：去天地圖註冊，建立瀏覽器端應用即可獲得

　　/api/為http://localhost:80/，解決跨域

　　t0-t7：天地圖地圖服務二級域名

參考