vue中，使用 maptalks+天地图 进行矢量影像底图切换

话不多说，直接上代码：

样式的话需要改，这里我就不改了

<template>
  <div class="container">
    <div id="map" class="map"> </div>
    <div class="btn">
      <el-button type="primary" @click="addVector">添加矢量地图</el-button>
      <el-button type="primary" @click="addImage">添加影像地图</el-button>
      <el-button type="primary" @click="remove">清除地图</el-button>
    </div>
  </div>
</template>


<script setup>
import * as maptalks from 'maptalks-gl'; // 安装 npm i maptalks-gl
import { onMounted, ref, nextTick } from 'vue'
const TDT_ID = ''; // 天地图的key 自己在天地图官网中申请
const imageURL= `http://t0.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TDT_ID}`; // 天地图影像底图
let map = ref(null);
let layer = ref(null);
let layer1 = ref(null);
let layer2 = ref(null);


onMounted(() => {
  nextTick(() => {
    initMap()
    addVector()
  })
})

function addVector () { // 添加矢量地图
  remove()
  const baseLayer = new maptalks.TileLayer('tile', { // 创建天地图矢量底图
    tileSystem: [1, -1, -180, 90],
    urlTemplate:
      `http://t0.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TDT_ID}`,
    subdomains: ['1', '2', '3', '4', '5'],
  })
  const baseLayer1 = new maptalks.TileLayer('base1', { // 创建天地图矢量注记
    tileSystem: [1, -1, -180, 90],
    urlTemplate: `http://t{s}.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TDT_ID}`,
    subdomains: ['1', '2', '3', '4', '5'],
    zindex: 999
  })
  layer.value = baseLayer.addTo(map.value)  // 设置底图
  layer1.value = baseLayer1.addTo(map.value) // 添加注记
}
function addImage () { // 添加影像地图
  remove()
  const baseLayer = new maptalks.TileLayer('tile2', { // 创建天地图影像底图
    tileSystem: [1, -1, -180, 90],
    urlTemplate: imageURL,
    subdomains: ['1', '2', '3', '4', '5'],
  })
  layer2.value = baseLayer.addTo(map.value)
}
function remove () {
  /**
   * 第一种 清除地图
   * 根据 layer 的 id 来删除
   *
  */
  // map.value.removeLayer('tile')
  // map.value.removeLayer('base1')
  // map.value.removeLayer('tile2')

  /**
   * 第二种 清除地图 (推荐)
   * 根据 layer 的实例来删除
   *
  */
  if (layer.value) {
    layer.value.remove()
    layer.value = null
  }
  if (layer1.value) {
    layer1.value.remove()
    layer1.value = null
  }
  if (layer2.value) {
    layer2.value.remove()
    layer2.value = null

  }

}

function initMap () {
  map.value = new maptalks.Map("map", {
    center: [120.15599175, 31.38962968],
    zoom: 9.5,
    minZoom: 8, // 最小级别
    maxZoom: 17.8, //最大级别
    doubleClickZoom: false, // 禁用双击放大功能
    attribution: true, //属性控制
    spatialReference: {
      projection: 'EPSG:4326',
    },
  });
}
</script>
<style lang="scss" scoped>
.container {
  height: calc(100vh - 150px);
  position: relative;
  .map {
    width: 100%;
    height: 100%;
  }
}
</style>