ol点击切换矢量、影像、地形图层

根据之前添加的图层进行切换https://blog.csdn.net/ssy001128/article/details/129681657?spm=1001.2014.3001.5501【代码】ol加载wmts切片服务/xyz服务地图。https://blog.csdn.net/ssy001128/article/details/129681657?spm=1001.2014.3001.5501

<template>
    <div class="layer-control-container">
      <div
        v-for="item of list"
        :key="item.id"
        class="layer"
        :class="{active: item.id === currentLayerId}"
          @click.stop="changeBaseLayer(item.id)"
      >
      </div>
    </div>
</template>

<script>
export default {
  name: "LayerControlContainer",
  components: {

  },
  mixins: [

  ],
  props: {
    map: {
      required: true,
      type: Object
    }
  },
  data() {
    return {
      currentLayerId: "RASTER", // 默认影像
      list: [
        {
          name: "影像",
          id: "RASTER"
        },
        {
          name: "矢量",
          id: "VECTOR"
        },
        {
          name: "地形",
          id: "TOPOGRAPHY"
        }
      ],
    
    };
  },
  computed: {

  },
  watch: {
    currentLayerId(newId, oldId) {
      this.map.getLayerByProp("id", oldId)[0].setVisible(false);
      this.map.getLayerByProp("id", newId)[0].setVisible(true);
    },
   
  },
  mounted() {
  },
  methods: {
    changeBaseLayer(id) {
      this.currentLayerId = id;
    }
  }
};
</script>

<style lang="scss" scoped>
.layer-control-container {
  position: absolute;
  z-index: 10;
  width: 380px;
  height: 88px;

  .layer {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 120px;
    height: 88px;
    transition: 0.5s transform;
    transform: translateX(0);
    cursor: pointer;
    &.active {
      z-index: 4;
       &:nth-of-type(1) {
      background: url('@/assets/img/image/img_yingxiang_p.png') no-repeat center / contain;
    }

    &:nth-of-type(2) {
      background: url('@/assets/img/image/img_shiliang_p.png') no-repeat center / contain;
    }

    &:nth-of-type(3) {
       background: url('@/assets/img/image/img_dixing_p.png') no-repeat center / contain;
    }
    }

    &:nth-of-type(1) {
      background: url('@/assets/img/image/img_yingxiang_n.png') no-repeat center / contain;
    }

    &:nth-of-type(2) {
      background: url('@/assets/img/image/img_shiliang_n.png') no-repeat center / contain;
    }

    &:nth-of-type(3) {
        background: url('@/assets/img/image/img_dixing_n.png') no-repeat center / contain;
    }
  }

  &:hover {
    .layer:nth-of-type(2) {
      transform: translateX(-130px);
    }

    .layer:nth-of-type(3) {
      transform: translateX(-260px);
    }
  }
}


</style>

 使用时 将地图引进去

<layer-control :map="map" :style="mapTcPositionData.tcqh"/>