<template>
|
<div class="left-top-toolbox-panel">
|
<div class="specific-tools">
|
<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>
|
|
<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>
|
</el-popover>
|
<el-button @click="changeSelect" class="special-button">
|
<i class="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 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 Measure from '@/components/plugin/MeaSure'
|
|
export default {
|
name: 'ToolBoxPanel',
|
data () {
|
return {
|
isShow: [],
|
currentBaseMapCode: 'tianditu_img',
|
basemapList: [],
|
selectGroup: false,
|
drawLayer: null,
|
drawLayerArray: [],
|
map: null,
|
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纵向'
|
}
|
]
|
}
|
]
|
}
|
},
|
computed: {
|
basemapHelper () {
|
return this.$store.state.map.basemapHelper
|
}
|
},
|
methods: {
|
init (map) {
|
this.map = map
|
this.toolBoxPanelVisible = true
|
},
|
changeBasemap (itm) {
|
this.active = -1
|
const code = itm.code
|
this.basemapHelper.basemapList.forEach((item) => {
|
if (item.code === code) {
|
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.basemapList.forEach((item) => {
|
item.layer.bringToBack()
|
})
|
}
|
})
|
},
|
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 = '')
|
},
|
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({
|
exportOnly: true,
|
hideControlContainer: true,
|
hidden: 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,
|
hidden: 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,
|
hidden: true
|
}).addTo(this.map)
|
printerY.printMap('A4Portrait page', '纵向')
|
break
|
}
|
this.active = -1
|
},
|
setLogic () {
|
this.drawLayer.on('dblclick', this.L.DomEvent.stop).on('dblclick', this.drawLayer.toggleEdit)
|
this.drawLayer.setStyle({
|
color: 'red'
|
})
|
},
|
changeSelect () {
|
this.selectGroup = false
|
this.isShow = !this.isShow
|
this.active = -1
|
},
|
changeSelectMouse () {
|
this.selectGroup = true
|
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.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;
|
color: @color-over;
|
}
|
}
|
}
|
}
|
.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>
|
