vue3引入高德切换图层

Vue3中引入高德地图并切换图层通常涉及以下步骤：

1. 首先，你需要安装阿里的`vue-amap`库，它是基于高德地图的Vue组件化解决方案。你可以通过npm或yarn安装：

   npm install vue-amap --save

2. 在你的Vue项目里，创建一个map实例，并配置高德地图的基础设置，如中心位置、缩放级别等：

   import { AMap, Marker } from 'vue-amap';

   export default {
     components: {
       AMap,
       // 如果需要Marker组件，也需要导入
       Marker,
     },
     data() {
       return {
         map: null, // 初始化为空
         layers: [], // 图层列表
       };
     },
     mounted() {
       this.initMap();
     },
     methods: {
       initMap() {
         const map = new AMap.Map('container', {
           zoom: 10, // 初始缩放级别
           center: [116.404, 39.9], // 北京坐标
         });

         this.map = map; // 将地图实例绑定到data中

         // 添加图层示例
         if (this.layers.length > 0) {
           for (const layer of this.layers) {
             layer.setMap(map);
           }
         }
       },
       switchLayer(layerName) {
         // 根据传入的layerName切换对应图层显示或隐藏
         this.map.setCenterAndZoom(this.layers[layerName].getCenter(), this.layers[layerName].getZoom());
         this.layers.forEach((layer) => {
           if (layer.name !== layerName) {
             layer.setMap(null); // 隐藏其他图层
           }
         });
       },
     },
   };

3. 在`layers`数组中维护你的图层对象，每个对象应包含`setMap`方法以便添加到地图上。例如：

   layers: [
     { name: '基础图层', url: 'your_base_layer_url' },
     { name: '交通图层', url: 'your_traffic_layer_url' },
     // 更多图层...
   ],