底图切换组件开发完成

wangrui

2020-12-23 3eda2a49edc60f3961604223f557dcd6ab6db94f

 src/components/LayerController/modules/LcBaseMap.vue

@@ -1,40 +1,74 @@
<template>
<div class="inner-panel">
  <div class="inner-panel">
    <div v-for="item in basemapList" :key="item.code" class="basemap-layer-item">
        <img src="" width="40" height="40" :title="item.name"/>
        <input type="checkbox" title="显示标注" />
      <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>
</div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: 'LcBaseMap',
  name: "LcBaseMap",
  components: {},
  porps:['helper'],
  data() {
    return {
        basemapList:[]
    }
      basemapList: [],
      selectedBasemap: "tianditu_img",
    };
  },
  mounted(){
    console.log('03步骤：', this.helper)
  computed: {
    ...mapState({
      basemapHelper: (state) => {
        return state.basemapHelper;
      },
    }),
  },
  methods:{

  }
}
  mounted() {
    // console.log('03步骤：', this.helper)
  },
  methods: {
    ...mapMutations([]),
    updateBasemapList() {
      let list = this.basemapHelper.getBasemapList();
      this.basemapList = list;
    },
    changeBasemap() {
      this.basemapHelper.showBasemap(this.selectedBasemap, true)
    },
  },
  watch: {
    basemapHelper(newVal) {
      if (newVal != null) {
        this.updateBasemapList();
      }
    },
  },
};
</script>

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

  input {
    position: relative;
    left: 0px;
    top: -53px;
  }
  .basemap-layer-item-name {
    position: relative;
    left: 0px;
    top: -53px;
  }
}
</style>