高德地图 vue 切换viewMode 2d 3d

在高德地图 JavaScript API 中，可以使用 `setMapStyle()` 方法切换地图的视图模式。该方法接受一个参数，用于指定地图的样式。

要切换到 2D 视图模式，可以将参数设置为 `'amap://styles/normal'`。要切换到 3D 视图模式，可以将参数设置为 `'amap://styles/graffiti'`。

在 Vue 中使用高德地图，可以先在 `mounted` 钩子函数中初始化地图，然后在需要切换视图模式的方法中调用 `setMapStyle()` 方法。

以下是一个示例代码：

<template>
  <div id="map" style="height: 500px;"></div>
  <button @click="switchViewMode">切换视图模式</button>
</template>

<script>
export default {
  mounted() {
    // 初始化地图
    this.map = new AMap.Map('map', {
      zoom: 13,
      center: [116.39, 39.9],
      viewMode: '3D' // 初始为 3D 视图模式
    });
  },
  methods: {
    switchViewMode() {
      // 切换视图模式
      const viewMode = this.map.getViewMode();
      if (viewMode === '3D') {
        this.map.setMapStyle('amap://styles/normal');
        this.map.setViewMode('2D');
      } else {
        this.map.setMapStyle('amap://styles/graffiti');
        this.map.setViewMode('3D');
      }
    }
  }
};
</script>

<style>
#map {
  width: 100%;
}
</style>

在上面的代码中，`switchViewMode()` 方法会根据当前地图的视图模式来切换到相应的模式，并使用 `setMapStyle()` 方法设置地图样式。按钮的点击事件会触发该方法，从而实现切换视图模式的功能。