vue 高德地图 切换图层

要在 Vue 中切换高德地图的图层，可以通过以下步骤实现：

1. 在 Vue 的 `mounted` 钩子函数中初始化地图：

mounted() {
  // 初始化地图
  this.map = new AMap.Map('map-container', {
    zoom: 10,
    center: [116.397428, 39.90923]
  });
}

2. 在模板中添加地图容器元素：

<template>
  <div id="map-container" style="height: 500px;"></div>
</template>

3. 添加一个切换图层的按钮，绑定点击事件：

<template>
  <div>
    <div id="map-container" style="height: 500px;"></div>
    <button @click="switchLayer">切换图层</button>
  </div>
</template>

4. 在 Vue 实例中添加 `switchLayer` 方法，用于切换图层：

methods: {
  switchLayer() {
    // 获取当前地图图层
    const currentLayer = this.map.getLayers()[0];
    // 切换到卫星图层
    if (currentLayer === this.satelliteLayer) {
      this.map.setLayers([this.roadNetLayer]);
    } else {
      // 切换到路网图层
      this.map.setLayers([this.satelliteLayer]);
    }
  }
}

5. 在 `mounted` 钩子函数中初始化卫星图层和路网图层，并将路网图层设置为默认图层：

mounted() {
  // 初始化地图
  this.map = new AMap.Map('map-container', {
    zoom: 10,
    center: [116.397428, 39.90923]
  });

  // 初始化卫星图层
  this.satelliteLayer = new AMap.TileLayer.Satellite();

  // 初始化路网图层
  this.roadNetLayer = new AMap.TileLayer({
    tileSize: 256,
    zooms: [3, 18],
    getTileUrl: (x, y, z) => {
      return `https://webst01.is.autonavi.com/appmaptile?style=7&x=${x}&y=${y}&z=${z}`;
    }
  });

  // 将路网图层设置为默认图层
  this.map.setLayers([this.roadNetLayer]);
}

这样就可以在 Vue 中实现切换高德地图的图层了。