Project_yhfu/src/components/supermap.vue

<template>
	<div v-bind:id="mapDivId" ref="map" style="width: 100%; height: 100%;background: none;">
		<div id="toolbar" v-if="isdynamicPlotting" class="panel panel-primary"
			style="position:absolute;z-index: 9999;top:4rem;left: 1rem; border-radius: 4px; width: fit-content;height:635px;overflow-y:scroll;background:#040b1f">
			<div class="panel-heading" id="panelheading">
				<h5 style=" color: #2bacf7;font-size: 1rem;padding:.5rem;">鼠标标绘</h5>
			</div>
			<div class="panel-body content" id="panelbodycontent" style="margin-bottom: .5rem;padding-right: .5rem;">
				<div align="right" class="button-group">
					<el-button type="success" @click="PlottingDrawCancel">取消标绘</el-button>
					&nbsp;&nbsp;
					<el-button type="success" @click="clearLayers">清空标绘</el-button>
				</div>
			</div>
			<div id="plottingPanel">
				<div id="plotPanel" style="width: 15rem;height:50%;overflow-y:scroll;">
				</div>
			</div>
		</div>

		<div id="toolbar-heat" v-if="isheatPlotting" class="panel panel-primary"
			style="position:absolute;z-index: 9999; padding: 1rem; bottom:3rem;right: 1rem; border-radius: 4px; width: fit-content;height:fit-content;overflow-y:scroll;background:#040b1f">
			<div class="panel-body content">
				<div class="panel">
					<div class="input-group">
						<span class="input-group-addon">风向</span>
						<select class="form-control" style="width:auto" id="heatNums">
							<option value="1">南风</option>
							<option value="31">西南风</option>
							<option value="41">东南风</option>
							<option value="2">北风</option>
							<option value="32">西北风</option>
							<option value="42">东北风</option>
							<option value="3">西风</option>
							<option value="4">东风</option>
						</select>
					</div>
				</div>
				<div class="panel">
					<div class="input-group">
						<span class="input-group-addon">风速</span>
						<input type="text" class="form-control" id="heatNums1" value="6" />
					</div>
				</div>
				<div class="panel">
					<div class="input-group">
						<span class="input-group-addon">温度</span>
						<input type="text" class="form-control" id="heatNums2" value="10℃" />
					</div>
				</div>
				<div class="panel">
					<div class="input-group">
						<span class="input-group-addon">湿度</span>
						<input type="text" class="form-control" id="heatNums3" value="6%RH" />
					</div>
				</div>
				<div class="panel">
					<div class="input-group">
						<span class="input-group-addon">持续时间</span>
						<input type="text" class="form-control" id="heatNums4" value="60分钟" />
					</div>
				</div>
				<div class="panel">
					<div class="input-group">
						<span class="input-group-addon">植被类型</span>
						<select class="form-control" style="width:auto" id="heatNums5">
							<option value="1">针叶林</option>
							<option value="31">落叶林</option>
						</select>
					</div>
				</div>
				<div class="panel">
					<div class="input-group">
						<span class="input-group-addon">大气压</span>
						<input type="text" class="form-control" id="heatNums6" value="101.325kPa" />
					</div>
				</div>
				<div class="panel">
					<el-button type="success" @click="createHeatPoints">分析</el-button>
					<el-button type="success" @click="clearHeatPoints">重置</el-button>
				</div>
			</div>
		</div>
		<el-dialog title="林班数据" :visible.sync="showBanData" width="80%" append-to-body>
			<div style="display: flex; flex-wrap: wrap; height:70vh; overflow-y: scroll; align-content: flex-start">
				<div v-for="(value, key ,index) in banDataList" style="width:33%;border: 1px solid #1b6d9d;"  v-if="value!=''">
					<div style="display: flex; align-items: center;padding: .5rem; color: #3ee1fa; font-size: 14px;">
						<div><h5>{{ key }}:</h5></div>
						<div>
							<h5 style="margin-left: .5rem;">{{ value }}</h5>
						</div>
					</div>
				</div>
			</div>

		</el-dialog>
	</div>
