效果图

上代码

toolber子组件代码

<template>
  <div class="card-toolber">
    <div class="item-for"
         v-for="(item, index) in dataList"
         :key="index"
         :class="{'select': item.id === selectId}"
         @click="clickItem(item)"
    >
      <div class="item-left" :class="{'select-left': item.id === selectId}" :style="{background:item.color,}"></div>
      <div class="item-right">{{ item.name }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">

import { onMounted, onUnmounted, ref, toRaw } from "vue"
import * as mapWork from "./map"

let myChart: any

const dataList = ref([
  {
    id: "gbznt",
    name: "高标准农田",
    color: "#D4933E",
    bool: true
  },
  {
    id: "luWang",
    name: "路网",
    color: "#FFFFFF",
    bool: true
  },
  {
    id: "heLiu",
    name: "河流",
    color: "#17DBFF",
    bool: true
  },
  {
    id: "shuiLu",
    name: "水路",
    color: "#019BFD",
    bool: true
  },
])
const selectId = ref("")

onMounted(() => {

})

onUnmounted(() => {
  // 销毁操作
})

const clickItem = (val: any) => {
  let bool = true
  const formData = toRaw(val)
  // bool.value = !bool.value
  selectId.value = formData.id

  let arr = dataList.value.map((e) => {
    if (e.id === formData.id) {
      bool = !formData.bool
      if (formData.bool) {
        e.color = "#646464"
        e.bool = false
      } else {
        if (formData.id === "gbznt") {
          e.color = "#D4933E"
        } else if (formData.id === "luWang") {
          e.color = "#FFFFFF"
        } else if (formData.id === "heLiu") {
          e.color = "#17DBFF"
        } else {
          e.color = "#019BFD"
        }
        e.bool = true
      }
    }
    return e
  })
  dataList.value = [...arr]
  mapWork.highStandard(formData, bool)
}

</script>

<style lang="less" scoped>
.card-toolber {
  position: absolute;
  right: 390px;
  bottom: 30px;
  width: 150px;
  height: 150px;
  z-index: 10000000;
  //background: rgba(5, 28, 50, 0.5);
  padding: 12px 12px;
  background-image: url("./img/toolber-icon.png");
  background-repeat: no-repeat;
  background-position: center;
  //background-size: contain;
  background-size: 150px 150px;
  .item-for {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 6px;
    padding-left: 4px;

    .item-left {
      width: 12px;
      height: 10px;
      background: #D4933E;
      border-radius: 2px;
      margin-right: 12px;
      &.select-left{
        background: #cccccc;
      }
    }

    .item-right {
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #FFFFFF;
    }

    &.select {
      color: #FFFFFF;
      background-color: rgba(204, 204, 204, 0.2);
      border-radius: 4px;
    }
  }
}
</style>

操作地图的js代码

export function highStandard(val: any, bool: any) {
  if (val.id === "gbznt") {
    switch (bool) {
      case false:
        removeHighStandard()
        break
      case true:
        highStandardList()
        break
    }
  } else if (val.id === "luWang") {
    switch (bool) {
      case false:
        removeNetwork()
        break
      case true:
        networkList()
        break
    }
  } else if (val.id === "heLiu") {
    switch (bool) {
      case false:
        removeStream()
        break
      case true:
        streamList()
        break
    }
  } else {
    switch (bool) {
      case false:
        removeWaterway()
        break
      case true:
        waterwayList()
        break
    }
  }
}