Vue2初始化arcgis并添加天地图

arcgis官网

安装esri-loader

esri-loader官网

npm install --save esri-loader

or

yarn add esri-loader

初始化地图

//mixin.js

import { loadModules } from "esri-loader";
//密钥
import { MapConfig } from '@/./TDTKey';	

export const aboutMap = {
  data() {
    return {
      TDT_IMG_C: 'http://{subDomain}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=' + MapConfig.TDTKey,

      TDT_CIA_W: 'http://{subDomain}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=' + MapConfig.TDTKey,

    }
  },
  methods: {
    // 加载地图
    createView() {
      let options = {
      	url: "https://js.arcgis.com/4.26/",
        css: "https://js.arcgis.com/4.26/esri/themes/light/main.css"       
      };

      loadModules([
        "esri/Map",
        "esri/views/SceneView",
        "esri/layers/WebTileLayer"
      ], options).then(
        ([Map, SceneView, WebTileLayer]) => {
          const map = new Map({
            basemap: "",
          });

          const view = new SceneView({
            container: "SceneView",
            map: map,
            zoom: 11,
            center: [117.122375, 36.661649]
          });

          // 天地图底图
          const tiledLayer = new WebTileLayer({
            urlTemplate: this.TDT_IMG_C,
            subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
          });

          // 天地图注记
          const tiledLayer_z = new WebTileLayer({
            urlTemplate: this.TDT_CIA_W,
            subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
          });

          map.add(tiledLayer);
          map.add(tiledLayer_z);

          // 去除自带的组件
	      cViewer.ui.components = [];
	      // cViewer.ui.remove("zoom"); //清除放大缩小按钮
	      // cViewer.ui.remove("attribution"); //清除底部powered by ESRI
	      // cViewer.ui.remove("navigation-toggle"); //清除导航按钮
	      // cViewer.ui.remove("compass"); //清除罗盘仪
        }
      );


    }
  }
}

调用

<template>
  <div id="SceneView"></div>
</template>

<script>
import { aboutMap } from "@/mixin";
export default {
  mixins: [aboutMap],
  mounted() {
    this.createView()
  }
}
</script>

<style lang="scss" scoped> 
#SceneView{
  width: 100%;
  height: 100%;
}

// 隐藏底部版权信息
::v-deep .esri-ui-manual-container>.esri-component{
  display: none;
}
</style>