| | |
| | | <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> |
| | |
| | | components: {}, |
| | | data() { |
| | | return { |
| | | isShow: true, |
| | | basemapList: [], |
| | | selectedBasemap: "tianditu_img", |
| | | }; |
| | |
| | | mounted() { |
| | | }, |
| | | methods: { |
| | | toggleShow() { |
| | | this.isShow = !this.isShow |
| | | }, |
| | | 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> |
| | | |
| | |
| | | justify-content: center; |
| | | align-items: center; |
| | | } |
| | | |
| | | .basemap-layer-item { |
| | | display: flex; |
| | | width: 50px; |
| | |
| | | left: 0px; |
| | | top: -53px; |
| | | } |
| | | |
| | | .basemap-layer-item-name { |
| | | position: relative; |
| | | left: 0px; |