派生自 wuyushui/SewerAndRainNetwork
src/components/panel/ToolBoxPanel.vue
@@ -1,282 +1,550 @@ <template> <div class="lefttop-toolbox-panel"> <div class="init-choose" @click="changeSelect()"> <img src="@/assets/images/map-pages/icon/toolbox/circle.png" alt=""> <div class="left-top-toolbox-panel"> <div class="specific-tools"> <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="工具" placement="left"> <el-button :class="selectGroup === true ?'active-button':''" class="el-button-choice" @click.enter.native="changeSelectMouse"> <img src="@assets/images/map-pages/icon/toolbox/Selecd/tool.png" alt="" class="icon" /> <!--<span class="span-default">工具</span>--> </el-button> </el-tooltip> <transition name="animationChange"> <el-row v-show="selectGroup" class="specific-tools-group"> <el-popover trigger="manual" placement="bottom" :popper-class="'tools-panel-content'" v-for="(item,index) in menuList" :key="index" :width="item.index === '2'?230 : 150" v-model="isShow[index]" > <el-button slot="reference" class="el-button" :class="active === index? 'tools-panel-choose':''" @click.native="changeChoose(index)"> <img :src="item.iconSelecd" alt="" v-if="active === index"/> <img :src="item.icon" alt="" v-else/> <!--<span v-if="active === index">{{ 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'"> <img :src="itemT.iconChoose" :title="itemT.title" v-if="Selecd === indexT && checkedItem" alt=""/> <img :src="itemT.icon" :title="itemT.title" alt="" v-else/> </el-button> <!-- <div class="base-map-inner-panel" v-show="item.index==='2'">--> <!-- <div v-for="item in basemapHelper.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)" alt=""/>--> <!-- <el-checkbox class="base-map-anno" name="basemap" v-model="item.conf.annotationCheck"--> <!-- label="标注" @change="changeBasemap(item)">--> <!-- </el-checkbox>--> <!-- </div>--> <!-- </div>--> <lc-base-map v-show="item.index==='2'"></lc-base-map> </el-popover> <!-- <el-button @click="changeSelect" class="special-button"> <i class="el-icon-d-arrow-left"></i> </el-button> --> </el-row> </transition> </div> <div class="el-select-dropdown" v-show='selectGroup'> <el-dropdown @command="handleCommand" trigger="click" v-for="(item,i) in imgLists" :key="i" :value="total"> <transition name="fade"> <img :src="item.title" :title="item.alt"/> </transition> <el-dropdown-menu> <el-dropdown-item v-for="(ite,index) in item.items" :key="index" :command='ite.headings'> <span>{{ ite.headings }}</span> </el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> <!-- // 弹框--> <TextBounced v-show="this.bouncedText" @changeBounced="gitBounced"></TextBounced> </div> </template> <script> import circle from '@/assets/images/map-pages/icon/toolbox/circle.png' import fullscreen from '@/assets/images/map-pages/icon/toolbox/fullscreen.png' import legend from '@/assets/images/map-pages/icon/toolbox/legend.png' import location from '@/assets/images/map-pages/icon/toolbox/location.png' import polygon from '@/assets/images/map-pages/icon/toolbox/polygon.png' import square from '@/assets/images/map-pages/icon/toolbox/square.png' import LcBaseMap from '@components/LayerController/modules/LcBaseMap' // 功能导航 import plot from '@assets/images/map-pages/icon/toolbox/biaohui.png' import polygon from '@assets/images/map-pages/icon/toolbox/celiang1.png' 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' 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 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 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 distanceChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/juliceliangmark.png' import mmChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/mianjiceliangmark.png' // 测量 import distance from '@assets/images/map-pages/icon/toolbox/juli.png' import mm from '@assets/images/map-pages/icon/toolbox/M2.png' // 下载 import FullScreen from '@assets/images/map-pages/icon/toolbox/fullscreen.png' import cross from '@assets/images/map-pages/icon/toolbox/cross.png' import vertical from '@assets/images/map-pages/icon/toolbox/vertical.png' // 测量的方法 import '@/components/plugin/leaflet-measure-path/leaflet-measure-path.css' import Measure from '@/components/plugin/MeaSure' // 标注的方法 import MakeTation from '@components/plugin/MakeTation' // 封装的选择弹框 import TextBounced from '@components/panel/bounced/TextBounced' export default { name: 'ToolBoxPanel', components: { TextBounced }, components: { LcBaseMap }, data () { return { isPanelVisible: false, total: 0, activeTools: {}, imgLists: [ { title: circle, alt: '标绘', items: [ { headings: '线标绘' }, { headings: '面标绘' }, { headings: '箭头标绘' } ] }, { title: square, alt: '标注', items: [ { headings: '点标注' }, { headings: '线标注' }, { headings: '面标注' }, { headings: '文字标注' }, { headings: '图标标注' } ] }, { title: legend, alt: '测量', items: [ { headings: '距离测量' }, { headings: '面积测量' } ] }, { title: location, alt: '切换底图', items: [ { headings: '影像图' }, { headings: '矢量图' }, { headings: '地形图' } ] }, { title: polygon, alt: '管网', items: [ { headings: '连通性分析' }, { headings: '爆管分析' }, { headings: '流向分析' }, { headings: '横断面分析' } ] }, { title: fullscreen, alt: '下载', items: [ { headings: '全屏' }, { headings: 'A4横向' }, { headings: 'A4纵向' } ] } ], form: { regionType: '', enterprise: '' }, isShow: [], // currentBaseMapCode: 'tianditu_img', // basemapList: [], selectGroup: false, drawLayer: null, drawLayerArray: [], map: null, L: window.L, // 控制工具栏 文字标注 的弹框是否显示 bouncedText: false active: -1, checked: false, checkbutton: -1, checkedItem: false, Selecd: -1, isSelecd: -1, menuList: [ { icon: plot, iconSelecd: plotChooose, label: '标绘', index: '1', items: [ { index: '1-1', label: '点标绘', icon: marker, title: '点标绘', iconChoose: markerChoose }, { index: '1-2', label: '线标绘', icon: line, title: '线标绘', iconChoose: lineChoose }, { index: '1-4', label: '多边形', icon: polygonJ, title: '多边形', iconChoose: polygonJChoose }, { index: '1-5', label: '矩形', icon: polygonS, title: '矩形', iconChoose: polygonSChoose }, { index: '1-3', label: '圆形', icon: polygonY, title: '圆形', iconChoose: polygonYChoose }, { index: '1-4', label: '删除', icon: del, title: '删除标绘', iconChoose: delChoose } ] }, { icon: polygon, iconSelecd: polygonChooose, label: '测量', index: '3', items: [ { index: '3-1', label: '距离', icon: distance, title: '距离测量', iconChoose: distanceChoose }, { index: '3-2', label: '面积', icon: mm, title: '面积测量', iconChoose: mmChoose }, { index: '3-3', label: '清除', icon: del, title: '清除测量', iconChoose: delChoose } ] }, { icon: location, iconSelecd: locationChooose, label: '地图', index: '2', items: [ { label: '影像图', index: '2-1', items: [ { index: '2-1-1', label: '影像標注' } ] }, { label: '矢量图', index: '2-2', items: [ { index: '2-2-1', label: '矢量標注' } ] }, { label: '地形图', index: '2-3', items: [ { index: '2-3-1', label: '地形標注' } ] } ] }, { icon: fullscreen, iconSelecd: dowloadChooose, label: '下载', index: '4', items: [ { index: '4-1', label: '全屏', icon: FullScreen, title: '全屏' }, { index: '4-2', label: 'A4横向', icon: cross, title: 'A4横向' }, { index: '4-3', label: 'A4纵向', icon: vertical, title: 'A4纵向' } ] } ] } }, methods: { gitBounced (params) { this.bouncedText = params init (map) { this.map = map this.toolBoxPanelVisible = true }, changeSelect () { this.selectGroup = !this.selectGroup changeChoose (index) { if (this.drawLayer == null) { this.drawLayer = this.L.layerGroup().addTo(this.map) } this.active = index console.log(this.basemapList) for (let i = 0; i < this.isShow.length; i++) { if (i !== index) { this.isShow[i] = false } } // debugger this.isShow[index] = !this.isShow[index] this.isShow[index] ? (this.active = index) : (this.active = '') }, handleClose (done) { console.log(done) }, handleClick (tab, event) { console.log(tab, event) }, handleCommand (command) { console.log(command) switch (command) { choiceItem (itemT, indexT) { this.Selecd = indexT if (this.isSelecd === indexT) { this.checkedItem = !this.checkedItem } else { if (this.isSelecd === -1) { this.checkedItem = !this.checkedItem } else { this.checkedItem = true } } this.isSelecd = indexT switch (itemT.label) { case '点标绘': var myIcon = this.L.icon({ iconUrl: iconRefinery, iconSize: [26, 32], iconAnchor: [13, 16], popupAnchor: [26, -32] }) 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 '线标绘': this.drawLayer = this.map.editTools.startPolyline() this.drawLayerArray.push(this.drawLayer) this.setLogic() break case '多边形': this.drawLayer = this.map.editTools.startPolygon() this.drawLayerArray.push(this.drawLayer) this.setLogic() break case '矩形': this.drawLayer = this.map.editTools.startRectangle() this.drawLayerArray.push(this.drawLayer) this.setLogic() break case '圆形': this.drawLayer = this.map.editTools.startCircle() this.drawLayerArray.push(this.drawLayer) this.setLogic() break case '删除': for (let i = 0; i < this.drawLayerArray.length; i++) { this.map.removeLayer(this.drawLayerArray[i]) } break case '清除': Measure.clearMeasure(this.map, this.L) 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 hideControlContainer: true, hidden: true }).addTo(this.map) printer.printMap('CurrentSize', 'MyManualPrint') printer.printMap('CurrentSize', '全屏') break case 'A4横向': var printerX = this.L.easyPrint({ sizeModes: ['Current', 'A4Landscape', 'A4Portrait'], filename: 'map_image', exportOnly: true, hideControlContainer: true hideControlContainer: true, hidden: true }).addTo(this.map) printerX.printMap('A4Landscape page', 'MyManualPrint') printerX.printMap('A4Landscape page', '横向') break case 'A4纵向': var printerY = this.L.easyPrint({ sizeModes: ['Current', 'A4Landscape', 'A4Portrait'], filename: 'map_image', exportOnly: true, hideControlContainer: true hideControlContainer: true, hidden: true }).addTo(this.map) printerY.printMap('A4Portrait page', 'MyManualPrint') 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.startPolylineArrow() this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit) break case '点标注': MakeTation.StartCircleAnnotation(this.map, this.L) break case '图标标注': this.drawLayer = this.map.editTools.startIcon() this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit) break case '文字标注': this.bouncedText = true MakeTation.startMakeText(this.map, this.L) break case '距离测量': Measure.startMeasureLen(this.map, this.L) break case '面积测量': Measure.startMeasureArea(this.map, this.L) printerY.printMap('A4Portrait page', '纵向') break } this.active = -1 }, loadData () { setLogic () { this.drawLayer.on('dblclick', this.L.DomEvent.stop).on('dblclick', this.drawLayer.toggleEdit) this.drawLayer.setStyle({ color: 'red' }) }, changeSelect () { this.selectGroup = false }, changeSelectMouse () { this.selectGroup = !this.selectGroup if (this.selectGroup) { this.isShow = [] } else { this.isShow = !this.isShow this.active = -1 } } }, mounted () { this.loadData() }, created () { } } </script> <style lang="less"> .lefttop-toolbox-panel { position: absolute; left: 5px; top: 5px; z-index: 999; display: flex; .init-choose { //margin: 15px 5px; background: #305B62; //margin-top: 15px; width: 35px; height: 38px; border-radius: 50%; border: 2px skyblue solid; display: flex; align-items: center; justify-content: center; z-index: 999; } .el-select-dropdown { position: absolute; z-index: 1; width: 250px; height: 35px; display: flex; align-items: center; justify-content: space-evenly; background: #305B62; border-radius: 15px; padding-inline: 10px; padding-inline-start: 30px; .el-dropdow { width: 20%; } @keyframes bounce-in { 0% { transform: scale(0); opacity: 0.3; } 100% { transform: scale(1); opacity: 1; } } .fade-enter-active { transform-origin: left center; animation: bounce-in .2s; } .fade-leave-active { transform-origin: left; animation: bounce-in .2s reverse; } } .el-select-dropdown:last-child { margin-left: 10px; } .el-dropdown-link { cursor: pointer; color: #409EFF; } .el-icon-arrow-down { font-size: 12px; } <style lang="less" scoped> .animationChange-enter-active, .animationChange-leave-active { transition: all 0.5s; } .animationChange-enter, .animationChange-leave-to { opacity: 0; transform: translateX(-100px); } .left-top-toolbox-panel { position: absolute; left: 0.14583rem; top: 0.11979rem; z-index: 999; .specific-tools { display: flex; overflow: hidden; .el-button { z-index: 999; padding: 0; margin: 0 0.015rem; width: 0.2725rem; height: 0.2725rem; background: @background-color; vertical-align: middle !important; .base-map-img { position: absolute; } .base-map-img:hover { cursor: pointer; } img { width: 22px; height: 22px; } .span-default { display: block; font-size: 10px; } span { display: block; font-size: 10px; } } .specific-tools-group .el-button{ span{ color: #0B89B5; } } .el-button-choice { left: 500px; z-index: 999; padding: 0; margin: 0; margin-right:0.015rem; width: 0.2725rem; height: 0.2725rem; background: @background-color; border: 0.00521rem solid @color-shadow; } .active-button { border: 0.00521rem solid #fff700; box-shadow: 0 0 0.03rem #fff700; } .specific-tools-group { z-index: 1; .tools-panel-choose { border: none; box-shadow: 0 0 0.03rem @color-shadow; img { width: 22px; height: 22px; } span { display: block; color: @color-shadow; } .default-span { display: block; color: @color-over; } } .special-button { width: 0.1362rem; height: 0.2725rem; background:@background-color4; color:@color-tool; border:1px solid @color-tool; } .special-button:hover{ color: #00fff6; } } } } .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: @color-over; .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>
