派生自 wuyushui/SewerAndRainNetwork
src/components/panel/ToolBoxPanel.vue
@@ -1,9 +1,13 @@ <template> <div class="left-top-toolbox-panel"> <div class="specific-tools"> <el-button @click="changeSelect"> <el-button @click="changeSelect" v-show="selectGroup"> <img src="@assets/images/map-pages/icon/toolbox/tool.png" alt=""> <span>工具</span> </el-button> <el-button @click="changeSelect" v-show="!selectGroup"> <img src="@assets/images/map-pages/icon/toolbox/Selecd/tool.png" alt=""> <a>工具</a> </el-button> <transition name="animationChange"> <el-row v-show="selectGroup" class="specific-tools-group"> @@ -16,11 +20,13 @@ > <el-button slot="reference" class="el-button" :class="active === index ? 'tools-panel-choose':''" @click="changeChoose(index)"> <img :src="item.icon" alt=""/> <img :src="item.iconSelecd" alt="" v-if="active === index"/> <img :src="item.icon" alt="" v-else/> <span>{{ item.label }}</span> </el-button> <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT,indexT)"> <img :src="itemT.icon" :title="itemT.title"/> <img :src="itemT.iconChoose" :title="itemT.title" v-if="Selecd === indexT"/> <img :src="itemT.icon" :title="itemT.title" v-else/> </el-button> </el-popover> <el-button @click="changeSelect" class="special-button"> @@ -39,6 +45,12 @@ import location from '@assets/images/map-pages/icon/toolbox/ditu.png' import fullscreen from '@assets/images/map-pages/icon/toolbox/xiazai.png' // 导航选中的状态 import plotChooose from '@assets/images/map-pages/icon/toolbox/Selecd/biaohui.png' import polygonChooose from '@assets/images/map-pages/icon/toolbox/Selecd/celiang1.png' import locationChooose from '@assets/images/map-pages/icon/toolbox/Selecd/ditu.png' import dowloadChooose from '@assets/images/map-pages/icon/toolbox/Selecd/xiazai.png' // 标绘的可选择数据 import iconRefinery from '@assets/images/map-pages/local.png' @@ -49,15 +61,16 @@ import polygonY from '@assets/images/map-pages/icon/toolbox/circle.png' import del from '@assets/images/map-pages/icon/toolbox/del.png' // 选中的内容图片 // 标绘选中的内容图片 import markerChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/dingweimark.png' import lineChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/linemark.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 polygonJChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/liubianxing2mark.png' import polygonSChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/rectmark.png' import polygonYChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/circlemark.png' import delChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/shanchu.png' // 测量 import distance from '@assets/images/map-pages/icon/toolbox/jusli.png' import distance from '@assets/images/map-pages/icon/toolbox/juli.png' import mm from '@assets/images/map-pages/icon/toolbox/M2.png' // 测量的方法 @@ -65,12 +78,18 @@ export default { name: 'ToolBoxPanel', // components: { BaseNavMenuItem }, data () { return { selectGroup: false, active: -1, Selecd: -1, drawLayer: null, map: null, L: window.L, menuList: [ { icon: plot, iconSelecd: plotChooose, label: '标绘', index: '1', items: [ @@ -92,30 +111,35 @@ index: '1-4', label: '多边形', icon: polygonJ, title: '多边形' title: '多边形', iconChoose: polygonJChoose }, { index: '1-5', label: '矩形', icon: polygonS, title: '矩形' title: '矩形', iconChoose: polygonSChoose }, { index: '1-3', label: '圆形', icon: polygonY, title: '圆形' title: '圆形', iconChoose: polygonYChoose }, { index: '1-4', label: '删除', icon: del, title: '删除标绘' title: '删除标绘', iconChoose: delChoose } ] }, { icon: polygon, iconSelecd: polygonChooose, label: '测量', index: '3', items: [ @@ -123,27 +147,25 @@ index: '3-1', label: '距离', icon: distance, title: '距离测量', iconChoose: distanceChoose title: '距离测量' }, { index: '3-2', label: '面积', icon: mm, title: '面积测量', iconChoose: mmChoose title: '面积测量' }, { index: '3-3', label: '清除', icon: del, title: '清除测量', iconChoose: delChoose label: '删除', icon: '', title: '删除' } ] }, { icon: location, iconSelecd: locationChooose, label: '地图', index: '2', items: [ @@ -181,6 +203,7 @@ }, { icon: fullscreen, iconSelecd: dowloadChooose, label: '下载', index: '4', items: [ @@ -204,23 +227,23 @@ } ] } ], selectGroup: false, active: -1, drawLayer: null, Draw: null, map: null, L: window.L ] } }, methods: { changeChoose (index) { this.active = index if (this.drawLayer == null) { this.drawLayer = this.L.layerGroup().addTo(this.map) } }, changeSelect () { this.selectGroup = !this.selectGroup }, choiceItem (itemT) { choiceItem (itemT, indexT) { this.Selecd = indexT // eslint-disable-next-line no-unused-vars const layerGroups = [] switch (itemT.label) { case '点标绘': var myIcon = this.L.icon({ @@ -229,29 +252,42 @@ iconAnchor: [13, 16], popupAnchor: [26, -32] }) this.drawLayer = this.map.editTools.startMarker() this.drawLayer.setIcon(myIcon) // eslint-disable-next-line no-case-declarations const drawLayer = this.map.editTools.startMarker() drawLayer.setIcon(myIcon) this.drawLayer.addLayer(drawLayer) this.drawLayer.addLayer(this.setLogic(drawLayer)) break case '线标绘': this.drawLayer = this.map.editTools.startPolyline() // eslint-disable-next-line no-case-declarations const drawLayerLine = this.map.editTools.startPolyline() this.drawLayer.addLayer(drawLayerLine) this.setLogic(drawLayerLine) break case '多边形': this.drawLayer = this.map.editTools.startPolygon() var drawLayerPolygonD = this.map.editTools.startPolygon() this.drawLayer.addLayer(drawLayerPolygonD) this.setLogic(drawLayerPolygonD) break case '矩形': this.drawLayer = this.map.editTools.startRectangle() var drawLayerPolygonJ = this.map.editTools.startRectangle() this.drawLayer.addLayer(drawLayerPolygonJ) this.setLogic(drawLayerPolygonJ) break case '圆形': this.drawLayer = this.map.editTools.startCircle() // eslint-disable-next-line no-case-declarations const drawLayerPolygonY = this.map.editTools.startCircle() this.drawLayer.addLayer(drawLayerPolygonY) this.setLogic(drawLayerPolygonY) break case '删除': this.drawLayer.clearLayers() break case '距离': Measure.startMeasureLen(this.map, this.L) break case '面积': Measure.startMeasureArea(this.map, this.L) break case '清除': Measure.clearMeasure(this.map, this.L) break case '全屏': // this.map.toggleFullscreen() @@ -261,7 +297,7 @@ exportOnly: true, hideControlContainer: true }).addTo(this.map) printer.printMap('CurrentSize', 'MyManualPrint') printer.printMap('CurrentSize', '全屏') break case 'A4横向': var printerX = this.L.easyPrint({ @@ -270,7 +306,7 @@ exportOnly: true, hideControlContainer: true }).addTo(this.map) printerX.printMap('A4Landscape page', 'MyManualPrint') printerX.printMap('A4Landscape page', '横向') break case 'A4纵向': var printerY = this.L.easyPrint({ @@ -279,18 +315,14 @@ exportOnly: true, hideControlContainer: true }).addTo(this.map) printerY.printMap('A4Portrait page', 'MyManualPrint') break case '删除': this.map.removeLayer(this.drawLayer) printerY.printMap('A4Portrait page', '纵向') break } this.drawLayer.on('dblclick', this.L.DomEvent.stop).on('dblclick', this.drawLayer.toggleEdit) this.drawLayer.setStyle({ color: 'red', fillColor: '#ffffff', fillOpacity: 0.1, fill: true }, setLogic (layer) { layer.on('dblclick', this.L.DomEvent.stop).on('dblclick', layer.toggleEdit) layer.setStyle({ color: 'red' }) } } @@ -334,6 +366,11 @@ display: block; color: @color-tool; } a { display: block; color: @color-shadow; } } .specific-tools-group {
