高德地图 自定义控件 图层切换（卫星、默认）

在自定义的控件中点击事件来主动切换地图 图层先看效果图

 一。添加自定义的控件 定位在地图的某个位置

  <!-- 控件 -->
    <div class="contron_box">
      <div
        v-for="item in control_list"
        :key="item.index"
        class="c_items"
        @tap="getControl(item)"
      >
        <view style="font-size: 16px" :class="['cuIcon-' + item.cuIcon]"></view>
        <p>{{ item.name }}</p>
      </div>
    </div>
    <!-- 弹窗 -->
    <Modal
      :modalName="modalName"
      :chooseMap="chooseMap"
      :title="title"
      @hideModal="hideModal"
      @changeMap="changeMap"
    ></Modal>

二：弹窗内部 （active1，active2是为了添加选中的样式 可优化）

 <view class="chooseImg" v-if="chooseMap">
          <image
            :class="[active1 ? 'active1' : '', 'empty-icon']"
            src="/static/city1.png"
            mode="aspectFill"
            @tap="checkMap('city')"
          />
          <image
            :class="[active2 ? 'active2' : '', 'empty-icon']"
            src="/static/star.png"
            mode="aspectFill"
            @tap="checkMap('')"
          />
        </view>

三.主要内容（事件处理，图层切换）

（控件子组件）

    checkMap(type) {
      if (type && type == "city") {
        this.active1 = !this.active1;
        this.active2 = false;
        this.$emit("changeMap", "city");
      } else {
        this.active2 = !this.active2;
        this.active1 = false;
        this.$emit("changeMap", "star");
      }
    },

（父组件创建的map，在这里切换图层）

changeMap(type){
		// 创建一个默认的图层组件
		let defaultLayer = new AMap.TileLayer();
		// 创建一个卫星图图层组件
		let satelliteLayer = new AMap.TileLayer.Satellite();
		// 将默认图层添加到地图中
		this.map.add(defaultLayer);
		 // 获取当前地图显示的图层
		 let currentLayer = this.map.getLayers()[0]; // 假设默认图层在第一个位置
		// 切换图层
		if(type=='city'){
			//获取地图图层数据
			this.map.setLayers([defaultLayer]); // 切换回默认图层
		}else{
			this.map.setLayers([satelliteLayer]); // 切换到卫星图图层
		}
	},