| | |
| | | <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"> |
| | | <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 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> |
| | | </template> |
| | | |
| | | <script> |
| | | import { mapState, mapMutations } from "vuex"; |
| | | export default { |
| | | name: "LcBaseMap", |
| | | components: {}, |
| | | data() { |
| | | return { |
| | | isShow: true, |
| | | basemapList: [], |
| | | selectedBasemap: "tianditu_img", |
| | | }; |
| | | }, |
| | | computed: { |
| | | ...mapState({ |
| | | basemapHelper: (state) => { |
| | | return state.basemapHelper; |
| | | }, |
| | | }), |
| | | basemapHelper() { |
| | | return this.$store.state.map.basemapHelper |
| | | } |
| | | }, |
| | | mounted() { |
| | | // console.log('03步骤:', this.helper) |
| | | }, |
| | | methods: { |
| | | ...mapMutations([]), |
| | | toggleShow() { |
| | | this.isShow = !this.isShow |
| | | }, |
| | | updateBasemapList() { |
| | | let list = this.basemapHelper.getBasemapList(); |
| | | this.basemapList = list; |
| | |
| | | justify-content: center; |
| | | align-items: center; |
| | | } |
| | | |
| | | .basemap-layer-item { |
| | | display: flex; |
| | | width: 50px; |
| | | height: 50px; |
| | | margin: 10px; |
| | |
| | | left: 0px; |
| | | top: -53px; |
| | | } |
| | | |
| | | .basemap-layer-item-name { |
| | | position: relative; |
| | | left: 0px; |