派生自 wuyushui/SewerAndRainNetwork
src/components/panel/ToolBoxPanel.vue
@@ -2,32 +2,30 @@ <div class="left-top-toolbox-panel"> <div class="specific-tools"> <el-button @click="changeSelect"> <!-- <i class="el-icon-s-tools"></i>--> <img src="@assets/images/map-pages/icon/toolbox/tool.png" alt=""> <span>工具</span> </el-button> <el-row v-show="selectGroup" class="specific-tools-group"> <el-popover placement="bottom" width="200" width="" trigger="click" :popper-class="'tools-panel-content'" v-for="(item,index) in menuList" :key="index" > <el-button slot="reference" class="tools-panel-choose"> <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"> <!-- <i class="el-icon-s-tools"></i>--> <img :src="itemT.icon" alt=""/> <!-- <span>{{ itemT.label }}</span>--> <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-button> </el-row> <el-button @click="changeSelect" class="special-button"> <i :class="selectGroup === false ? 'el-icon-d-arrow-right':'el-icon-d-arrow-left'"></i> </el-button> </div> </div> </template> @@ -41,15 +39,16 @@ // 标绘的可选择数据 import marker from '@assets/images/map-pages/icon/toolbox/map.png' import line from '@assets/images/map-pages/icon/toolbox/line.png' 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 square from '@/assets/images/map-pages/icon/toolbox/square.png' // 测量 import distance from '@assets/images/map-pages/icon/toolbox/juli.png' import mm from '@assets/images/map-pages/icon/toolbox/M2.png' // 测量的方法 // import '@/components/plugin/leaflet-measure-path/leaflet-measure-path.css' // import Measure from '@/components/plugin/MeaSure' // 标注的方法 // import MakeTation from '@components/plugin/MakeTation' // 封装的选择弹框 // import BaseNavMenuItem from '@components/panel/BaseNavMenuItem' import Measure from '@/components/plugin/MeaSure' export default { name: 'ToolBoxPanel', @@ -65,24 +64,32 @@ { index: '1-1', label: '点标绘', icon: marker icon: marker, title: '点标绘' }, { index: '1-2', label: '线标绘', icon: line }, { index: '1-3', label: '圆形' icon: line, title: '线标绘' }, { index: '1-4', label: '多边形' label: '多边形', icon: polygonJ, title: '多边形' }, { index: '1-5', label: '矩形' label: '矩形', icon: polygonS, title: '矩形' }, { index: '1-3', label: '圆形', icon: polygonY, title: '圆形' } ] }, @@ -93,11 +100,15 @@ items: [ { index: '3-1', label: '距离' label: '距离', icon: distance, title: '距离测量' }, { index: '3-2', label: '面积' label: '面积', icon: mm, title: '面积测量' } ] }, @@ -145,27 +156,96 @@ items: [ { index: '4-1', label: '全屏' label: '全屏', icon: '', title: '全屏' }, { index: '4-2', label: 'A4横向' label: 'A4横向', icon: '', title: 'A4横向' }, { index: '4-3', label: 'A4纵向' label: 'A4纵向', icon: '', title: 'A4纵向' } ] } ], isCollapse: false, selectGroup: false, drawLayer: null, map: null, L: window.L L: window.L, active: 0 } }, methods: { changeChoose (index) { this.active = index }, choiceItem (itemT) { console.log(itemT.label) switch (itemT.label) { case '点标绘': // MakeTation.StartPointAnnotation(this.map, this.L) this.drawLayer = this.map.editTools.startMarker() this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit) break case '线标绘': this.drawLayer = this.map.editTools.startPolyline() this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit) break case '多边形': this.drawLayer = this.map.editTools.startPolygon() this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit) break case '矩形': this.drawLayer = this.map.editTools.startRectangle() this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit) break case '圆形': this.drawLayer = this.map.editTools.startCircle() this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit) break case '距离': Measure.startMeasureLen(this.map, this.L) break case '面积': Measure.startMeasureArea(this.map, this.L) break case '全屏': // this.map.toggleFullscreen() var printer = this.L.easyPrint({ sizeModes: ['Current', 'A4Landscape', 'A4Portrait'], filename: 'map_image', exportOnly: true, hideControlContainer: true }).addTo(this.map) printer.printMap('CurrentSize', 'MyManualPrint') break case 'A4横向': var printerX = this.L.easyPrint({ sizeModes: ['Current', 'A4Landscape', 'A4Portrait'], filename: 'map_image', exportOnly: true, hideControlContainer: true }).addTo(this.map) printerX.printMap('A4Landscape page', 'MyManualPrint') break case 'A4纵向': var printerY = this.L.easyPrint({ sizeModes: ['Current', 'A4Landscape', 'A4Portrait'], filename: 'map_image', exportOnly: true, hideControlContainer: true }).addTo(this.map) printerY.printMap('A4Portrait page', 'MyManualPrint') break } }, // handleSelect (index) { // console.log(index) // switch (index) { @@ -231,9 +311,6 @@ // } // }, // 文字标注控制 gitBounced (params) { this.bouncedText = params }, // 左上功能控制 changeSelect () { this.selectGroup = !this.selectGroup @@ -261,7 +338,6 @@ height: 45px; background: @background-color-tools; border: none; box-shadow: 0 0 0.03rem #00fff6; img { width: 22px; @@ -275,21 +351,26 @@ } } .specific-tools-group { .tools-panel-choose { border: none; box-shadow: 0 0 0.03rem @color-shadow; img { width: 22px; height: 22px; } span { display: block; } } } .special-button { width: 22.5px; height: 45px; color: @color-over; } .tools-panel-choose { img { width: 16px; height: 16px; } span { display: block; } } } }
