高德地图 vue 切换2d 3d

高德地图的 JavaScript API 提供了 `AMap.Map` 类来创建地图实例。在创建地图实例时，可以通过传递不同的参数来设置地图的属性，包括视觉效果模式。

要在 Vue 应用程序中使用高德地图，可以将 `AMap.Map` 类封装成 Vue 组件。以下是一个简单的例子：

<template>
  <div id="map-container">
    <div ref="map" style="width: 100%; height: 100%;"></div>
    <div class="switch-btn" @click="toggleMode">{{ modeText }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mode: '2D',
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 创建地图实例
      this.map = new AMap.Map(this.$refs.map, {
        zoom: 16,
        center: [116.397428, 39.90923],
        viewMode: '3D', // 默认为 3D 视觉效果模式
      });
    },
    toggleMode() {
      // 切换视觉效果模式
      this.mode = this.mode === '2D' ? '3D' : '2D';
      this.map.setFeatures(this.mode === '2D' ? ['road', 'building'] : ['road', 'building', 'satellite']);
    },
  },
  computed: {
    modeText() {
      return this.mode === '2D' ? '切换到 3D' : '切换到 2D';
    },
  },
};
</script>

<style>
#map-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.switch-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
}
</style>

在上面的代码中，我们创建了一个地图容器和一个切换按钮。初始时，地图使用 3D 视觉效果模式。当用户点击切换按钮时，我们会切换到 2D 视觉效果模式，并将地图的图层设置为只显示道路和建筑物。如果用户再次点击切换按钮，则会切换回 3D 视觉效果模式，并将地图的图层设置为显示卫星图像、道路和建筑物。

需要注意的是，在 Vue 应用程序中使用高德地图时，需要在 `mounted` 钩子函数中初始化地图，因为只有在组件挂载到 DOM 中之后，才能正确地获取容器元素的引用。同时，为了防止内存泄漏，需要在组件销毁时销毁地图实例。可以在 `beforeDestroy` 钩子函数中调用 `AMap.Map` 类的 `destroy` 方法来完成销毁操作。