</template>
<script>
	// import 'leaflet-side-by-side'
	// import '@supermap/iclient-leaflet'
	// import 'leaflet/dist/leaflet.css'
	// import 'leaflet.markercluster/dist/leaflet.markercluster-src.js'
	// import 'leaflet.markercluster/dist/MarkerCluster.css'
	// import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
	// import 'leaflet-draw'
	// import 'leaflet-draw/dist/leaflet.draw.css'
	// import L from 'leaflet'

	import {
		getSuperMap,
		iconList
	} from '@/api/components/supermap.js'
	import {
		selectConfigKey
	} from '@/api/system/config'
	// import {setToken} from '../plugins/auth'
	import modal from '@/plugins/modal'

	export default {
		name: 'sookaSuperMap',
		data() {
			return {
				showBanData: false, //林班数据弹层
				banDataList: [], //林班数据
				plottingdrawControl: null,
				plottingLayer: null,
				mapDivId: '',
				map: null,
				layers: [],
				layersBytype: [],
				isAggregationLayers: [],
				radiusLayers: [],
				myGroup: [],
				myGroupBytype: [],
				isAggregationMyGroup: [],
				polygon: null,
				connectLayer: [],
				connectLayerTwo: [],
				graphicsLayer: [],
				graphicsLayerTwo: [],
				latLngLayers: [],
				latLngGroup: [],
				isEditableLayers: false, //绘图控件
				drawControl: null, //绘图控件
				deckglLayer: null, //图层Layer
				deckglLayerList: [], //图层Layer(数组)

				deckglLayerList_Data: [], //图层Layer(数组) 地图
				resultLayer_Data: [], //数据图层Layer(数组) 数据
        infoView:null,
        lbtInfoView:null,
        lbtThemeLayer:null,

				heatMapLayer: [], //火灾蔓延图层Layer
				isheatPlotting: false, //火灾蔓延
				heat_lat: 0, //火灾蔓延经纬度
				heat_lng: 0, //火灾蔓延经纬度
				host: ''
			}
		},
		watch: {
			isEditableLayers: {
				handler(newValue, oldValue) {
					if (newValue) {
						var editableLayers = new window.L.FeatureGroup()
						this.map.addLayer(editableLayers)
						let options = {
							position: 'topleft',
							draw: {
								polyline: {},
								polygon: {},
								circle: {},
								rectangle: {},
								marker: {},
								remove: {}
							},
							edit: {
								featureGroup: editableLayers,
								remove: true
							}
						}
						this.drawControl = new window.L.Control.Draw(options)
						this.map.addControl(this.drawControl)
						this.map.on(window.L.Draw.Event.CREATED, function(e) {
							let editableLayer = e.layer
							let layerType = e.layerType
							editableLayer.on('dblclick', function(e) {
								if (layerType === 'polygon' || layerType === 'rectangle') {
									let latlng = editableLayer.getLatLngs()[0]
									//一个自定义的计算面积的函数
									var seeArea = window.L.GeometryUtil.geodesicArea(latlng)
									let area = (seeArea / 10e5).toFixed(2) + 'k㎡'
									modal.msg(area)
								} else if (layerType === 'polyline') {
									let latlng = editableLayer.getLatLngs()
									//一个自定义的计算长度的函数
									let dis = 0
									for (let i = 0; i < latlng.length - 1; i++) {
										let start = latlng[i]
										let end = latlng[i + 1]
										dis += window.L.latLng([start.lat, start.lng]).distanceTo([end.lat,
											end.lng
										]) //计算两个点之间的距离，并累加
									}
									//结果得到的也是number类型，单位是KM
									modal.msg((dis / 10e2).toFixed(2) + 'km')
								}
							})
							if (layerType === 'marker') {
								let icon = new window.L.Icon({
									iconUrl: iconList['marker'],
									iconSize: [48, 48],
									iconAnchor: [24, 40],
									popupAnchor: [-3, -40],
									shadowSize: [41, 41]
								})
								editableLayer.options.icon = icon
							}
							editableLayers.addLayer(editableLayer)
						})
					} else {
						this.map.removeControl(this.drawControl)
					}
				}
			}
		},
		mounted() {
			this.getspuerMapHost()
			this.initMap()
			//添加画图的提示信息
			window.L.drawLocal.draw.toolbar = {
				actions: {
					title: '取消绘图',
					text: '取消'
				},
				finish: {
					title: '完成绘图',
					text: '完成'
				},
				undo: {
					title: '删除最后绘制的点',
					text: '删除最后一个点'
				},
				buttons: {
					polyline: '绘制折线',
					polygon: '绘制多边形',
					rectangle: '绘制矩形',
					circle: '绘制圆圈',
					marker: '绘制标记',
					circlemarker: '绘制圆圈标记'
				}
			}
			window.L.drawLocal.draw.handlers = {
				circle: {
					tooltip: {
						start: '单击并拖动以绘制圆形'
					},
					radius: '半径'
				},
				circlemarker: {
					tooltip: {
						start: '点击地图放置圆圈标记'
					}
				},
				marker: {
					tooltip: {
						start: '点击地图放置标记'
					}
				},
				polygon: {
					tooltip: {
						start: '点击开始绘制形状',
						cont: '点击继续绘制形状',
						end: '单击第一个点以关闭此形状'
					}
				},
				polyline: {
					error: '<strong>Error:</strong> shape edges cannot cross!',
					tooltip: {
						start: '点击开始画线',
						cont: '点击继续画线',
						end: '单击最后一点以完成线'
					}
				},
				rectangle: {
					tooltip: {
						start: '单击并拖动以绘制矩形'
					}
				},
				simpleshape: {
					tooltip: {
						end: '释放鼠标完成绘图'
					}
				}
			}
			window.L.drawLocal.edit = {
				toolbar: {
					actions: {
						save: {
							title: '保存更改',
							text: '保存'
						},
						cancel: {
							title: '取消编辑，放弃所有更改',
							text: '取消'
						},
						clearAll: {
							title: '清除所有图层',
							text: '清除所有'
						}
					},
					buttons: {
						edit: '编辑图层',
						editDisabled: '没有可编辑的图层',
						remove: '删除图层',
						removeDisabled: '没有可删除的图层'
					}
				},
				handlers: {
					edit: {
						tooltip: {
							text: '拖动手柄或标记以编辑要素',
							subtext: '单击取消以撤消更改'
						}
					},
					remove: {
						tooltip: {
							text: '单击要删除的功能'
						}
					}
				}
			}
		},
		props: {
			mapDiv: null,
			codes: null,
			mapSite: {},
			isdynamicPlotting: false, //动态标绘表格
			isSideBySide: false,
			showLatLng: null,
			showAreaLatLng: null,
			showLineLatLng: null
		},
		methods: {
			/** ----------------------------------火势蔓延  开始------------------------------------- */
			// initEditView: function() {
			//   var that = this
			//   var infoView = window.L.control({ position: 'topright' })
			//   infoView.onAdd = function() {
			//     that._div = L.DomUtil.create('div', 'editPane')
			//     that._div.style.width = '236px'
			//     that._div.innerHTML = '<div id="toolbar" class="panel panel-primary">' +
			//       '<div class="panel-heading">' +
			//       '<h5 class="panel-title text-center">' + resources.text_fastHeatMapLayer + '</h5></div>' +
			//       '<div class="panel-body content">' +
			//       '<div class="panel">' +
			//       '<div class="input-group">' +
			//       '<span class="input-group-addon">风向</span>' +
			//       '<select class="form-control" style="width:auto" id="heatNums">' +
			//       '<option value="1" >南风</option>' +
			//       '<option value="2" >北风</option>' +
			//       '<option value="3" >西风</option>' +
			//       '<option value="4" >东风</option>' +
			//       '</select>' +
			//       '</div>' +
			//       '</div>' +
			//       '<div class="panel">' +
			//       '<div class="input-group">' +
			//       '<span class="input-group-addon">风速</span>' +
			//       '<input type="text" class="form-control" id="heatNums1" value="20"/>' +
			//       '</div>' +
			//       '</div>' +
			//
			//       '<input type="button" class="btn btn-default" value="' + resources.btn_startDraw + '" onclick ="'+that.createHeatPoints()+'"/>&nbsp; &nbsp;' +
			//       '<input type="button" class="btn btn-default" value="' + resources.text_input_value_clear + '" onclick ="'+that.clearHeatPoints()+'"/>' +
			//       '</div>' +
			//       '</div>'
			//     that.handleMapEvent(that._div, that.map)
			//     return that._div
			//   }
			//   infoView.addTo(that.map)
			// },
			// handleMapEvent: function(div, map) {
			//   let that = this
			//   if (!div || !map) {
			//     return
			//   }
			//   div.addEventListener('mouseover', function() {
			//     that.map.dragging.disable()
			//     that.map.scrollWheelZoom.disable()
			//     that.map.doubleClickZoom.disable()
			//   })
			//   div.addEventListener('mouseout', function() {
			//     that.map.dragging.enable()
			//     that.map.scrollWheelZoom.enable()
			//     that.map.doubleClickZoom.enable()
			//   })
			// },
			showheatPlotting: function(heat_lat, heat_lng) {
				this.heat_lat = heat_lat
				this.heat_lng = heat_lng
				this.isheatPlotting = true
			},
			createHeatPoints: function() {
				let that = this
				that.clearHeatPoints()
				that.heatMapLayer = new window.L.supermap.heatMapLayer(
					'heatMap', {
						'map': that.map,
						'id': 'heatmap',
						'radius': 10,
						//            设置图层透明度：（参数方式）
						'opacity': 0.5,
						//featureWeight指定以哪个属性值为热力权重值创建热力图：
						'featureWeight': 'value'
					}
				)
				var heatNums = parseInt($('#heatNums').val())
				//热力半径单位不使用用地理单位
				that.heatMapLayer.useGeoUnit = true
				that.heatMapLayer.radius = 0.01

				var features = []

				switch (heatNums) {
					case 1: //南风
						features = that.getPointArray1()
						break
					case 31: //西南风
						features = that.getPointArray3_1()
						break
					case 41: //东南风
						features = that.getPointArray4_1()
						break
					case 2: //北风
						features = that.getPointArray2()
						break
					case 32: //西北风
						features = that.getPointArray3_2()
						break
					case 42: //东北风
						features = that.getPointArray4_2()
						break
					case 3: //西风
						features = that.getPointArray3()
						break
					case 4: //东风
						features = that.getPointArray4()
						break
				}

				//加载heatMapFeature格式数据：
				that.heatMapLayer.addFeatures(features)
				that.heatMapLayer.addTo(that.map)

			},

			clearHeatPoints: function() {
				let that = this
				if (that.heatMapLayer) {
					that.map.removeLayer(that.heatMapLayer)
					that.heatMapLayer = null
				}
			},

			getPointArray1: function() {
				var heatNums1 = parseInt($('#heatNums1').val())
				var mLon = this.heat_lng,
					mLat = this.heat_lat
				var points = []
				for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
					mLat = this.accAdd(mLat, 0.005)
					points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
						'value': 2000 - (i * Math.random())
					})
				}
				return points
			},
			getPointArray3_1: function() {
				var heatNums1 = parseInt($('#heatNums1').val())
				var mLon = this.heat_lng,
					mLat = this.heat_lat
				var points = []
				for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
					mLat = this.accAdd(mLat, 0.005)
					mLon = this.accAdd(mLon, 0.005)
					points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
						'value': 2000 - (i * Math.random())
					})
				}
				return points
			},
			getPointArray4_1: function() {
				var heatNums1 = parseInt($('#heatNums1').val())
				var mLon = this.heat_lng,
					mLat = this.heat_lat
				var points = []
				for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
					mLat = this.accAdd(mLat, 0.005)
					mLon = this.accSub(mLon, 0.005)
					points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
						'value': 2000 - (i * Math.random())
					})
				}
				return points
			},
			getPointArray2: function() {
				var heatNums1 = parseInt($('#heatNums1').val())
				var mLon = this.heat_lng,
					mLat = this.heat_lat
				var points = []
				for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
					mLat = this.accSub(mLat, 0.005)
					points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
						'value': 2000 - (i * Math.random())
					})
				}
				return points
			},
			getPointArray3_2: function() {
				var heatNums1 = parseInt($('#heatNums1').val())
				var mLon = this.heat_lng,
					mLat = this.heat_lat
				var points = []
				for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
					mLat = this.accSub(mLat, 0.005)
					mLon = this.accAdd(mLon, 0.005)
					points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
						'value': 2000 - (i * Math.random())
					})
				}
				return points
			},
			getPointArray4_2: function() {
				var heatNums1 = parseInt($('#heatNums1').val())
				var mLon = this.heat_lng,
					mLat = this.heat_lat
				var points = []
				for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
					mLat = this.accSub(mLat, 0.005)
					mLon = this.accSub(mLon, 0.005)
					points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
						'value': 2000 - (i * Math.random())
					})
				}
				return points
			},
			getPointArray3: function() {
				var heatNums1 = parseInt($('#heatNums1').val())
				var mLon = this.heat_lng,
					mLat = this.heat_lat
				var points = []
				for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
					mLon = this.accAdd(mLon, 0.005)
					points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
						'value': 2000 - (i * Math.random())
					})
				}
				return points

			},
			getPointArray4: function() {
				var heatNums1 = parseInt($('#heatNums1').val())
				var mLon = this.heat_lng,
					mLat = this.heat_lat
				var points = []
				for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
					mLon = this.accSub(mLon, 0.005)
					points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
						'value': 2000 - (i * Math.random())
					})
				}
				return points

			},
			//加法函数，用来得到精确的加法结果
			//说明：javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。
			//调用：accAdd(arg1,arg2)
			//返回值：arg1加上arg2的精确结果
			accAdd: function(arg1, arg2) {
				var r1, r2, m, c
				try {
					r1 = arg1.toString().split('.')[1].length
				} catch (e) {
					r1 = 0
				}
				try {
					r2 = arg2.toString().split('.')[1].length
				} catch (e) {
					r2 = 0
				}
				c = Math.abs(r1 - r2)
				m = Math.pow(10, Math.max(r1, r2))
				if (c > 0) {
					var cm = Math.pow(10, c)
					if (r1 > r2) {
						arg1 = Number(arg1.toString().replace('.', ''))
						arg2 = Number(arg2.toString().replace('.', '')) * cm
					} else {
						arg1 = Number(arg1.toString().replace('.', '')) * cm
						arg2 = Number(arg2.toString().replace('.', ''))
					}
				} else {
					arg1 = Number(arg1.toString().replace('.', ''))
					arg2 = Number(arg2.toString().replace('.', ''))
				}
				return (arg1 + arg2) / m
			},
			/**
			 ** 减法函数，用来得到精确的减法结果
			 ** 说明：javascript的减法结果会有误差，在两个浮点数相减的时候会比较明显。这个函数返回较为精确的减法结果。
			 ** 调用：accSub(arg1,arg2)
			 ** 返回值：arg1加上arg2的精确结果
			 **/
			accSub: function(arg1, arg2) {
				var r1, r2, m, n
				try {
					r1 = arg1.toString().split('.')[1].length
				} catch (e) {
					r1 = 0
				}
				try {
					r2 = arg2.toString().split('.')[1].length
				} catch (e) {
					r2 = 0
				}
				m = Math.pow(10, Math.max(r1, r2)) //last modify by deeka //动态控制精度长度
				n = r1 >= r2 ? r1 : r2
				return ((arg1 * m - arg2 * m) / m).toFixed(n)
			},
			/** ----------------------------------火势蔓延  结束------------------------------------- */
			/** ----------------------------------热力图  结束------------------------------------- */
			loadHeatMap: async function(points) {
				var heatNumbers = 150,
					heatRadius = 30
				var num = parseInt(heatNumbers)
				num = (num > 0) ? num : 0
				var radius = parseInt(heatRadius)
				radius = (radius > 0) ? radius : 0
				var heatPoints = points
				// for (var i = 0; i < num; i++) {
				//   heatPoints[i] = [Math.random() * 0.28 + 42, Math.random() * 0.5 + 125, Math.random() * 80]
				// }
				var resultLayer = window.L.heatLayer(heatPoints, {
					radius: radius,
					minOpacity: 0.5
				}).addTo(this.map)
			},
			/** ----------------------------------热力图  开始------------------------------------- */
			clearM: async function(isAggregation) { //清理地图标点
				if (isAggregation) {
					if (this.isAggregationMyGroup != undefined && this.isAggregationMyGroup != false) {
						this.isAggregationMyGroup.clearLayers()
					}
					this.map.removeLayer(this.isAggregationLayers)
					this.isAggregationLayers = []
					this.radiusLayers = []
					this.isAggregationLayers = window.L.markerClusterGroup({
						//设置为true时显示聚类所占据的范围
						showCoverageOnHover: true,
						//设置为true时会向低一级聚类缩放
						zoomToBoundsOnClick: true,
						//增加点位时增加聚合动画（否则会出问题）
						animateAddingMarkers: true,
						//最大缩放级别点击聚合图标展开图标
						spiderfyOnMaxZoom: true
					})
				} else {
					if (this.myGroup != undefined && this.myGroup != false) {
						this.myGroup.clearLayers()
					}
					this.map.removeLayer(this.layers)
					this.layers = []
				}
			},
			clearMByType: async function(type) { //清理地图标点(根据类型,可取消落点)
				if (this.myGroupBytype != undefined && this.myGroupBytype != false) {
					for (var i = this.myGroupBytype.length - 1; i >= 0; i--) {
						if (this.myGroupBytype[i].type == type) {
							this.myGroupBytype[i].myGroup.clearLayers()
							this.myGroupBytype.splice(i, 1)
						}
					}
				}
				if (this.layersBytype != null && this.layersBytype.length > 0) {
					for (var i = this.layersBytype.length - 1; i >= 0; i--) {
						if (this.layersBytype[i].type == type) {
							this.layersBytype.splice(i, 1)
						}
					}
				}
			},
			clearC: async function() { //清理地图画线
				if (this.connectLayer != undefined && this.connectLayer != false) {
					this.connectLayer.clearLayers()
				}
				this.connectLayer = []
			},
			clearCTwo: async function() { //清理地图画线two
				if (this.connectLayerTwo != undefined && this.connectLayerTwo != false) {
					this.connectLayerTwo.clearLayers()
				}
				this.connectLayerTwo = []
			},
			clearG: async function() { //清理地图图形
				if (this.graphicsLayer != undefined && this.graphicsLayer != false) {
					this.graphicsLayer.clearLayers()
				}
				this.graphicsLayer = []
			},
			clearGTwo: async function() { //清理地图图形
				if (this.graphicsLayerTwo != undefined && this.graphicsLayerTwo != false) {
					this.graphicsLayerTwo.clearLayers()
				}
				this.graphicsLayerTwo = []
			},
			clearP: async function() { //清理点击事件落点
				if (this.latLngGroup != undefined && this.latLngGroup != false) {
					this.latLngGroup.clearLayers()
				}
				this.latLngLayers = []
			},
			initMap: function() {
				let _that = this
				this.mapDivId = this.mapDiv
				let mapSite = this.mapSite
				let isSideBySide = this.isSideBySide
				let isdynamicPlotting = this.isdynamicPlotting
				// setToken("eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImY5Zjg3ZjVmLWQ4NTctNDQxZC04NmQ5LTg4OWExZWRlODE4ZSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.26mAzmaM9pUza9585aLnRMyRd4GxvrWbCxN0erYsuiBDYQiYnyc-TwXVNDI7Xrpt3Bqmbnul-XMszOxYQi12LA");
				_that.isAggregationLayers = window.L.markerClusterGroup({
					//设置为true时显示聚类所占据的范围
					showCoverageOnHover: true,
					//设置为true时会向低一级聚类缩放
					zoomToBoundsOnClick: true,
					//增加点位时增加聚合动画（否则会出问题）
					animateAddingMarkers: true,
					//最大缩放级别点击聚合图标展开图标
					spiderfyOnMaxZoom: true
				})
				if (!isSideBySide) { //只有一个地图
					if (this.codes.length != 1) {
						modal.msgError('请输入一个地图code！')
						return
					}
					getSuperMap(this.codes).then(resp => {

						let mapList = resp.data
						if (mapList != null && mapList.length > 0) {
							let url = mapList[0].url
							let centerLat = mapList[0].centerLat
							let centerLng = mapList[0].centerLng
							let zoom = mapList[0].zoom //默认比例
							let maxZoom = mapList[0].maxZoom //最大比例
							let minZoom = mapList[0].minZoom //最小比例
							let zoomControl = mapList[0].zoomControl == null ? true : mapList[0]
								.zoomControl //地图缩放+-号是否显示
							let attributionControl = mapList[0].attributionControl == null ? true : mapList[0]
								.attributionControl //logo是否显示
							let logoControl = mapList[0].logoControl == null ? false : mapList[0]
								.logoControl //logo是否显示
							let dragging = mapList[0].dragging == null ? true : mapList[0]
								.dragging //地图是否允许鼠标拖拽

							let defaultConfigure = {
								crs: window.L.CRS.EPSG4326,
								center: [centerLat, centerLng],
								maxZoom: maxZoom,
								minZoom: minZoom,
								zoom: zoom,
								editable: true,
								zoomControl: zoomControl,
								attributionControl: attributionControl,
								dragging: dragging,
								logoControl: logoControl
							}
							let loadConfiguration = Object.assign(defaultConfigure, mapSite)
							this.map = window.L.map(this.mapDiv, loadConfiguration)

							//鼠标双击落点
							if (this.showLatLng != undefined) {
								let icon = new window.L.Icon({
									iconUrl: iconList['marker'],
									iconSize: [48, 48],
									iconAnchor: [24, 40],
									popupAnchor: [-3, -40],
									shadowSize: [41, 41]
								})

								this.map.on('dblclick', function(e) {
									_that.clearP()
									_that.showLatLng(e.latlng.lat, e.latlng.lng)
									let marker = window.L.marker([e.latlng.lat, e.latlng.lng], {
										icon: icon
									}).addTo(this.map)
									_that.latLngLayers.push(marker)
									_that.latLngGroup = window.L.layerGroup(_that.latLngLayers)
									this.map.addLayer(_that.latLngGroup)
								})
							}
							//鼠标绘制区域
							if (this.showAreaLatLng != undefined) {
								var editableLayers = new window.L.FeatureGroup()
								this.map.addLayer(editableLayers)
								let options = {
									position: 'topleft',
									draw: {
										polyline: null,
										polygon: {},
										circle: null,
										rectangle: null,
										circlemarker: null,
										marker: null,
										remove: {}
									},
									edit: {
										featureGroup: editableLayers,
										remove: true
									}
								}
								var drawControl = new window.L.Control.Draw(options)
								this.map.addControl(drawControl)
								this.map.on(window.L.Draw.Event.CREATED, function(e) {
									let editableLayer = e.layer
									let layerType = e.layerType
									editableLayer.on('dblclick', function(e) {
										if (layerType === 'polygon' || layerType ===
											'rectangle') {
											let latlng = editableLayer.getLatLngs()[0]
											_that.showAreaLatLng(latlng)
										}
									})
									editableLayers.addLayer(editableLayer)
								})
							}
							//鼠标绘制线段
							if (this.showLineLatLng != undefined) {
								var editableLayers = new window.L.FeatureGroup()
								this.map.addLayer(editableLayers)
								let options = {
									position: 'topleft',
									draw: {
										polyline: {},
										polygon: null,
										circle: null,
										rectangle: null,
										circlemarker: null,
										marker: null,
										remove: {}
									},
									edit: {
										featureGroup: editableLayers,
										remove: true
									}
								}
								var drawControl = new window.L.Control.Draw(options)
								this.map.addControl(drawControl)
								this.map.on(window.L.Draw.Event.CREATED, function(e) {
									let editableLayer = e.layer
									let layerType = e.layerType
									editableLayer.on('dblclick', function(e) {
										if (layerType === 'polyline') {
											let latlng = editableLayer.getLatLngs()
											_that.showLineLatLng(latlng)
										}
									})
									editableLayers.addLayer(editableLayer)
								})
							}
							// url = 'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China_4326'

							window.L.supermap.tiledMapLayer(url).addTo(this.map)
						}
					})
				} else { //卷帘地图
					if (this.codes.length != 2) {
						modal.msgError('请输入两个地图code！')
						return
					}
					getSuperMap(this.codes).then(resp => {
						let mapList = resp.data
						if (mapList != null && mapList.length == 2) {
							let stamenurl = mapList[0].url
							let osmurl = mapList[1].url
							let centerLat = mapList[0].centerLat
							let centerLng = mapList[0].centerLng
							let zoom = mapList[0].zoom //默认比例
							let maxZoom = mapList[0].maxZoom //最大比例
							let minZoom = mapList[0].minZoom //最小比例
							let zoomControl = mapList[0].zoomControl == null ? true : mapList[0]
								.zoomControl //地图缩放+-号是否显示
							let attributionControl = mapList[0].attributionControl == null ? true : mapList[0]
								.attributionControl //logo是否显示
							let logoControl = mapList[0].logoControl == null ? false : mapList[0]
								.logoControl //logo是否显示
							let dragging = mapList[0].dragging == null ? true : mapList[0]
								.dragging //地图是否允许鼠标拖拽

							let defaultConfigure = {
								crs: window.L.CRS.EPSG4326,
								center: [centerLat, centerLng],
								maxZoom: maxZoom,
								minZoom: minZoom,
								zoom: zoom,
								editable: true,
								zoomControl: zoomControl,
								attributionControl: attributionControl,
								dragging: dragging,
								logoControl: logoControl
							}

							let loadConfiguration = Object.assign(defaultConfigure, mapSite)
							this.map = window.L.map(this.mapDiv, loadConfiguration)
							//鼠标双击落点
							if (this.showLatLng != undefined) {
								let icon = new window.L.Icon({
									iconUrl: iconList['marker'],
									iconSize: [48, 48],
									iconAnchor: [24, 40],
									popupAnchor: [-3, -40],
									shadowSize: [41, 41]
								})

								this.map.on('dblclick', function(e) {
									_that.clearP()
									_that.showLatLng(e.latlng.lat, e.latlng.lng)
									let marker = window.L.marker([e.latlng.lat, e.latlng.lng], {
										icon: icon
									}).addTo(this.map)
									_that.latLngLayers.push(marker)
									_that.latLngGroup = window.L.layerGroup(_that.latLngLayers)
									this.map.addLayer(_that.latLngGroup)
								})
							}
							//鼠标绘制区域
							if (this.showAreaLatLng != undefined) {
								var editableLayers = new window.L.FeatureGroup()
								this.map.addLayer(editableLayers)
								let options = {
									position: 'topleft',
									draw: {
										polyline: null,
										polygon: {},
										circle: null,
										rectangle: null,
										circlemarker: null,
										marker: null,
										remove: {}
									},
									edit: {
										featureGroup: editableLayers,
										remove: true
									}
								}
								var drawControl = new window.L.Control.Draw(options)
								this.map.addControl(drawControl)
								this.map.on(window.L.Draw.Event.CREATED, function(e) {
									let editableLayer = e.layer
									let layerType = e.layerType
									editableLayer.on('dblclick', function(e) {
										if (layerType === 'polygon' || layerType ===
											'rectangle') {
											let latlng = editableLayer.getLatLngs()[0]
											_that.showAreaLatLng(latlng)
										}
									})
									editableLayers.addLayer(editableLayer)
								})
							}
							//鼠标绘制线段
							if (this.showLineLatLng != undefined) {
								var editableLayers = new window.L.FeatureGroup()
								this.map.addLayer(editableLayers)
								let options = {
									position: 'topleft',
									draw: {
										polyline: {},
										polygon: null,
										circle: null,
										rectangle: null,
										circlemarker: null,
										marker: null,
										remove: {}
									},
									edit: {
										featureGroup: editableLayers,
										remove: true
									}
								}
								var drawControl = new window.L.Control.Draw(options)
								this.map.addControl(drawControl)
								this.map.on(window.L.Draw.Event.CREATED, function(e) {
									let editableLayer = e.layer
									let layerType = e.layerType
									editableLayer.on('dblclick', function(e) {
										if (layerType === 'polyline') {
											let latlng = editableLayer.getLatLngs()
											_that.showLineLatLng(latlng)
										}
									})
									editableLayers.addLayer(editableLayer)
								})
							}

							let stamenLayer = window.L.supermap.tiledMapLayer(stamenurl).addTo(this.map)
							let osmLayer = window.L.supermap.tiledMapLayer(osmurl).addTo(this.map)
							L.control.sideBySide(stamenLayer, osmLayer).addTo(this.map)
						}
					})
				}
			},
			// 获取面积
			/**
			 * polygon [{lat:30,lng:104},{lat:30,lng:104},{lat:30,lng:104}]
			 */
			formatArea: function(polygon) {
				//L.GeometryUtil.geodesicArea(),返回number类型的数据，单位是平方米，这里做了一下转化
				var seeArea = window.L.GeometryUtil.geodesicArea(polygon)
				let area = (seeArea / 10e5).toFixed(2) + 'k㎡'
				return area
			},
			// 获取长度
			/**
			 * line[{lat:30,lng:104},{lat:30,lng:104},{lat:30,lng:104}]
			 */
			formatLength: function(line) {
				let dis = 0
				for (let i = 0; i < line.length - 1; i++) {
					let start = line[i]
					let end = line[i + 1]
					dis += window.L.latLng([start.lat, start.lng]).distanceTo([end.lat, end.lng]) //计算两个点之间的距离，并累加
				}
				//结果得到的也是number类型，单位是 米
				return (dis / 10e2).toFixed(2) + 'km'
			},
			setMarkers: function(markersList) { //地图标点
				const _that = this
				for (let i = 0; i < markersList.length; i++) {
					let isAggregation = markersList[i].isAggregation == null ? false : markersList[i]
						.isAggregation //是否聚合点位
					let keepBindPopup = isAggregation == true ? false : markersList[i].keepBindPopup //提示气泡是否一直显示

					let icon = new window.L.Icon({
						iconUrl: iconList[markersList[i].icon],
						iconSize: [48, 48],
						iconAnchor: [24, 40],
						popupAnchor: [-3, -40],
						shadowSize: [41, 41]
					})
					let markerClick = window.L.marker([markersList[i].lat, markersList[i].lng], {
						icon: icon
					})
					if (markersList[i].bindPopupHtml != null && markersList[i].bindPopupHtml !== '') {
						let html = markersList[i].bindPopupHtml
						if (keepBindPopup) {
							markerClick.bindPopup(html, {
								autoClose: false,
								closeOnClick: null,
								closeButton: false
							}).openPopup(markerClick.getLatLng())
						} else {
							markerClick.on('mouseover', function() {
								let html = markersList[i].bindPopupHtml
								this.bindPopup(html).openPopup(this.getLatLng())
							}).on('mouseout', function() {
								this.closePopup()
							})
						}
					}
					if (markersList[i].click != null && markersList[i].click !== '') {
						if (markersList[i].parameter != null && markersList[i].parameter !== '') {
							markerClick.on('click', function() {
								let clickName = markersList[i].click
								_that.$emit(clickName, markersList[i].parameter)
							})
						} else {
							markerClick.on('click', function() {
								let clickName = markersList[i].click
								_that.$emit(clickName)
							})
						}
					}
					if (isAggregation) {
						_that.isAggregationLayers.addLayer(markerClick)
						_that.isAggregationMyGroup = window.L.layerGroup(_that.isAggregationLayers)
					} else {
						_that.layers.push(markerClick)
						_that.myGroup = window.L.layerGroup(_that.layers)
					}
				}
				if (_that.myGroup != undefined && _that.myGroup != false) {
					_that.map.addLayer(_that.myGroup)
				}
				_that.map.addLayer(_that.isAggregationLayers)
			},
			setMarkersByType: function(markersList, type) { //地图标点(根据类型,可取消落点 clearMByType方法)
				const _that = this
				let lay = []
				let myGroup = []
				for (let i = 0; i < markersList.length; i++) {
					let keepBindPopup = markersList[i].keepBindPopup //提示气泡是否一直显示

					let icon = new window.L.Icon({
						iconUrl: iconList[markersList[i].icon],
						iconSize: [48, 48],
						iconAnchor: [24, 40],
						popupAnchor: [-3, -40],
						shadowSize: [41, 41]
					})
					let markerClick = window.L.marker([markersList[i].lat, markersList[i].lng], {
						icon: icon
					}).addTo(this.map)
					if (markersList[i].bindPopupHtml != null && markersList[i].bindPopupHtml !== '') {
						let html = markersList[i].bindPopupHtml
						if (keepBindPopup) {
							markerClick.bindPopup(html, {
								autoClose: false,
								closeOnClick: null,
								closeButton: false
							}).openPopup(markerClick.getLatLng())
						} else {
							markerClick.on('mouseover', function() {
								let html = markersList[i].bindPopupHtml
								this.bindPopup(html).openPopup(this.getLatLng())
							}).on('mouseout', function() {
								this.closePopup()
							})
						}
					}
					if (markersList[i].click != null && markersList[i].click !== '') {
						if (markersList[i].parameter != null && markersList[i].parameter !== '') {
							markerClick.on('click', function() {
								let clickName = markersList[i].click
								_that.$emit(clickName, markersList[i].parameter)
							})
						} else {
							markerClick.on('click', function() {
								let clickName = markersList[i].click
								_that.$emit(clickName)
							})
						}
					}
					lay.push(markerClick)
					_that.layersBytype.push({
						type: type,
						marker: markerClick
					})
					myGroup = window.L.layerGroup(lay)
					_that.myGroupBytype.push({
						type: type,
						myGroup: myGroup
					})
					this.map.addLayer(myGroup)
				}
			},
			setMarkersRadius: function(markersList) { //地图标点带范围
				const _that = this
				for (let i = 0; i < markersList.length; i++) {
					let isAggregation = markersList[i].isAggregation == null ? false : markersList[i]
						.isAggregation //是否聚合点位
					let keepBindPopup = isAggregation == true ? false : markersList[i].keepBindPopup //提示气泡是否一直显示

					_that.polygon = window.L.circle([markersList[i].lat, markersList[i].lng], {
						radius: markersList[i].radius
					})
					let icon = new window.L.Icon({ //传感器
						iconUrl: iconList[markersList[i].icon],
						iconSize: [48, 48],
						iconAnchor: [24, 40],
						popupAnchor: [-3, -40],
						shadowSize: [41, 41]
					})
					let marker = window.L.marker([markersList[i].lat, markersList[i].lng], {
						icon: icon
					})
					if (markersList[i].bindPopupHtml != null && markersList[i].bindPopupHtml !== '') {
						let html = markersList[i].bindPopupHtml
						if (keepBindPopup) {
							marker.bindPopup(html, {
								autoClose: false,
								closeOnClick: null,
								closeButton: false
							}).openPopup(marker.getLatLng())
						} else {
							marker.on('mouseover', function() {
								let html = markersList[i].bindPopupHtml
								this.bindPopup(html).openPopup(this.getLatLng())
							}).on('mouseout', function() {
								this.closePopup()
							})
						}
					}
					if (markersList[i].click != null && markersList[i].click != '') {
						if (markersList[i].parameter != null && markersList[i].parameter !== '') {
							marker.on('click', function() {
								let clickName = markersList[i].click
								_that.$emit(clickName, markersList[i].parameter)
							})
						} else {
							marker.on('click', function() {
								let clickName = markersList[i].click
								_that.$emit(clickName)
							})
						}
					}
					marker.addTo(this.map)

					if (isAggregation) {
						_that.isAggregationLayers.addLayer(marker)
						_that.radiusLayers.push(_that.polygon)
						this.map.addLayer(_that.isAggregationLayers)
						_that.isAggregationMyGroup = window.L.layerGroup(_that.radiusLayers)
						this.map.addLayer(_that.isAggregationMyGroup)
					} else {
						_that.layers.push(marker)
						_that.layers.push(_that.polygon)
						_that.myGroup = window.L.layerGroup(_that.layers)
						this.map.addLayer(_that.myGroup)
					}
				}
			},
			setConnectList: function(connectList, color) { //地图画线
				const _that = this
				let points = []
				for (let i = 0; i < connectList.length; i++) {
					points.push([connectList[i].lat, connectList[i].lng]) //创建点
				}
				let polyline = window.L.polyline(points, {
					color: color
				})
				if (this.connectLayer != undefined && this.connectLayer != false) {
					_that.connectLayer.addLayer(polyline)
				} else {
					_that.connectLayer = window.L.featureGroup().addTo(this.map)
					_that.connectLayer.addLayer(polyline)
				}
			},
			setConnectTwoList: function(connectList, color) { //地图画线图层2
				const _that = this
				let points = []
				for (let i = 0; i < connectList.length; i++) {
					points.push([connectList[i].lat, connectList[i].lng]) //创建点
				}
				let polyline = window.L.polyline(points, {
					color: color
				})
				if (this.connectLayerTwo != undefined && this.connectLayerTwo != false) {
					_that.connectLayerTwo.addLayer(polyline)
				} else {
					_that.connectLayerTwo = window.L.featureGroup().addTo(this.map)
					_that.connectLayerTwo.addLayer(polyline)
				}
			},
			setGraphicsList: function(graphicsList, color) { //地图图形
				const _that = this
				let points = []
				for (let i = 0; i < graphicsList.length; i++) {
					points.push([graphicsList[i].lat, graphicsList[i].lng]) //创建点
				}
				let polygon = window.L.polygon(points, {
					color: color
				})
				polygon.addTo(this.map)
				if (this.graphicsLayer != undefined && this.graphicsLayer != false) {
					_that.graphicsLayer.addLayer(polygon)
				} else {
					_that.graphicsLayer = window.L.featureGroup().addTo(this.map)
					_that.graphicsLayer.addLayer(polygon)
				}
			},
			setGraphicsListTwo: function(graphicsList, color) { //地图图形(林业植树造林双图层用)
				const _that = this
				let points = []
				for (let i = 0; i < graphicsList.length; i++) {
					points.push([graphicsList[i].lat, graphicsList[i].lng]) //创建点
				}
				let polygon = window.L.polygon(points, {
					color: color
				})
				polygon.addTo(this.map)
				if (this.graphicsLayerTwo != undefined && this.graphicsLayerTwo != false) {
					_that.graphicsLayerTwo.addLayer(polygon)
				} else {
					_that.graphicsLayerTwo = window.L.featureGroup().addTo(this.map)
					_that.graphicsLayerTwo.addLayer(polygon)
				}
			},
			dropLocation: function(lat, lng) { //落点定位
				this.map.flyTo([lat, lng], 13, {
					duration: 2
				})
			},
			dropLocation: function(lat, lng,leve) { //落点定位
				this.map.flyTo([lat, lng], leve, {
					duration: 2
				})
			},
			dropLocation10: function(lat, lng) { //落点定位
				this.map.flyTo([lat, lng], 10, {
					duration: 2
				})
			},
			dropLocation5: function(lat, lng) { //落点定位
				this.map.flyTo([lat, lng], 5, {
					duration: 2
				})
			},
			controlLevel: function(level) { //控制地图缩放级别
				this.map.setZoom(level)
			},
			layerSwitching: function(url, isClear) { //图层切换  url 图层地址   isClear  是否清除图层
				if (isClear) {
					if (this.deckglLayer != null) {
						this.deckglLayer.remove()
					}
				}
				if (url != null) {
					this.deckglLayer = window.L.supermap.tiledMapLayer(url, {})
					this.map.addLayer(this.deckglLayer)
				}
			},
			layerSwitchingList: function(urlList) { //图层切换数组  urlList 图层地址(数组)
				if (this.deckglLayerList != null && this.deckglLayerList.length > 0) {
					for (let i = 0; i < this.deckglLayerList.length; i++) {
						this.deckglLayerList[i].remove()
					}
				}
				if (urlList != null && urlList.length > 0) {
					for (let i = 0; i < urlList.length; i++) {
						if (urlList[i] != null) {
							this.deckglLayer = window.L.supermap.tiledMapLayer(urlList[i], {})
							this.deckglLayerList.push(this.deckglLayer)
							this.map.addLayer(this.deckglLayer)
						}
					}
				}
			},
      /** -------------------------------图层地址(数组)  带数据图层---开始------------------------------- */
			layerSwitchingList_Data: function(banCheckList) { //图层切换数组  urlList 图层地址(数组)  带数据图层
				let that = this
        that.initInfoView();
        //清除图层，遍历图层多次清除
        if(that.lbtThemeLayer != null){
          that.map.eachLayer(function(layer){
            if(layer.name == "lbtThemeLayer"){
              that.map.removeLayer(that.lbtThemeLayer);
            }
            console.log(layer.name);
          });
        }
        // 定义 Unique 单值专题图层
        that.lbtThemeLayer = window.L.supermap.uniqueThemeLayer("lbtThemeLayer", {
          // 开启 hover 高亮效果
          isHoverAble: true,
          opacity: 0.6,
          alwaysMapCRS: true
        }).addTo(that.map);

        // 图层基础样式
        that.lbtThemeLayer.style = new SuperMap.ThemeStyle({
          shadowBlur: 3,
          shadowColor: "#000000",
          shadowOffsetX: 1,
          shadowOffsetY: 1,
          fillColor: "#ff4400",
          fillOpacity: 0
        });

        // hover 高亮样式
        that.lbtThemeLayer.highlightStyle = new SuperMap.ThemeStyle({
          stroke: true,
          strokeWidth: 2,//线宽
          strokeColor: '#0ff',//线色
          fillColor: "#09f",//面色
          fillOpacity: 0.3//透明度
        });
        that.lbtThemeLayer.on("mousemove", that.lbtHighLightLayer);

        that.lbtThemeLayer.on('dblclick', function(e) {
          that.showBanData = true
          var fea = that.lbtThemeLayer.getFeatureById(e.target.refDataID);
          that.banDataList = fea.attributes
        })


				//清除地图图层
				if (that.deckglLayerList_Data != null && that.deckglLayerList_Data.length > 0) {
					for (let i = 0; i < that.deckglLayerList_Data.length; i++) {
						that.deckglLayerList_Data[i].remove()
					}
				}
				//清除数据图层
				if (that.resultLayer_Data != null && that.resultLayer_Data.length > 0) {
					for (let i = 0; i < that.resultLayer_Data.length; i++) {
						that.resultLayer_Data[i].remove()
					}
				}
				if (banCheckList != null && banCheckList.length > 0) {
					for (let i = 0; i < banCheckList.length; i++) {

            that.deckglLayer = window.L.supermap.tiledMapLayer(banCheckList[i].farmAddress, {})
            that.deckglLayerList_Data.push(that.deckglLayer)
            that.map.addLayer(that.deckglLayer)
						if (banCheckList[i].farmAddress != null) {
              var getFeatureBySQLParams = new SuperMap.GetFeaturesBySQLParameters({
                queryParameter: {
                  name: banCheckList[i].name,
                },
                datasetNames: banCheckList[i].datasetNames,
                maxFeatures:20000,
                fromIndex: 0,
                toIndex: 999999
              })

              window.L.supermap.featureService("http://121.36.228.94:8090/iserver/services/data-baishan/rest/data")
                .getFeaturesBySQL(getFeatureBySQLParams, function(serviceResult) {
                  if (serviceResult.hasOwnProperty('result') && serviceResult.result
                    .hasOwnProperty('features')) {
                    that.lbtThemeLayer.addFeatures(serviceResult.result.features);
                  }
                }, SuperMap.DataFormat.ISERVER);
						}
					}
				}
			},
       lbtHighLightLayer :function(e){
        if (e.target && e.target.refDataID) {
          var fea = this.lbtThemeLayer.getFeatureById(e.target.refDataID);
          if (fea) {
            //此处写信息渲染代码

          }
        } else if (this.lbtInfoView) {
          this.lbtInfoView.remove();
        }
      },
      //高亮时显示图层信息框的控件
       initInfoView :function() {
        this.infoView = window.L.control({position: 'bottomleft'});
        this.infoView.onAdd = function () {
          this._div = window.L.DomUtil.create('div', 'panel panel-primary infoPane');
          $(this._div).css("width", "150px");
          $("<div class='panel-heading'><h5 class='panel-title text-center'>林场信息</h5></div>").appendTo(this._div);
          var content = $("<div class='panel-body content'></div>").appendTo(this._div);
          content.css('fontSize', '14px');
          handleMapEvent(this._div, this._map);
          return this._div;
        };

        this.infoView.update = function (fea) {
          var content = $(".content");
          content.text("");
          if (!fea) {
            return;
          }
          var car_count = parent.$("#"+fea.attributes.SMID).val();
          if(car_count == undefined){
            car_count =0;
          }
          console.log(fea.attributes.SMID);
        }
      },
      /** -------------------------------图层地址(数组)  带数据图层---结束------------------------------- */


			/** ----------------------------------动态绘制开始------------------------------------- */
			clearLayers: function() {
				this.plottingLayer.removeAllFeatures()
			},
			PlottingDrawCancel: function() {
				this.plottingdrawControl.handler.disable()
			},
			getspuerMapHost() {
				selectConfigKey('superMap.iserver.plot').then(res => {
					this.host = res.data
				})
			},
			dynamicPlotting: function() {
				setTimeout(() => {
					var host = this.host
					var serverUrl = host + '/iserver/services/plot-jingyong/rest/plot/'

					var me = this
					this.plottingLayer = window.L.supermap.plotting.plottingLayer('plot',
						serverUrl)
					this.plottingLayer.spatialAnalystUrl =
						host + '/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst'
					this.plottingLayer.addTo(this.map)
					this.plottingdrawControl = window.L.supermap.plotting.drawControl(this
						.plottingLayer)
					this.plottingdrawControl.addTo(this.map)
					var editControl = window.L.supermap.plotting.editControl()
					editControl.addTo(this.map)
					window.L.supermap.plotting.initPlotPanel('plotPanel', serverUrl, this
						.plottingdrawControl)
				}, 2000)
			}
			/** ----------------------------------动态绘制结束------------------------------------- */
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/styles/base.scss';

	.panel {
		margin-bottom: .5rem;

		button {
			margin-top: .5rem;
		}

		.input-group {
			display: flex;
			flex-direction: row;
			align-items: center;

			.input-group-addon {
				color: $inBlue;
				width: 3rem;
				text-align: right;

			}

			.form-control {
				padding: 0 .3rem;
				margin-left: .5rem;
				height: 1.5rem;
				line-height: 1.5rem;
				background-color: #112543;
				color: $inBlue;
				border: 1px $searchBorder;
			}
		}
	}

	.button-group {
		button {
			padding: 0 0.3rem;
			height: 1.5rem;
			background-color: #112543;
			color: #2bacf7;
			border: 1px solid #33467f;
		}

		button:hover {
			border: 1px solid #33467f;
			background-color: #112543;
			text-shadow: 0 0 15px rgba($color: $inBlueHover, $alpha: 1.0);
		}
	}
</style>