顶部表单

徐旺旺

2021-01-05 bb63e626e2222227cceb9b7a7e2ed4b632af3aa4

 src/components/LayerController/modules/LcBaseMap.vue

@@ -1,14 +1,20 @@
<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"/>
      <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>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "LcBaseMap",
  components: {},
@@ -19,17 +25,13 @@
    };
  },
  computed: {
    ...mapState({
      basemapHelper: (state) => {
        return state.basemapHelper;
      },
    }),
    basemapHelper() {
      return this.$store.state.map.basemapHelper
    }
  },
  mounted() {
    // console.log('03步骤：', this.helper)
  },
  methods: {
    ...mapMutations([]),
    updateBasemapList() {
      let list = this.basemapHelper.getBasemapList();
      this.basemapList = list;
@@ -37,14 +39,8 @@
    changeBasemap() {
      this.basemapHelper.showBasemap(this.selectedBasemap, true)
    },
  },
  watch: {
    basemapHelper(newVal) {
      if (newVal != null) {
        this.updateBasemapList();
      }
    },
  },
  }

};
</script>

@@ -55,6 +51,7 @@
  align-items: center;
}
.basemap-layer-item {
  display: flex;
  width: 50px;
  height: 50px;
  margin: 10px;