<template>
|
<div class="left-top-toolbox-panel">
|
<div class="specific-tools">
|
<el-button @click="changeSelect">
|
<!-- <i class="el-icon-s-tools"></i>-->
|
<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=""
|
trigger="click"
|
:popper-class="'tools-panel-content'"
|
v-for="(item,index) in menuList" :key="index"
|
>
|
<el-button slot="reference" class="tools-panel-choose">
|
<img :src="item.icon" alt=""/>
|
<span>{{ item.label }}</span>
|
</el-button>
|
<el-button v-for="(itemT,indexT) in item.items" :key="indexT">
|
<!-- <i class="el-icon-s-tools"></i>-->
|
<img :src="itemT.icon" alt=""/>
|
<!-- <span>{{ itemT.label }}</span>-->
|
</el-button>
|
</el-popover>
|
</el-row>
|
<el-button @click="changeSelect" class="special-button">
|
<i :class="selectGroup === false ? 'el-icon-d-arrow-right':'el-icon-d-arrow-left'"></i>
|
</el-button>
|
</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 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 BaseNavMenuItem from '@components/panel/BaseNavMenuItem'
|
|
export default {
|
name: 'ToolBoxPanel',
|
// components: { BaseNavMenuItem },
|
data () {
|
return {
|
menuList: [
|
{
|
icon: plot,
|
label: '标绘',
|
index: '1',
|
items: [
|
{
|
index: '1-1',
|
label: '点标绘',
|
icon: marker
|
},
|
{
|
index: '1-2',
|
label: '线标绘',
|
icon: line
|
},
|
{
|
index: '1-4',
|
label: '多边形',
|
icon: polygonJ
|
},
|
{
|
index: '1-5',
|
label: '矩形',
|
icon: polygonS
|
},
|
{
|
index: '1-3',
|
label: '圆形',
|
icon: polygonY
|
}
|
]
|
},
|
{
|
icon: polygon,
|
label: '测量',
|
index: '3',
|
items: [
|
{
|
index: '3-1',
|
label: '距离'
|
},
|
{
|
index: '3-2',
|
label: '面积'
|
}
|
]
|
},
|
{
|
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: '全屏'
|
},
|
{
|
index: '4-2',
|
label: 'A4横向'
|
},
|
{
|
index: '4-3',
|
label: 'A4纵向'
|
}
|
]
|
}
|
],
|
isCollapse: false,
|
selectGroup: false,
|
drawLayer: null,
|
map: null,
|
L: window.L
|
}
|
},
|
methods: {
|
// 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
|
// }
|
// },
|
// 文字标注控制
|
gitBounced (params) {
|
this.bouncedText = params
|
},
|
// 左上功能控制
|
changeSelect () {
|
this.selectGroup = !this.selectGroup
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.left-top-toolbox-panel {
|
position: absolute;
|
left: 0;
|
top: 15px;
|
z-index: 999;
|
|
.specific-tools {
|
display: flex;
|
align-items: center;
|
justify-content: space-evenly;
|
|
.el-button {
|
padding: 0;
|
margin: 0 0.015rem;
|
width: 45px;
|
height: 45px;
|
background: @background-color-tools;
|
border: none;
|
box-shadow: 0 0 0.03rem #00fff6;
|
|
img {
|
width: 22px;
|
height: 22px;
|
}
|
|
span {
|
display: block;
|
font-size: 0.012rem;
|
color: @color-tool;
|
}
|
}
|
|
.special-button {
|
width: 22.5px;
|
height: 45px;
|
color: @color-over;
|
}
|
|
.tools-panel-choose {
|
img {
|
width: 16px;
|
height: 16px;
|
}
|
|
span {
|
display: block;
|
}
|
}
|
}
|
}
|
</style>
|
