派生自 wuyushui/SewerAndRainNetwork

YANGDL
2021-01-05 77f7281ff7cee541aaa51339512e6443b7d89e42
src/components/LayerController/modules/LcBaseMap.vue
@@ -1,14 +1,16 @@
<template>
  <div class="inner-panel">
  <div class="inner-panel" v-show="isShow">
    <div v-for="item in basemapList" :key="item.code" class="basemap-layer-item">
      <el-checkbox style="position: absolute;" name="basemap" v-model="selectedBasemap"   :value="item.code" label="item.code" @change="changeBasemap">标注</el-checkbox>
<!--      <el-popover-->
<!--          placement="top-start"-->
<!--          trigger="hover"-->
<!--          content="item.name">-->
      <img :src="item.conf.icon_actived" width="50" height="50" :title="item.name" @click="changeBasemap"/>
<!--      </el-popover>-->
<!--      <input  style="position: absolute;" type="radio" name="basemap" v-model="selectedBasemap" :value="item.code" title="显示标注" @change="changeBasemap"/>标注-->
      <div style="display: flex;">
        <el-checkbox :src="item.conf.icon_actived" style="display: flex;" name="basemap" v-model="selectedBasemap"
                     :value="item.code" label="item.code" @change="changeBasemap">标注
        </el-checkbox>
        <img style="position: absolute;" :src="item.conf.icon_actived" width="50" height="50" :title="item.name"
             @click="changeBasemap"/>
      </div>
      <!--      <input  style="position: absolute;" type="radio" name="basemap" v-model="selectedBasemap" :value="item.code" title="显示标注" @change="changeBasemap"/>标注-->
    </div>
  </div>
@@ -20,6 +22,7 @@
  components: {},
  data() {
    return {
      isShow: true,
      basemapList: [],
      selectedBasemap: "tianditu_img",
    };
@@ -32,6 +35,9 @@
  mounted() {
  },
  methods: {
    toggleShow() {
      this.isShow = !this.isShow
    },
    updateBasemapList() {
      let list = this.basemapHelper.getBasemapList();
      this.basemapList = list;
@@ -39,8 +45,14 @@
    changeBasemap() {
      this.basemapHelper.showBasemap(this.selectedBasemap, true)
    },
  }
  },
  watch: {
    basemapHelper(newVal) {
      if (newVal != null) {
        this.updateBasemapList();
      }
    },
  },
};
</script>
@@ -50,6 +62,7 @@
  justify-content: center;
  align-items: center;
}
.basemap-layer-item {
  display: flex;
  width: 50px;
@@ -62,6 +75,7 @@
    left: 0px;
    top: -53px;
  }
  .basemap-layer-item-name {
    position: relative;
    left: 0px;