~xingchuan/SewerAndRainNetwork.git

			@@ -2,32 +2,39 @@
			<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="200"
			width="100%"
			trigger="click"
			:popper-class="'tools-panel-content'"
			v-for="(item,index) in menuList" :key="index"
			>
			<el-button slot="reference" class="tools-panel-choose">
			<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">
			<!-- <i class="el-icon-s-tools"></i>-->
			<img :src="itemT.icon" alt=""/>
			<!-- <span>{{ itemT.label }}</span>-->
			<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>
			<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>
			@@ -41,21 +48,25 @@
			// 标绘的可选择数据
			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 distance from '@assets/images/map-pages/icon/toolbox/juli.png'
			import mm from '@assets/images/map-pages/icon/toolbox/M2.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'
			import Measure from '@/components/plugin/MeaSure'

			export default {
			name: 'ToolBoxPanel',
			// components: { BaseNavMenuItem },
			data () {
			return {
			isShow: true,
			currentBaseMapCode: 'tianditu_img',
			basemapList: [],
			menuList: [
			{
			icon: plot,
			@@ -65,24 +76,32 @@
			{
			index: '1-1',
			label: '点标绘',
			icon: marker
			icon: marker,
			title: '点标绘'
			},
			{
			index: '1-2',
			label: '线标绘',
			icon: line
			},
			{
			index: '1-3',
			label: '圆形'
			icon: line,
			title: '线标绘'
			},
			{
			index: '1-4',
			label: '多边形'
			label: '多边形',
			icon: polygonJ,
			title: '多边形'
			},
			{
			index: '1-5',
			label: '矩形'
			label: '矩形',
			icon: polygonS,
			title: '矩形'
			},
			{
			index: '1-3',
			label: '圆形',
			icon: polygonY,
			title: '圆形'
			}
			]
			},
			@@ -93,11 +112,15 @@
			items: [
			{
			index: '3-1',
			label: '距离'
			label: '距离',
			icon: distance,
			title: '距离测量'
			},
			{
			index: '3-2',
			label: '面积'
			label: '面积',
			icon: mm,
			title: '面积测量'
			}
			]
			},
			@@ -145,27 +168,129 @@
			items: [
			{
			index: '4-1',
			label: '全屏'
			label: '全屏',
			icon: '',
			title: '全屏'
			},
			{
			index: '4-2',
			label: 'A4横向'
			label: 'A4横向',
			icon: '',
			title: 'A4横向'
			},
			{
			index: '4-3',
			label: 'A4纵向'
			label: 'A4纵向',
			icon: '',
			title: 'A4纵向'
			}
			]
			}
			],
			isCollapse: false,
			selectGroup: false,
			drawLayer: null,
			map: null,
			L: window.L
			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) {
			@@ -231,12 +356,10 @@
			// }
			// },
			// 文字标注控制
			gitBounced (params) {
			this.bouncedText = params
			},
			// 左上功能控制
			changeSelect () {
			this.selectGroup = !this.selectGroup
			this.isShow = !this.isShow
			}
			}
			}
			@@ -251,17 +374,20 @@

			.specific-tools {
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			.el-button {
			z-index: 999;
			padding: 0;
			margin: 0 0.015rem;
			width: 45px;
			height: 45px;
			background: @background-color-tools;
			border: none;
			box-shadow: 0 0 0.03rem #00fff6;
			.base-map-img{
			position: absolute;
			}
			.base-map-img:hover{
			cursor:pointer;
			}

			img {
			width: 22px;
			@@ -275,22 +401,35 @@
			}
			}

			.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;
			}

			.tools-panel-choose {
			img {
			width: 16px;
			height: 16px;
			}

			span {
			display: block;
			}
			}
			}
			}
			.isD-enter-active, .isD-leave-active{
			transition: all 0.5s;
			}
			.isD-enter, .isD-leave-to{
			opacity: 0;
			transform: translateX(-100px);
			}
			</style>