Arcgis+Vue加载天地图组件

天地图组件

组件需要传入Map和View对象以及默认图层类型，代码如下

<template>
  <div ref="baseMapContainer" class="block base-layer">
    <a-popover
      placement="right"
     >
      <a-row slot="content">
        <a-col :span="8" >
          <div @click="changeType('vec')" :class="baseType==='vec'?'isActive':null">
            <a-card class="box-card" shadow="never" :body-style="{padding:'0'}" >
              <img src="@/assets/images/shiliang.png" class="shiliang" width="100%">
              <span class="map-type-name">矢量图</span>
            </a-card>
          </div>
        </a-col>
        <a-col :span="8" >
          <div @click="changeType('img')" :class="baseType==='img'?'isActive':null">
            <a-card class="box-card" shadow="never" :body-style="{padding:'0'}">
              <img src="@/assets/images/yingxiang.png" class="yingxiang" width="100%">
              <span class="map-type-name" >影像图</span>
            </a-card>
          </div>
        </a-col>
        <a-col :span="8">
          <div @click="changeType('ter')" :class="baseType==='ter'?'isActive':null">
            <a-card  class="box-card" shadow="never" :body-style="{padding:'0'}">
              <img src="@/assets/images/dixing.png" class="dixing" width="100%"  >
              <span class="map-type-name">地形图</span>
            </a-card>
          </div>
        </a-col>
      </a-row>
      <a-button title='底图' style='width: 32px' icon='global'></a-button>
      <svg-icon slot="reference" icon-class="international"  style="width:30px;height:30px;color:#1890ff"/>
    </a-popover>
  </div>
</template>

<script>

import { loadModules } from "esri-loader";

