<template>
|
<div class="lefttop-toolbox-panel">
|
<div class="init-choose" @click="changeSelect()">
|
<img src="@/assets/images/map-pages/icon/toolbox/circle.png" alt="">
|
</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 '@/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 },
|
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: ''
|
},
|
selectGroup: false,
|
drawLayer: null,
|
map: null,
|
L: window.L,
|
// 控制工具栏 文字标注 的弹框是否显示
|
bouncedText: false
|
}
|
},
|
methods: {
|
gitBounced (params) {
|
this.bouncedText = params
|
},
|
changeSelect () {
|
this.selectGroup = !this.selectGroup
|
},
|
handleClose (done) {
|
console.log(done)
|
},
|
handleClick (tab, event) {
|
console.log(tab, event)
|
},
|
handleCommand (command) {
|
console.log(command)
|
switch (command) {
|
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
|
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 '点标注':
|
this.drawLayer = this.map.editTools.startMarker()
|
this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
|
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)
|
break
|
}
|
},
|
loadData () {
|
|
}
|
},
|
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>
|
