<template>
|
<div class="left-top-toolbox-panel">
|
<div class="specific-tools">
|
<el-button @click="changeSelect" v-show="selectGroup">
|
<img src="@assets/images/map-pages/icon/toolbox/tool.png" alt="">
|
<span>工具</span>
|
</el-button>
|
<el-button @click="changeSelect" v-show="!selectGroup">
|
<img src="@assets/images/map-pages/icon/toolbox/Selecd/tool.png" alt="">
|
<a>工具</a>
|
</el-button>
|
<transition name="animationChange">
|
<el-row v-show="selectGroup" class="specific-tools-group">
|
<el-popover
|
placement="bottom"
|
trigger="click"
|
:popper-class="'tools-panel-content'"
|
v-for="(item,index) in menuList" :key="index"
|
:width="item.index === '2'?230 : 150"
|
>
|
<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.icon" alt="" v-else/>
|
<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"/>
|
<img :src="itemT.icon" :title="itemT.title" v-else/>
|
</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>
|
</transition>
|
</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 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 Measure from '@/components/plugin/MeaSure'
|
|
export default {
|
name: 'ToolBoxPanel',
|
data () {
|
return {
|
isShow: true,
|
currentBaseMapCode: 'tianditu_img',
|
basemapList: [],
|
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: '',
|
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: -1,
|
Selecd: -1
|
}
|
},
|
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
|
if (this.drawLayer == null) {
|
this.drawLayer = this.L.layerGroup().addTo(this.map)
|
}
|
},
|
choiceItem (itemT, indexT) {
|
// console.log(itemT.label)
|
this.Selecd = indexT
|
switch (itemT.label) {
|
case '点标绘':
|
var myIcon = this.L.icon({
|
iconUrl: iconRefinery,
|
iconSize: [26, 32],
|
iconAnchor: [13, 16],
|
popupAnchor: [26, -32]
|
})
|
var drawLayer = this.map.editTools.startMarker()
|
drawLayer.setIcon(myIcon)
|
this.drawLayer.addLayer(drawLayer)
|
this.setLogic(drawLayer)
|
break
|
case '线标绘':
|
var drawLayerLine = this.map.editTools.startPolyline()
|
this.drawLayer.addLayer(drawLayerLine)
|
this.setLogic(drawLayerLine)
|
break
|
case '多边形':
|
var drawLayerPolygonD = this.map.editTools.startPolygon()
|
this.drawLayer.addLayer(drawLayerPolygonD)
|
this.setLogic(drawLayerPolygonD)
|
break
|
case '矩形':
|
var drawLayerPolygonJ = this.map.editTools.startRectangle()
|
this.drawLayer.addLayer(drawLayerPolygonJ)
|
this.setLogic(drawLayerPolygonJ)
|
break
|
case '圆形':
|
var drawLayerPolygonY = this.map.editTools.startCircle()
|
this.drawLayer.addLayer(drawLayerPolygonY)
|
this.setLogic(drawLayerPolygonY)
|
break
|
case '删除':
|
this.drawLayer.clearLayers()
|
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
|
}).addTo(this.map)
|
printer.printMap('CurrentSize', '全屏')
|
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', '横向')
|
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', '纵向')
|
break
|
}
|
},
|
setLogic (layer) {
|
layer.on('dblclick', this.L.DomEvent.stop).on('dblclick', layer.toggleEdit)
|
layer.setStyle({
|
color: 'red',
|
fillColor: '#ffffff',
|
fillOpacity: 0.1,
|
fill: true
|
})
|
},
|
changeSelect () {
|
this.selectGroup = !this.selectGroup
|
this.isShow = !this.isShow
|
}
|
}
|
}
|
</script>
|
|
<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;
|
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;
|
}
|
|
a {
|
display: block;
|
color: @color-shadow;
|
}
|
}
|
|
.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;
|
|
.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: white;
|
|
.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;
|
}
|
}
|
}
|
|
.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;
|
}
|
}
|
}
|
</style>
|