export default {
  name: "ArcgisMapBaseLayer",
  props:{
    // 底图类型
    baseMapType:{
      type:String,
      default:()=>"vec"
    },
    map:{
      type:Object
    },
    view:{
      type:Object,
      default:()=>null
    }
  },
  data(){
    return {
      baseType:null,
      subDomains:["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
    }
  },
  watch:{
    "view":{
      handler:function (newVal) {
        this.view = newVal;
        this.view.ui.add(this.$refs.baseMapContainer, 'bottom-right')
        this.baseType=this.baseMapType
        this.initBaseMap()
      },
      deep:false
    }
  },
  methods:{
    changeType(val){
      this.baseType=val
      this.createBaseMap(val)
    },
    // 初始化底图
    initBaseMap(){
      this.createBaseMap(this.baseMapType);
    },
    // 创建底图
    createBaseMap(type){
      loadModules([
        "esri/layers/support/TileInfo",
        "esri/layers/WebTileLayer",
        "esri/Basemap",
        "esri/geometry/Extent"
      ],this.$option).then(([TileInfo,WebTileLayer,Basemap,Extent]) => {
        if(!this.map)return;
        let tileInfo = new TileInfo({
          dpi: 96,
          rows: 256,
          cols: 256,
          compressionQuality: 0,
          origin: {
            x: -180,
            y: 90
          },
          spatialReference: {
            wkid: 4490
          },
          lods: [
            { level: 0, levelValue: 1, resolution: 0.703125, scale: 295497593.05875003 },
            { level: 1, levelValue: 2, resolution: 0.3515625, scale: 147748796.52937502 },
            { level: 2, levelValue: 3, resolution: 0.17578125, scale: 73874398.264687508 },
            { level: 3, levelValue: 4, resolution: 0.087890625, scale: 36937199.132343754 },
            { level: 4, levelValue: 5, resolution: 0.0439453125, scale: 18468599.566171877 },
            { level: 5, levelValue: 6, resolution: 0.02197265625, scale: 9234299.7830859385 },
            { level: 6, levelValue: 7, resolution: 0.010986328125, scale: 4617149.8915429693 },
            { level: 7, levelValue: 8, resolution: 0.0054931640625, scale: 2308574.9457714846 },
            { level: 8, levelValue: 9, resolution: 0.00274658203125, scale: 1154287.4728857423 },
            { level: 9, levelValue: 10, resolution: 0.001373291015625, scale: 577143.73644287116 },
            { level: 10, levelValue: 11, resolution: 0.0006866455078125, scale: 288571.86822143558 },
            { level: 11, levelValue: 12, resolution: 0.00034332275390625, scale: 144285.93411071779 },
            { level: 12, levelValue: 13, resolution: 0.000171661376953125, scale: 72142.967055358895 },
            { level: 13, levelValue: 14, resolution: 8.58306884765625e-005, scale: 36071.483527679447 },
            { level: 14, levelValue: 15, resolution: 4.291534423828125e-005, scale: 18035.741763839724 },
            { level: 15, levelValue: 16, resolution: 2.1457672119140625e-005, scale: 9017.8708819198619 },
            { level: 16, levelValue: 17, resolution: 1.0728836059570313e-005, scale: 4508.9354409599309 },
            { level: 17, levelValue: 18, resolution: 5.3644180297851563e-006, scale: 2254.4677204799655 },
            { level: 18, levelValue: 19, resolution: 2.68220901489257815e-006, scale: 1127.23386023998275 },
            { level: 19, levelValue: 20, resolution: 1.341104507446289075e-006, scale: 563.616930119991375 }
          ]
        });
        // 密钥
        let key = '自己申请的密钥'
        // 地图
        let mapUrl = "https://{subDomain}.tianditu.gov.cn/*/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=#&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" + key
        // 注记
        let mapWord = "https://{subDomain}.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" + key

        switch (type) {
          // 影像
          case 'img':
            mapUrl = mapUrl.replace('*','img_c')
            mapUrl = mapUrl.replace('#','img')
            mapWord = mapWord.replace('*','cva_c')
            break;
          // 矢量
          case 'vec':
            mapUrl = mapUrl.replace('*','vec_c')
            mapUrl = mapUrl.replace('#','vec')
            mapWord = mapWord.replace('*','cva_c')
            break;
          // 地形
          case 'ter':
            mapUrl = mapUrl.replace('*','ter_c')
            mapUrl = mapUrl.replace('#','ter')
            mapWord = mapWord.replace('*','cta_c')
            break;
        }

        let satelliteLayer = new WebTileLayer({
          urlTemplate: mapUrl,
          subDomains: this.subDomains,
          id: "天地图",
          tileInfo,
          spatialReference: { wkid: 4490 }
        })

         var anoBaseLayer = new WebTileLayer({
          urlTemplate: mapWord,
          subDomains: this.subDomains,
          id: "天地图注记",
          tileInfo,
          spatialReference: { wkid: 4490 }
        })
        
        // 切换天地图
        this.map.basemap = new Basemap({
          baseLayers:[satelliteLayer],
          referenceLayers: [anoBaseLayer]
        });
        this.view.extent = new Extent({
          xmin: 116.86880075600004,
          ymin: 36.78052494800005,
          xmax:117.45696335900004,
          ymax: 37.24691086200005,
          spatialReference: {
            wkid: 4490
          }
        });
      });
    }
  }
}
</script>

<style lang="scss" scoped>
  .isActive{
    .box-card{
      border: 2px solid #1890ff;
    }
     .map-type-name{
        background: #1890ff;
     }
  }
  .box-card{
    position: relative;
    margin:0 5px;
    width:78px;
    height:68px;
    border:none
  }
  .map-type-name{
    display: inline-block;
    position: absolute;
    background: rgba(0,0,0,.6);
    text-align: center;
    color: #fff;
    position: absolute;
    bottom: 0;
    left:0;
    font-size: 12px;
    border-top-right-radius: 3px;
  }
  .base-layer{
    position: absolute;
    bottom: 70px;
    right: 1px;
  }
</style>