<template>
|
<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)" alt=""/>
|
<el-checkbox class="base-map-anno" name="basemap" v-model="item.conf.annotationCheck"
|
label="标注" @change="changeBasemap(item)">
|
</el-checkbox>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
name: 'LcBaseMap',
|
components: {},
|
data () {
|
return {
|
isShow: true,
|
currentBaseMapCode: 'tianditu_img',
|
basemapList: []
|
}
|
},
|
computed: {
|
basemapHelper () {
|
return this.$store.state.map.basemapHelper
|
}
|
},
|
mounted () {
|
},
|
methods: {
|
updateBasemapList () {
|
this.basemapList = this.basemapHelper.getBasemapList()
|
// console.log(this.basemapList)
|
},
|
changeBasemap (itm) {
|
// console.log(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) {
|
if (newVal != null) {
|
this.updateBasemapList()
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.base-map-inner-panel {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.base-map-img{
|
position: absolute;
|
}
|
.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>
|
