<template>
|
<div class="left-top-toolbox-panel">
|
<div class="specific-tools">
|
<el-button @click="changeSelect">
|
<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="100%"
|
trigger="click"
|
:popper-class="'tools-panel-content'"
|
v-for="(item,index) in menuList" :key="index"
|
>
|
<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" @click="choiceItem(itemT)" v-show="item.index!=='2'">
|
<img :src="itemT.icon" :title="itemT.title" v-show="item.index!=='2'"/>
|
</el-button>
|
<div class="base-map-inner-panel" v-show="isShow&&item.index==='2'">
|
<div v-for="item in 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)"/>
|
<el-checkbox class="base-map-anno" name="basemap" v-model="item.conf.annotationCheck"
|
label="标注" @change="changeBasemap(item)">
|
</el-checkbox>
|
</div>
|
</div>
|
</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>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
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 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 distance from '@assets/images/map-pages/icon/toolbox/juli.png'
|
import mm from '@assets/images/map-pages/icon/toolbox/M2.png'
|
|
// 测量的方法
|
import Measure from '@/components/plugin/MeaSure'
|
|
export default {
|
name: 'ToolBoxPanel',
|
// components: { BaseNavMenuItem },
|
data () {
|
return {
|
isShow: true,
|
currentBaseMapCode: 'tianditu_img',
|
basemapList: [],
|
menuList: [
|
{
|
icon: plot,
|
label: '标绘',
|
index: '1',
|
items: [
|
{
|
index: '1-1',
|
label: '点标绘',
|
icon: marker,
|
title: '点标绘'
|
},
|
{
|
index: '1-2',
|
label: '线标绘',
|
icon: line,
|
title: '线标绘'
|
},
|
{
|
index: '1-4',
|
label: '多边形',
|
icon: polygonJ,
|
title: '多边形'
|
},
|
{
|
index: '1-5',
|
label: '矩形',
|
icon: polygonS,
|
title: '矩形'
|
},
|
{
|
index: '1-3',
|
label: '圆形',
|
icon: polygonY,
|
title: '圆形'
|
}
|
]
|
},
|
{
|
icon: polygon,
|
label: '测量',
|
index: '3',
|
items: [
|
{
|
index: '3-1',
|
label: '距离',
|
icon: distance,
|
title: '距离测量'
|
},
|
{
|
index: '3-2',
|
label: '面积',
|
icon: mm,
|
title: '面积测量'
|
}
|
]
|
},
|
{
|
icon: location,
|
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,
|
label: '下载',
|
index: '4',
|
items: [
|
{
|
index: '4-1',
|
label: '全屏',
|
icon: '',
|
title: '全屏'
|
},
|
{
|
index: '4-2',
|
label: 'A4横向',
|
icon: '',
|
title: 'A4横向'
|
},
|
{
|
index: '4-3',
|
label: 'A4纵向',
|
icon: '',
|
title: 'A4纵向'
|
}
|
]
|
}
|
],
|
selectGroup: false,
|
drawLayer: null,
|
map: null,
|
L: window.L,
|
active: 0
|
}
|
},
|
computed: {
|
basemapHelper () {
|
return this.$store.state.map.basemapHelper
|
}
|
},
|
watch: {
|
basemapHelper (newVal) {
|
if (newVal != null) {
|
this.updateBasemapList()
|
}
|
}
|
},
|
methods: {
|
updateBasemapList () {
|
this.basemapList = this.basemapHelper.getBasemapList()
|
},
|
changeBasemap (itm) {
|
const code = itm.code
|
this.basemapList.forEach((item) => {
|
if (item.code === code) {
|
console.log(this.currentBaseMapCode)
|
if (this.currentBaseMapCode == null || this.currentBaseMapCode !== code) {
|
this.currentBaseMapCode = code
|
this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, true)
|
} else {
|
this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, false)
|
}
|
|
this.basemapHelper.getBasemapList().forEach((item) => {
|
item.layer.bringToBack()
|
})
|
}
|
})
|
},
|
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) {
|
// case '4-1':
|
// // 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 '4-2':
|
// 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 '4-3':
|
// 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 '1-2':
|
// this.drawLayer = this.map.editTools.startPolyline()
|
// this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
|
// Measure.startMeasureLen(this.map, this.L)
|
// break
|
// case '1-3-1':
|
// // alert('圆形')
|
// this.drawLayer = this.map.editTools.circleMarker()
|
// this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
|
// break
|
// case '1-3-2':
|
// this.drawLayer = this.map.editTools.startPolygon()
|
// this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
|
// break
|
// case '1-1':
|
// MakeTation.StartPointAnnotation(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)
|
// break
|
// }
|
// },
|
// 文字标注控制
|
// 左上功能控制
|
changeSelect () {
|
this.selectGroup = !this.selectGroup
|
this.isShow = !this.isShow
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.left-top-toolbox-panel {
|
position: absolute;
|
left: 0;
|
top: 15px;
|
z-index: 999;
|
|
.specific-tools {
|
display: flex;
|
.el-button {
|
z-index: 999;
|
padding: 0;
|
margin: 0 0.015rem;
|
width: 45px;
|
height: 45px;
|
background: @background-color-tools;
|
border: none;
|
.base-map-img{
|
position: absolute;
|
}
|
.base-map-img:hover{
|
cursor:pointer;
|
}
|
|
img {
|
width: 22px;
|
height: 22px;
|
}
|
|
span {
|
display: block;
|
font-size: 0.012rem;
|
color: @color-tool;
|
}
|
}
|
|
.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;
|
}
|
}
|
}
|
|
.special-button {
|
width: 22.5px;
|
height: 45px;
|
color: @color-over;
|
}
|
}
|
}
|
.isD-enter-active, .isD-leave-active{
|
transition: all 0.5s;
|
}
|
.isD-enter, .isD-leave-to{
|
opacity: 0;
|
transform: translateX(-100px);
|
}
|
</style>
|
