Merge remote-tracking branch 'origin/master'

wangqi

2021-03-09 675f53b52844d1d368d71d966620ba698f24bcde

 src/components/LayerController/modules/LcBaseMap.vue

@@ -1,74 +1,99 @@
<template>
  <div class="inner-panel">
    <div v-for="item in basemapList" :key="item.code" class="basemap-layer-item">
      <img :src="item.conf.icon_actived" width="50" height="50" :title="item.name"/>
      <input type="radio" name="basemap" v-model="selectedBasemap" :value="item.code" title="显示标注" @change="changeBasemap"/>
  <div class="base-map-inner-panel" v-show="isShow">
    <div  style="display: flex;" v-for="item in basemapList" :key="item.code" class="basemap-layer-item">
        <img class="base-map-img" :src="item.conf.icon_actived" width="50" height="50" :title="item.name"
             @click="changeBasemap(item)"/>
        <el-checkbox  class="base-map-anno" name="basemap" v-model="item.conf.annotationCheck"
                     label="标注" @change="changeBasemap(item)">
        </el-checkbox>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "LcBaseMap",
  name: 'LcBaseMap',
  components: {},
  data() {
  data () {
    return {
      basemapList: [],
      selectedBasemap: "tianditu_img",
    };
      isShow: true,
      currentBaseMapCode: 'tianditu_img',
      basemapList: []
    }
  },
  computed: {
    ...mapState({
      basemapHelper: (state) => {
        return state.basemapHelper;
      },
    }),
    basemapHelper () {
      return this.$store.state.map.basemapHelper
    }
  },
  mounted() {
    // console.log('03步骤：', this.helper)
  mounted () {
  },
  methods: {
    ...mapMutations([]),
    updateBasemapList() {
      let list = this.basemapHelper.getBasemapList();
      this.basemapList = list;
    updateBasemapList () {
      this.basemapList = this.basemapHelper.getBasemapList()
    },
    changeBasemap() {
      this.basemapHelper.showBasemap(this.selectedBasemap, true)
    },
    changeBasemap (itm) {
      const code = itm.code
      this.basemapList.forEach((item) => {
        if (item.code === code) {
          console.log(this.currentBaseMapCode)
          if (this.currentBaseMapCode == null || this.currentBaseMapCode !== code) {
            this.currentBaseMapCode = code
            this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, true)
          } else {
            this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, false)
          }

          this.basemapHelper.getBasemapList().forEach((item) => {
            item.layer.bringToBack()
          })
        }
      })
    }
  },
  watch: {
    basemapHelper(newVal) {
    basemapHelper (newVal) {
      if (newVal != null) {
        this.updateBasemapList();
        this.updateBasemapList()
      }
    },
  },
};
    }
  }
}
</script>

<style scoped lang="less">
.inner-panel {
<style lang="less">
.base-map-inner-panel {
  display: flex;
  justify-content: center;
  align-items: center;
}
.basemap-layer-item {
  width: 50px;
  height: 50px;
  margin: 10px;
  border: 2px solid white;

  input {
    position: relative;
    left: 0px;
    top: -53px;
  .base-map-img{
    position: absolute;
  }
  .basemap-layer-item-name {
    position: relative;
    left: 0px;
    top: -53px;
  .base-map-img:hover{
     cursor:pointer;
  }
  .base-map-anno{
    position: absolute;margin-left: 2px;background-color: rgba(0,0,0,.5);color: white;
    .el-checkbox__label{
      padding-left: 5px !important;
    }
  }
  .basemap-layer-item {
    display: flex;
    width: 50px;
    height: 50px;
    margin: 10px;
    border: 2px solid white;
    input {
      position: relative;
      left: 0;
      top: -53px;
    }
    .basemap-layer-item-name {
      position: relative;
      left: 0;
      top: -53px;
    }
  }
}
</style>