mobile_h5/actMgt/utils/map/sub/checkPoint.js

// import L from 'leaflet'
// import 'leaflet-clipper/dist/L.Clipper'
// import * as turf from '@turf/turf'
import config from '@/utils/map/sub/config'
import global from '@/utils/map/sub/global'

var toggleFlag = false
export default {
	cpMarkLayerGroup: null, // 检查点标记图层组
	cpMemoLayerGroup: null, // 检查点备注图层组
	cpPathLayerGroup: null, // 检查点路线图层组
	
	init() {
		this.cpMarkLayerGroup = new L.featureGroup()
		this.cpMemoLayerGroup = new L.featureGroup()
		this.cpPathLayerGroup = new L.featureGroup()
	},
	// 即将开始地图缩放时触发本方法
	onZoomStart(e) {
		// this.cpMarkLayerGroup.remove()
		this.cpMemoLayerGroup.remove()
		this.cpPathLayerGroup.remove()
	},
	// 地图发生缩放时触发本方法
	onZoom(e) {
	},
	// 地图缩放结束时触发本方法
	onZoomEnd(e) {
		this.drawPath()
		// this.cpMarkLayerGroup.addTo(global.map)
		this.cpMemoLayerGroup.addTo(global.map)
		this.cpPathLayerGroup.addTo(global.map)
		
		this.cpMarkLayerGroup.bringToBack()
		this.cpMemoLayerGroup.bringToBack()
		this.cpPathLayerGroup.bringToBack()
	},
	toggle(flag) {
		// console.log('toggle:', flag)
		if (flag != null) {
			toggleFlag = !flag
		}
		
		if (toggleFlag) {
			this.cpMarkLayerGroup.removeFrom(global.map)
			this.cpMemoLayerGroup.removeFrom(global.map)
			this.cpPathLayerGroup.removeFrom(global.map)
			
			toggleFlag = false
		} else {
			this.cpMarkLayerGroup.addTo(global.map)
			this.cpMemoLayerGroup.addTo(global.map)
			this.cpPathLayerGroup.addTo(global.map)
			
			this.cpMarkLayerGroup.bringToBack()
			this.cpMemoLayerGroup.bringToBack()
			this.cpPathLayerGroup.bringToBack()
			
			toggleFlag = true
		}
	},
	drawAllCheckPoints() {
		if (this.cpMarkLayerGroup != null)
			this.cpMarkLayerGroup.clearLayers()
		if (this.cpMemoLayerGroup != null)
			this.cpMemoLayerGroup.clearLayers()
			
		for (let i = 0; i < global.checkPoints.length; i++) {
			this.drawOneCheckPoint(global.checkPoints[i].cp_id)
		}
	},
	drawOneCheckPoint(cpId) {
		// var that = this
		var checkPoint = global.getCheckPointById(cpId)

		if (checkPoint == null) {
			console.warn('[drawOneCheckPoint] 关键数据为空', checkPoint)
			return
		}
				
		// var marker = L.circle([checkPoint.latitude, checkPoint.longitude], config.gStyle.checkPoint.default)
		var marker = L.circleMarker([checkPoint.latitude, checkPoint.longitude], config.gStyle.checkPoint.default)
		.addTo(this.cpMarkLayerGroup)
		// .addTo(global.map)
		// .bindPopup("Hello, I'm a Marker!<br><img src='my-image.png' width='100'>").openPopup();
		// .bindTooltip(`检查点：${checkPoint.serial_num}`, config.gStyle.checkPoint.tooltip)

		var myIcon = L.divIcon({
			html: '<div>CP:' + checkPoint.serial_num + '</div>',
			className: 'my-div-icon',
			iconSize: [60, 20], //宽高
			iconAnchor: [30, 35] //文字标注相对位置
		});
		var markerMemo = L.marker([checkPoint.latitude, checkPoint.longitude], {
			icon: myIcon,
			// zIndexOffset: -100
		})
		.addTo(this.cpMemoLayerGroup)

		// this.cpMarkLayerGroup.addTo(global.map)
		// this.cpMemoLayerGroup.addTo(global.map)
		this.cpMarkLayerGroup.bringToBack()
		this.cpMemoLayerGroup.bringToBack()

		checkPoint.marker = marker
		checkPoint.markerMemo = markerMemo
	},
	drawPath() {
		if (this.cpPathLayerGroup != null) {
			this.cpPathLayerGroup.clearLayers()
		}
		
		var latlngs = []
		for (var i = 0; i < global.checkPoints.length; i++) {
			var cp = global.checkPoints[i]
			latlngs.push([cp.latitude, cp.longitude])
		}
		
		var radius = config.gStyle.checkPoint.default.radius
		var Lines = this.getIntersection(latlngs, radius) // 获取（圆与路线的）交叉点坐标

		// var polyline = L.polyline(latlngs, config.gStyle.checkPointPath.default)
		var polyline = L.polyline(Lines, config.gStyle.checkPointPath.default)
		.addTo(this.cpPathLayerGroup)
		
		// this.cpPathLayerGroup.addTo(global.map)
		this.cpPathLayerGroup.bringToBack()
	},
	// 获取（圆与路线的）交叉点坐标
	getIntersection(LatLngArry, radius) {
		// var LatLngArry = [
		// 	[36.672562, 117.127572],
		// 	[36.67165, 117.129262],
		// 	[36.671409, 117.126752]
		// ]
		var PointArry = []
		// var Circles = []
		var radius = 20 // 圆的半径 px
		var DistanceArry = []
		var Lines = []
		for (let i = 0; i < LatLngArry.length; i++) {
			// 给定地理坐标，返回相应的像素坐标 (相对于原点像素)
			let point = global.map.latLngToLayerPoint(LatLngArry[i])
			PointArry.push(point)
			// let circle = L.circle(LatLngArry[i], {
			// 	radius: radius
			// }).addTo(global.map);
			// Circles.push(circle)
			if (i > 0) {
				// 计算相邻两个点之间的距离
				let distance = L.point(PointArry[i]).distanceTo(L.point(PointArry[i-1]))
				DistanceArry.push(distance)
				
				// 计算圆半径占比
				let per = parseFloat(radius.toFixed(16) / distance.toFixed(16)).toFixed(16)
				// console.log('per:', per, i)
				// console.log('PointArry:', PointArry[i])
				
				let offsetX = parseFloat((PointArry[i].x.toFixed(16) - PointArry[i-1].x.toFixed(16)) * per).toFixed(16)
				let offsetY = parseFloat((PointArry[i].y.toFixed(16) - PointArry[i-1].y.toFixed(16)) * per).toFixed(16)
				// console.log('offset:', offsetX, offsetY)
				// 给定相对于原点像素的像素坐标， 返回相应的地理坐标（对于当前缩放级别）
				let line = [
					global.map.layerPointToLatLng([
						parseFloat(PointArry[i-1].x) + parseFloat(offsetX),
						parseFloat(PointArry[i-1].y) + parseFloat(offsetY)
					]), 
					global.map.layerPointToLatLng([
						parseFloat(PointArry[i].x) - parseFloat(offsetX),
						parseFloat(PointArry[i].y) - parseFloat(offsetY)
					])
				] 
				Lines.push(line)
			}
		}
		// console.log('DistanceArry', DistanceArry)
		// console.log('Lines', Lines)
		
		// var polyline = L.polyline(Lines, config.gStyle.checkPointPath.default).addTo(global.map)
		return Lines
	},
	test() {
	},
	free() {
	}
}