From 2e3851441ff6186f1a117b5334b20c6595d71d14 Mon Sep 17 00:00:00 2001 From: zhangshuaibao <15731629597@163.com> Date: 星期四, 18 三月 2021 14:19:26 +0800 Subject: [PATCH] 完善测量功能的清除问题 --- src/components/panel/ToolBoxPanel.vue | 94 ++++++++++++++++++++++++++++------------------- 1 files changed, 56 insertions(+), 38 deletions(-) diff --git a/src/components/panel/ToolBoxPanel.vue b/src/components/panel/ToolBoxPanel.vue index 2fdb720..8c8347c 100644 --- a/src/components/panel/ToolBoxPanel.vue +++ b/src/components/panel/ToolBoxPanel.vue @@ -17,9 +17,10 @@ > <el-button slot="reference" class="el-button" :class="active === index ? 'tools-panel-choose':''" @click="changeChoose(index)"> - <img :src="item.iconSelecd" alt="" v-if="active === index"/> + <img :src="item.iconSelecd" alt="" v-if="active === index && checked"/> <img :src="item.icon" alt="" v-else/> - <span>{{ item.label }}</span> + <span v-if="active === index && checked">{{ item.label }}</span> + <span v-else class="default-span">{{ item.label }}</span> </el-button> <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT,indexT)" v-show="item.index!=='2'"> @@ -94,9 +95,12 @@ basemapList: [], selectGroup: false, drawLayer: null, + drawLayerArray: [], map: null, active: -1, Selecd: -1, + checked: false, + checkbutton: -1, menuList: [ { icon: plot, @@ -279,13 +283,20 @@ }) }, changeChoose (index) { - if (this.active === index) { - console.log('鍙栨秷褰撳墠閫変腑鐘舵��') - } - this.active = index if (this.drawLayer == null) { this.drawLayer = this.L.layerGroup().addTo(this.map) } + this.active = index + if (this.checkbutton === index) { + this.checked = !this.checked + } else { + if (this.checkbutton === -1) { + this.checked = !this.checked + } else { + this.checked = true + } + } + this.checkbutton = index }, choiceItem (itemT, indexT) { this.Selecd = indexT @@ -297,33 +308,35 @@ iconAnchor: [13, 16], popupAnchor: [26, -32] }) - var drawLayerMarker = this.map.editTools.startMarker() - drawLayerMarker.setIcon(myIcon) - this.drawLayer.addLayer(drawLayerMarker) - this.setLogic(drawLayerMarker) + this.drawLayer = this.map.editTools.startMarker() + this.drawLayer.setIcon(myIcon) + this.drawLayerArray.push(this.drawLayer) + this.drawLayer.on('dblclick', this.L.DomEvent.stop).on('dblclick', this.drawLayer.toggleEdit) break case '绾挎爣缁�': - var drawLayerLine = this.map.editTools.startPolyline() - this.drawLayer.addLayer(drawLayerLine) - this.setLogic(drawLayerLine) + this.drawLayer = this.map.editTools.startPolyline() + this.drawLayerArray.push(this.drawLayer) + this.setLogic() break case '澶氳竟褰�': - var drawLayerPolygonD = this.map.editTools.startPolygon() - this.drawLayer.addLayer(drawLayerPolygonD) - this.setLogic(drawLayerPolygonD) + this.drawLayer = this.map.editTools.startPolygon() + this.drawLayerArray.push(this.drawLayer) + this.setLogic() break case '鐭╁舰': - var drawLayerPolygonJ = this.map.editTools.startRectangle() - this.drawLayer.addLayer(drawLayerPolygonJ) - this.setLogic(drawLayerPolygonJ) + this.drawLayer = this.map.editTools.startRectangle() + this.drawLayerArray.push(this.drawLayer) + this.setLogic() break case '鍦嗗舰': - var drawLayerPolygonY = this.map.editTools.startCircle() - this.drawLayer.addLayer(drawLayerPolygonY) - this.setLogic(drawLayerPolygonY) + this.drawLayer = this.map.editTools.startCircle() + this.drawLayerArray.push(this.drawLayer) + this.setLogic() break case '鍒犻櫎': - this.drawLayer.clearLayers() + for (let i = 0; i < this.drawLayerArray.length; i++) { + this.map.removeLayer(this.drawLayerArray[i]) + } break case '娓呴櫎': Measure.clearMeasure(this.map, this.L) @@ -337,10 +350,9 @@ case '鍏ㄥ睆': // this.map.toggleFullscreen() var printer = this.L.easyPrint({ - sizeModes: ['Current', 'A4Landscape', 'A4Portrait'], - filename: 'map_image', exportOnly: true, - hideControlContainer: true + hideControlContainer: true, + hidden: true }).addTo(this.map) printer.printMap('CurrentSize', '鍏ㄥ睆') break @@ -349,7 +361,8 @@ sizeModes: ['Current', 'A4Landscape', 'A4Portrait'], filename: 'map_image', exportOnly: true, - hideControlContainer: true + hideControlContainer: true, + hidden: true }).addTo(this.map) printerX.printMap('A4Landscape page', '妯悜') break @@ -358,24 +371,27 @@ sizeModes: ['Current', 'A4Landscape', 'A4Portrait'], filename: 'map_image', exportOnly: true, - hideControlContainer: true + hideControlContainer: true, + hidden: true }).addTo(this.map) printerY.printMap('A4Portrait page', '绾靛悜') break } }, - setLogic (layer) { - layer.on('dblclick', this.L.DomEvent.stop).on('dblclick', layer.toggleEdit) - layer.setStyle({ - color: 'yellow' + setLogic () { + this.drawLayer.on('dblclick', this.L.DomEvent.stop).on('dblclick', this.drawLayer.toggleEdit) + this.drawLayer.setStyle({ + color: 'red' }) }, changeSelect () { this.selectGroup = false this.isShow = !this.isShow + this.active = -1 }, changeSelectMouse () { this.selectGroup = true + this.checked = false } } } @@ -407,7 +423,6 @@ width: 45px; height: 45px; background: @background-color; - //border: 1px solid @color-shadow; vertical-align: middle !important; .base-map-img { @@ -426,11 +441,13 @@ .span-default { display: block; color: @color-shadow; + font-size: 11px; } span { display: block; color: @color-over; + font-size: 11px; } } @@ -441,7 +458,7 @@ width: 45px; height: 45px; background: @background-color; - border: 1px solid @color-shadow; + border: 0.00521rem solid @color-shadow; } .active-button { @@ -451,11 +468,8 @@ .specific-tools-group { z-index: 1; - //.tools-panel-content { - // width:220px!important; - //} + .base-map-inner-panel { - //width: 230px!important; display: flex; justify-content: center; align-items: center; @@ -513,6 +527,10 @@ display: block; color: @color-shadow; } + .default-span { + display: block; + color: @color-over; + } } .special-button { -- Gitblit v1.8.0