mobile_h5/actMgt/utils/map/sub/route.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'
import store from '@/store/index'

var toggleFlag = store.state.mapControlRoute
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) {
		if (toggleFlag) {
			this.drawAllPath()
			// 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)
		} 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 = !toggleFlag
		// console.log('toggleFlag:', toggleFlag)
		store.commit('setMapControlRoute', toggleFlag)
	},
	drawAllRoutes() {
		// console.log("[drawAllRoutes] routes", global.routes)
		if (this.cpMarkLayerGroup != null)
			this.cpMarkLayerGroup.clearLayers()
		if (this.cpMemoLayerGroup != null)
			this.cpMemoLayerGroup.clearLayers()

		for (let i = 0; i < global.routes.length; i++) {
			this.drawOneRoute(global.routes[i].id)
		}
	},
	drawOneRoute(rtId) {
		// var that = this
		var cpList = global.getRouteById(rtId).control_point_sorted_list

		if (cpList == null) {
			console.warn('[drawOneRoute] 关键数据为空', cpList)
			return
		}
		// console.log('[drawOneRoute] cpList', cpList)

		var type = ''
		for (var i = 0; i < cpList.length; i++) {
			if (i == 0) {
				type = 'start'
			} else if (i == cpList.length - 1) {
				type = 'end'
			} else {
				type = ''
			}
			let res = this.drawOnePoint(cpList[i], type)
			cpList[i].marker = res.marker
			cpList[i].markerMemo = res.markerMemo
		}
	},
	drawOnePoint(data, type="") {
		// console.log('[drawOnePoint] data', data)
		if (data == null) {
			console.warn('[drawOnePoint] 关键数据为空', data)
			return
		}
		
		var position = data.ciPosition
		var radius = config.gStyle.checkPoint.default.radius
		var iconSize = [radius*2, radius*2]
		
		var html = ""
		var iconUrl = ""
		var marker = ""
		if (type == "start") {
			// html = '<div>开始点</div>'
			iconUrl = "static/map/point_start.png"
			var markerIcon = L.icon({
				iconUrl: iconUrl,
				iconSize: iconSize,
				// iconSize: [30, 30],
				// iconAnchor: [10, 30]
			});
			var marker = L.marker([position.latitude, position.longitude], {
					icon: markerIcon
				})
				.addTo(this.cpMarkLayerGroup)
			
		} else if (type == "end") {
			// html = '<div>结束点</div>'
			// html = '<div>' + data.orderNO + '</div>'
			iconUrl = "static/map/point_end.png"
			var markerIcon = L.icon({
				iconUrl: iconUrl,
				iconSize: iconSize,
				// iconSize: [30, 30],
				// iconAnchor: [10, 30]
			});
			var marker = L.marker([position.latitude, position.longitude], {
					icon: markerIcon
				})
				.addTo(this.cpMarkLayerGroup)
		}
		else {	// 中间点
			// html = '<div>' + data.sn + '</div>'
			html = '<div>' + data.orderNO + '</div>'
			iconUrl = "static/map/point.png"
			var markerIcon = L.icon({
				iconUrl: iconUrl,
				iconSize: iconSize,
				// iconSize: [30, 30],
				// iconAnchor: [10, 30]
			});
			var marker = L.marker([position.latitude, position.longitude], {
					icon: markerIcon
				})
				.addTo(this.cpMarkLayerGroup)
			// marker = L.circleMarker([position.latitude, position.longitude], config.gStyle.checkPoint.default)
			// 	.addTo(this.cpMarkLayerGroup)
		}

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

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

		return {
			marker: marker,
			markerMemo: markerMemo
		}
	},
	drawAllPath() {
		// console.log("[drawAllPath] routes", global.routes)
		if (this.cpPathLayerGroup != null) {
			this.cpPathLayerGroup.clearLayers()
		}

		for (let i = 0; i < global.routes.length; i++) {
			this.drawOnePath(global.routes[i].id)
		}
	},
	drawOnePath(rtId) {
		var cpList = global.getRouteById(rtId).control_point_sorted_list
		// console.log("[drawOnePath] cpList", cpList)

		var latlngs = []
		for (var i = 0; i < cpList.length; i++) {
			var position = cpList[i].ciPosition
			if (position.latitude != null && position.longitude != null) {
				latlngs.push([position.latitude, position.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() {}
}