派生自 wuyushui/SewerAndRainNetwork
src/components/panel/ToolBoxPanel.vue
@@ -5,29 +5,36 @@ <img src="@assets/images/map-pages/icon/toolbox/tool.png" alt=""> <span>工具</span> </el-button> <transition name="isD"> <el-row v-show="selectGroup" class="specific-tools-group"> <el-popover placement="bottom" width="" trigger="click" :popper-class="'tools-panel-content'" v-for="(item,index) in menuList" :key="index" > <el-button slot="reference" class="el-button" :class="active === index ? 'tools-panel-choose':''" @click="changeChoose(index)"> <img :src="item.icon" alt=""/> <span>{{ item.label }}</span> </el-button> <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT)"> <img :src="itemT.icon" :title="itemT.title"/> </el-button> </el-popover> <el-button @click="changeSelect" class="special-button"> <i :class="selectGroup === false ? 'el-icon-d-arrow-right':'el-icon-d-arrow-left'"></i> <el-row v-show="selectGroup" class="specific-tools-group"> <el-popover placement="bottom" width="100%" trigger="click" :popper-class="'tools-panel-content'" v-for="(item,index) in menuList" :key="index" > <el-button slot="reference" class="el-button" :class="active === index ? 'tools-panel-choose':''" @click="changeChoose(index)"> <img :src="item.icon" alt=""/> <span>{{ item.label }}</span> </el-button> </el-row> </transition> <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT)" v-show="item.index!=='2'"> <img :src="itemT.icon" :title="itemT.title" v-show="item.index!=='2'"/> </el-button> <div class="base-map-inner-panel" v-show="!isShow&&item.index==='2'"> <div v-for="item in basemapList" :key="item.code" class="basemap-layer-item"> <img class="base-map-img" width="50" height="50" :src="item.conf.icon_actived" :title="item.name" @click="changeBasemap(item)"/> <el-checkbox class="base-map-anno" name="basemap" v-model="item.conf.annotationCheck" label="标注" @change="changeBasemap(item)"> </el-checkbox> </div> </div> </el-popover> <el-button @click="changeSelect" class="special-button"> <i :class="selectGroup === false ? 'el-icon-d-arrow-right':'el-icon-d-arrow-left'"></i> </el-button> </el-row> </div> </div> </template> @@ -44,9 +51,15 @@ import polygonJ from '@assets/images/map-pages/icon/toolbox/polygon.png' import polygonS from '@assets/images/map-pages/icon/toolbox/ju.png' import polygonY from '@assets/images/map-pages/icon/toolbox/circle.png' import del from '@assets/images/map-pages/icon/toolbox/del.png' // 选中的内容图片 import distanceChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/juliceliangmark.png' import mmChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/mianjiceliangmark.png' import delChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/shanchu.png' // 测量 import distance from '@assets/images/map-pages/icon/toolbox/juli.png' import distance from '@assets/images/map-pages/icon/toolbox/jusli.png' import mm from '@assets/images/map-pages/icon/toolbox/M2.png' // 测量的方法 @@ -57,6 +70,9 @@ // components: { BaseNavMenuItem }, data () { return { isShow: true, currentBaseMapCode: 'tianditu_img', basemapList: [], menuList: [ { icon: plot, @@ -104,13 +120,22 @@ index: '3-1', label: '距离', icon: distance, title: '距离测量' title: '距离测量', iconChoose: distanceChoose }, { index: '3-2', label: '面积', icon: mm, title: '面积测量' title: '面积测量', iconChoose: mmChoose }, { index: '3-3', label: '清除', icon: del, title: '清除测量', iconChoose: delChoose } ] }, @@ -179,13 +204,46 @@ ], selectGroup: false, drawLayer: null, Draw: null, map: null, L: window.L, active: 0, isShow: true active: 0 } }, computed: { basemapHelper () { return this.$store.state.map.basemapHelper } }, watch: { basemapHelper (newVal) { if (newVal != null) { this.updateBasemapList() } } }, methods: { updateBasemapList () { this.basemapList = this.basemapHelper.getBasemapList() }, changeBasemap (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() }) } }) }, changeChoose (index) { this.active = index }, @@ -218,6 +276,9 @@ break case '面积': Measure.startMeasureArea(this.map, this.L) break case '清除': Measure.clearMeasure(this.map, this.L) break case '全屏': // this.map.toggleFullscreen() @@ -340,6 +401,12 @@ height: 45px; background: @background-color-tools; border: none; .base-map-img{ position: absolute; } .base-map-img:hover{ cursor:pointer; } img { width: 22px; @@ -355,6 +422,44 @@ .specific-tools-group { z-index: 1; //.tools-panel-content { // width:220px!important; //} .base-map-inner-panel { display: flex; justify-content: center; align-items: center; .base-map-img{ position: absolute; } .base-map-img-Tool:hover{ cursor:pointer; } .base-map-anno-Tool{ 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; } } } .tools-panel-choose { border: none; box-shadow: 0 0 0.03rem @color-shadow;
