~xingchuan/SewerAndRainNetwork.git

			@@ -1,40 +1,55 @@
			<template>
			<div class="left-top-toolbox-panel">
			<div class="specific-tools">
			<el-button @click="changeSelect">
			<el-button @click="changeSelect" v-show="selectGroup">
			<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="el-button" :class="active === index ? 'tools-panel-choose':''"
			@click="changeChoose(index)">
			<img :src="item.icon" alt=""/>
			<span>{{ item.label }}</span>
			<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"
			width=""
			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.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)">
			<img :src="itemT.iconChoose" :title="itemT.title" v-if="Selecd === indexT"/>
			<img :src="itemT.icon" :title="itemT.title" v-else/>
			</el-button>
			</el-popover>
			<el-button @click="changeSelect" class="special-button">
			<i :class="selectGroup === false ? 'el-icon-d-arrow-left':'el-icon-d-arrow-left'"></i>
			</el-button>
			<el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT)">
			<img :src="itemT.icon" :title="itemT.title"/>
			</el-button>
			</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>
			</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'
			@@ -46,6 +61,14 @@
			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 distance from '@assets/images/map-pages/icon/toolbox/juli.png'
			import mm from '@assets/images/map-pages/icon/toolbox/M2.png'
			@@ -55,12 +78,18 @@

			export default {
			name: 'ToolBoxPanel',
			// components: { BaseNavMenuItem },
			data () {
			return {
			selectGroup: false,
			active: -1,
			Selecd: -1,
			drawLayer: null,
			map: null,
			L: window.L,
			menuList: [
			{
			icon: plot,
			iconSelecd: plotChooose,
			label: '标绘',
			index: '1',
			items: [
			@@ -68,42 +97,49 @@
			index: '1-1',
			label: '点标绘',
			icon: marker,
			title: '点标绘'
			title: '点标绘',
			iconChoose: markerChoose
			},
			{
			index: '1-2',
			label: '线标绘',
			icon: line,
			title: '线标绘'
			title: '线标绘',
			iconChoose: lineChoose
			},
			{
			index: '1-4',
			label: '多边形',
			icon: polygonJ,
			title: '多边形'
			title: '多边形',
			iconChoose: polygonJChoose
			},
			{
			index: '1-5',
			label: '矩形',
			icon: polygonS,
			title: '矩形'
			title: '矩形',
			iconChoose: polygonSChoose
			},
			{
			index: '1-3',
			label: '圆形',
			icon: polygonY,
			title: '圆形'
			title: '圆形',
			iconChoose: polygonYChoose
			},
			{
			index: '1-4',
			label: '删除',
			icon: del,
			title: '删除标绘'
			title: '删除标绘',
			iconChoose: delChoose
			}
			]
			},
			{
			icon: polygon,
			iconSelecd: polygonChooose,
			label: '测量',
			index: '3',
			items: [
			@@ -118,11 +154,18 @@
			label: '面积',
			icon: mm,
			title: '面积测量'
			},
			{
			index: '3-3',
			label: '删除',
			icon: '',
			title: '删除'
			}
			]
			},
			{
			icon: location,
			iconSelecd: locationChooose,
			label: '地图',
			index: '2',
			items: [
			@@ -160,6 +203,7 @@
			},
			{
			icon: fullscreen,
			iconSelecd: dowloadChooose,
			label: '下载',
			index: '4',
			items: [
			@@ -183,19 +227,21 @@
			}
			]
			}
			],
			selectGroup: false,
			active: 0,
			drawLayer: null,
			map: null,
			L: window.L
			]
			}
			},
			methods: {
			changeChoose (index) {
			this.active = index
			if (this.drawLayer == null) {
			this.drawLayer = this.L.layerGroup().addTo(this.map)
			}
			},
			choiceItem (itemT) {
			changeSelect () {
			this.selectGroup = !this.selectGroup
			},
			choiceItem (itemT, indexT) {
			this.Selecd = indexT
			switch (itemT.label) {
			case '点标绘':
			var myIcon = this.L.icon({
			@@ -204,20 +250,34 @@
			iconAnchor: [13, 16],
			popupAnchor: [26, -32]
			})
			this.drawLayer = this.map.editTools.startMarker()
			this.drawLayer.setIcon(myIcon)
			var drawLayer = this.map.editTools.startMarker()
			drawLayer.setIcon(myIcon)
			this.drawLayer.addLayer(drawLayer)
			this.setLogic(drawLayer)
			break
			case '线标绘':
			this.drawLayer = this.map.editTools.startPolyline()
			var drawLayerLine = this.map.editTools.startPolyline()
			this.drawLayer.addLayer(drawLayerLine)
			this.setLogic(drawLayerLine)
			break
			case '多边形':
			this.drawLayer = this.map.editTools.startPolygon()
			var drawLayerPolygonD = this.map.editTools.startPolygon()
			this.drawLayer.addLayer(drawLayerPolygonD)
			this.setLogic(drawLayerPolygonD)
			break
			case '矩形':
			this.drawLayer = this.map.editTools.startRectangle()
			var drawLayerPolygonJ = this.map.editTools.startRectangle()
			this.drawLayer.addLayer(drawLayerPolygonJ)
			this.setLogic(drawLayerPolygonJ)
			break
			case '圆形':
			this.drawLayer = this.map.editTools.startCircle()
			var drawLayerPolygonY = this.map.editTools.startCircle()
			this.drawLayer.addLayer(drawLayerPolygonY)
			this.setLogic(drawLayerPolygonY)
			// this.drawLayer = this.map.editTools.startCircle()
			break
			case '删除':
			this.drawLayer.clearLayers()
			break
			case '距离':
			Measure.startMeasureLen(this.map, this.L)
			@@ -233,7 +293,7 @@
			exportOnly: true,
			hideControlContainer: true
			}).addTo(this.map)
			printer.printMap('CurrentSize', 'MyManualPrint')
			printer.printMap('CurrentSize', '全屏')
			break
			case 'A4横向':
			var printerX = this.L.easyPrint({
			@@ -242,7 +302,7 @@
			exportOnly: true,
			hideControlContainer: true
			}).addTo(this.map)
			printerX.printMap('A4Landscape page', 'MyManualPrint')
			printerX.printMap('A4Landscape page', '横向')
			break
			case 'A4纵向':
			var printerY = this.L.easyPrint({
			@@ -251,29 +311,33 @@
			exportOnly: true,
			hideControlContainer: true
			}).addTo(this.map)
			printerY.printMap('A4Portrait page', 'MyManualPrint')
			printerY.printMap('A4Portrait page', '纵向')
			break
			case '删除':
			this.map.removeLayer(this.drawLayer)
			break
			}
			this.drawLayer.on('dblclick', this.L.DomEvent.stop).on('dblclick', this.drawLayer.toggleEdit)
			if (itemT.label === '多边形') {
			this.drawLayer.setStyle({ color: 'red', fillColor: '#ffffff', fillOpacity: 0.1, fill: true })
			}
			if (itemT.label === '矩形') {
			this.drawLayer.setStyle({ color: 'red', fillColor: '#ffffff', fillOpacity: 0.1, fill: true })
			}
			},
			// 左上功能控制
			changeSelect () {
			this.selectGroup = !this.selectGroup
			setLogic (layer) {
			layer.on('dblclick', this.L.DomEvent.stop).on('dblclick', layer.toggleEdit)
			layer.setStyle({
			color: 'red',
			fillColor: '#ffffff',
			fillOpacity: 0.1,
			fill: true
			})
			}
			}
			}
			</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;
			@@ -284,6 +348,7 @@
			display: flex;

			.el-button {
			z-index: 999;
			padding: 0;
			margin: 0 0.015rem;
			width: 45px;
			@@ -300,6 +365,11 @@
			display: block;
			color: @color-tool;
			}

			a {
			display: block;
			color: @color-shadow;
			}
			}

			.specific-tools-group {