TrackOffical/utils/map/sub/player.js

// import L from 'leaflet'
import config from '@/utils/map/sub/config'
import global from '@/utils/map/sub/global'

// var interval_creatCircleMarker = null
// var interval_showTrail = null
var togglePlayerFlag = true
var toggleTooltipFlag = true
var toggleTrailFlag = true
export default {
	playerLayerGroup: null, // 玩家标记图层组
	trailLayerGroup: null, // 玩家轨迹图层组

	init() {
		this.playerLayerGroup = new L.layerGroup()
		this.trailLayerGroup = new L.layerGroup()
	},
	// 即将开始地图缩放时触发本方法
	onZoomStart(e) {},
	// 地图发生缩放时触发本方法
	onZoom(e) {},
	// 地图缩放结束时触发本方法
	onZoomEnd(e) {},
	togglePlayer(flag) {
		if (flag != null) {
			togglePlayerFlag = !flag
		}

		if (togglePlayerFlag) {
			this.playerLayerGroup.removeFrom(global.map)
			togglePlayerFlag = false
		} else {
			this.playerLayerGroup.addTo(global.map)
			togglePlayerFlag = true
		}
	},
	toggleTooltip(flag) {
		if (flag != null) {
			toggleTooltipFlag = !flag
		}
		if (!togglePlayerFlag) {
			this.togglePlayer(true)
			toggleTooltipFlag = false
		}

		for (let i = 0; i < global.storePlayers.length; i++) {
			var player = global.storePlayers[i]
			if (player != null && player.marker != null) {
				// player.marker.toggleTooltip()
				// let isopen = player.marker.isTooltipOpen()
				if (toggleTooltipFlag) {
					player.marker.closeTooltip()
				} else {
					player.marker.openTooltip()
				}
			}
		}
		toggleTooltipFlag = !toggleTooltipFlag
	},
	toggleTrail(flag) {
		if (flag != null) {
			toggleTrailFlag = !flag
		}

		if (toggleTrailFlag) {
			this.trailLayerGroup.removeFrom(global.map)
			toggleTrailFlag = false
		} else {
			this.trailLayerGroup.addTo(global.map)
			toggleTrailFlag = true
		}
	},
	// 处理过期数据
	dealStaleData() {
		for (let i = 0; i < global.storePlayers.length; i++) {
			var storePlayer = global.storePlayers[i]

			if (!(storePlayer.id > 0)) {
				continue
			}

			// 查找最新的玩家记录列表
			var player = global.getPlayerById(storePlayer.id)
			if (player == null) { // 未找到 说明记录已过期
				console.warn('[dealStaleData] 发现过期数据', storePlayer)

				if (storePlayer.marker != null) {
					storePlayer.marker.removeFrom(this.playerLayerGroup)
					storePlayer.marker = null
				}

				if (storePlayer.trail != null) {
					storePlayer.trail.removeFrom(this.trailLayerGroup)
					storePlayer.trail = null
					storePlayer.trailData = []
				}

				if (storePlayer.interval_creatCircleMarker != null) {
					clearInterval(storePlayer.interval_creatCircleMarker)
				}

				if (storePlayer.interval_creatCircleMarker != null) {
					clearInterval(storePlayer.interval_showTrail)
				}
			}
		}
	},
	drawAllPlayers() {
		// console.log('[drawAllPlayers]', global.players)
		// if (this.playerLayerGroup != null)
		// 	this.playerLayerGroup.clearLayers()

		for (let i = 0; i < global.players.length; i++) {
			this.drawOnePlayer(global.players[i].id)
			// this.drawOnePlayer2(global.players[i].id)
		}
	},
	drawOnePlayer2(playerId, animate = true) {
		var that = this
		var player = global.getPlayerById(playerId)
		var player_position = global.getPlayerPositionById(playerId)
		var storePlayer = global.getStorePlayersById(playerId)
		// console.log(player, player_position)

		if (player == null || player_position == null) {
			console.warn('[drawOnePlayer2] 关键数据为空', player, player_position)
			return
		}

		// 首次创建
		if (storePlayer == null || storePlayer.marker == null) {
			// 在地图上创建 marker 并存储用户信息
			var playerIcon = L.icon({
				iconUrl: 'static/image/marker-icon.png',
				iconSize: [20, 32.8],
				iconAnchor: [10, 30]
			});
			var marker = L.marker([player_position.latitude, player_position.longitude], {
					icon: playerIcon
				})
				.addTo(this.playerLayerGroup)
				// .addTo(global.map)
				// .bindPopup("Hello, I'm a Marker!<br><img src='my-image.png' width='100'>").openPopup();
				.bindTooltip(`${player.name}`, {
					permanent: true,
					offset: [0, -30],
					direction: 'top',
					interactive: true
				})

			marker.type = 'marker'
			marker.playerId = player.id // 存储用户信息
			marker.animate = animate
			marker.on('click', function(e) {
				var playerId = e.target.playerId; // 获取点击的 marker 的用户信息
				console.log("Selected player ID: " + playerId);
				that.handleFocusPlayer(playerId)
			});

			var tooltip = marker.getTooltip()
			tooltip.playerId = player.id // 存储用户信息
			tooltip.animate = animate
			tooltip.on('click', function(e) {
				// console.log("[Marker.Tooltip]", e)
				var playerId = e.target.playerId; // 获取点击的 marker 的用户信息
				console.log("[Marker.Tooltip] Selected player ID: " + playerId)
				that.handleFocusPlayer(playerId)
			})

			// this.playerLayerGroup.addTo(global.map)

			if (storePlayer == null) {
				storePlayer = {
					id: playerId,
					marker: marker, // 玩家标识
					trail: null, // 玩家轨迹
					trailData: [], // 玩家轨迹信息
					interval_creatCircleMarker: null,
					interval_showTrail: null,
				}
				global.storePlayers.push(storePlayer)
			} else {
				storePlayer.marker = marker
			}
		}
		// 非首次创建，直接移动位置
		else {
			if (!toggleTrailFlag) {
				var marker = storePlayer.marker
				var curPoint = [player_position.latitude, player_position.longitude]
				// console.warn('[drawOnePlayer] 更新玩家的标记位置', storePlayer.marker, curPoint)
				marker.setLatLng(curPoint)
			}
		}
	},
	// 创建动画效果函数，用于实现circleMarker的大小和透明度随时间变化
	animateCircle(circle, minRadius, maxRadius, step = 1) {
		var radius = circle.getRadius();
		var opacity = circle.options.fillOpacity;
		var zoomType = 'zoomIn' // zoomIn: 放大 zoomOut: 缩小

		var interval_creatCircleMarker = setInterval(function() {
			if (!circle.animate) {
				clearInterval(interval_creatCircleMarker)
				return
			}

			// 改变圆形半径和透明度
			if (zoomType == 'zoomIn') {
				radius = radius + step
				// opacity = opacity - 0.1
			} else if (zoomType == 'zoomOut') {
				radius = radius - step
				// opacity = opacity - 0.1
			}

			circle.setRadius(radius);
			circle.setStyle({
				fillOpacity: opacity
			});

			if (radius >= maxRadius) {
				zoomType = 'zoomOut'
			} else if (radius <= minRadius) {
				zoomType = 'zoomIn'
			}
		}, 50);

		return interval_creatCircleMarker
	},
	drawOnePlayer(playerId, animate = true) {
		var that = this
		var player = global.getPlayerById(playerId)
		var player_position = global.getPlayerPositionById(playerId)
		var storePlayer = global.getStorePlayersById(playerId)
		// console.log('[drawOnePlayer]', player, player_position)

		if (player == null || player_position == null) {
			console.warn('[drawOnePlayer] 关键数据为空', player, player_position)
			return
		}

		// 首次创建
		if (storePlayer == null || storePlayer.marker == null) {
			// console.log('[drawOnePlayer] storePlayer == null', playerId)
			var marker = L.circleMarker([player_position.latitude, player_position.longitude], config.gStyle.marker
					.default)
				.addTo(this.playerLayerGroup)
				// .addTo(global.map)
				// .bindPopup("Hello, I'm a Marker!<br><img src='my-image.png' width='100'>").openPopup()
				.bindTooltip(`${player.name}`, config.gStyle.marker.tooltip)

			marker.type = 'circleMarker'
			marker.playerId = player.id // 存储用户信息
			marker.animate = animate
			marker.on('click', function(e) {
				// console.log("[Marker]", e)
				var playerId = e.target.playerId; // 获取点击的 marker 的用户信息
				console.log("[Marker] Selected player ID: " + playerId)
				that.handleFocusPlayer(playerId)
			})

			var tooltip = marker.getTooltip()
			tooltip.playerId = player.id // 存储用户信息
			tooltip.animate = animate
			tooltip.on('click', function(e) {
				// console.log("[Marker.Tooltip]", e)
				var playerId = e.target.playerId; // 获取点击的 marker 的用户信息
				console.log("[Marker.Tooltip] Selected player ID: " + playerId)
				that.handleFocusPlayer(playerId)
			})

			var interval_creatCircleMarker = null
			if (animate) {
				interval_creatCircleMarker = this.animateCircle(marker, 3, 9, 0.5)
			}

			// this.playerLayerGroup.addTo(global.map)

			if (storePlayer == null) {
				storePlayer = {
					id: playerId,
					marker: marker, // 玩家标识
					trail: null, // 玩家轨迹
					trailData: [], // 玩家轨迹信息
					interval_creatCircleMarker: interval_creatCircleMarker,
					interval_showTrail: null,
				}
				global.storePlayers.push(storePlayer)
			} else {
				storePlayer.marker = marker
				storePlayer.interval_creatCircleMarker = interval_creatCircleMarker
			}
		}
		// 非首次创建，直接移动位置
		else {
			if (!toggleTrailFlag) {
				var marker = storePlayer.marker
				var curPoint = [player_position.latitude, player_position.longitude]
				// console.warn('[drawOnePlayer] 更新玩家的标记位置', storePlayer.marker, curPoint)
				marker.setLatLng(curPoint)
			}
		}
	},
	handleFocusPlayer(playerId) {
		console.log("[handleFocusPlayer] 当前选中玩家ID: " + playerId)

		if (global.focusPlayerId > 0) {
			// 先把之前选中的目标恢复成默认状态
			var unfocusPlayer = global.getStorePlayersById(global.focusPlayerId)
			// var unfocusPlayer = global.getPlayerById(global.focusPlayerId)
			if (unfocusPlayer.marker != null && unfocusPlayer.marker.type == 'circleMarker') {
				unfocusPlayer.marker.setStyle(config.gStyle.marker.default)
			}
			if (unfocusPlayer.trail != null) {
				unfocusPlayer.trail.setStyle(config.gStyle.trail.default)
			}
		}

		global.focusPlayerId = playerId
		var focusPlayer = global.getStorePlayersById(global.focusPlayerId)
		// var focusPlayer = global.getPlayerById(global.focusPlayerId)
		if (focusPlayer.marker != null && focusPlayer.marker.type == 'circleMarker') {
			focusPlayer.marker.setStyle(config.gStyle.marker.focus)
		}
		if (focusPlayer.trail != null) {
			focusPlayer.trail.setStyle(config.gStyle.trail.focus)
		}
	},
	drawAllTrails(duration) {
		if (this.trailLayerGroup != null)
			this.trailLayerGroup.clearLayers()

		for (let i = 0; i < global.players.length; i++) {
			this.drawOneTrail(global.players[i].id, duration)
		}
	},
	// 显示运动轨迹 duration：毫秒
	drawOneTrail(playerId, duration) {
		var player = global.getPlayerById(playerId)
		var player_position = global.getPlayerPositionById(playerId)
		var storePlayer = global.getStorePlayersById(playerId)
		// console.log('[drawOneTrail] param', player, player_position, storePlayer)

		if (player == null || player_position == null) {
			console.warn('[drawOneTrail] 关键数据为空', player, player_position)
			return
		}

		var trail = null
		var curPoint = [player_position.latitude, player_position.longitude, new Date()]
		// console.log('[drawOneTrail] curPoint', curPoint)

		if (storePlayer == null || storePlayer.trail == null) {
			// console.warn('[drawOneTrail] 轨迹数据为空', player, storePlayer)
			var trailData = [curPoint]

			trail = L.polyline(trailData, config.gStyle.trail.default)
				.addTo(this.trailLayerGroup)
			// .addTo(global.map)
			// console.log('[drawOneTrail] trail', trail)

			if (storePlayer == null) {
				storePlayer = {
					id: playerId,
					marker: null, // 玩家标识
					trail: trail, // 玩家轨迹
					trailData: trailData, // 玩家轨迹信息
					interval_creatCircleMarker: null,
					interval_showTrail: null,
				}
				global.storePlayers.push(storePlayer)
			} else {
				storePlayer.trail = trail
				storePlayer.trailData = trailData
			}

			// var that = this
			var interval_showTrail = setInterval(function() {
				// 去除过期的历史轨迹
				if (duration > 0) {
					var now = +new Date();
					storePlayer.trailData = storePlayer.trailData.filter(function(point) {
						return now - point[2] < duration;
					});
				}

				player_position = global.getPlayerPositionById(playerId)
				curPoint = [player_position.latitude, player_position.longitude, new Date()]
				storePlayer.trailData.push(curPoint)
				// storePlayer.trailData.push(curPoint.slice(0, 2))

				// console.log('interval_showTrail', storePlayer.trailData)
				trail.setLatLngs(storePlayer.trailData);

				if (storePlayer.marker != null) {
					if (toggleTrailFlag) {
						// console.warn('[drawOneTrail] 更新玩家的标记位置', storePlayer.marker, curPoint)
						storePlayer.marker.setLatLng(curPoint.slice(0, 2)) // 更新玩家的标记位置
					}
				}
				// global.map.setView(point.slice(0, 2), 18); //地图中心跟踪最新位置
			}, 500);

			storePlayer.interval_showTrail = interval_showTrail
		}
	},
	// duration: 轨迹保存时间 为0表示保存全部轨迹
	getCurPos(lastpos, duration, player_trail) {
		// console.log(lastpos, pointsT)
		var now = +new Date();
		if (duration > 0) {
			player_trail.points = player_trail.points.filter(function(point) {
				return now - point[2] < duration;
			});
		}

		var step = 0.00001
		var t = 10
		var point = null
		if (player_trail.pointsT < 20 * t)
			point = [lastpos[0] + Math.random() * step, lastpos[1] + Math.random() * step, now];
		else if (player_trail.pointsT >= 20 * t && player_trail.pointsT < 40 * t)
			point = [lastpos[0] - Math.random() * step, lastpos[1] + Math.random() * step, now];
		else if (player_trail.pointsT >= 40 * t && player_trail.pointsT < 60 * t)
			point = [lastpos[0] - Math.random() * step, lastpos[1] - Math.random() * step, now];
		else if (player_trail.pointsT >= 60 * t && player_trail.pointsT < 80 * t)
			point = [lastpos[0] + Math.random() * step, lastpos[1] - Math.random() * step, now];

		// point = [point[0] - Math.random() * 0.00001, point[1] - Math.random() * 0.00001, now];

		player_trail.pointsT++
		if (player_trail.pointsT >= 80 * t)
			player_trail.pointsT = 0
		player_trail.points.push(point);

		return point
	},
	free() {
		for (let i = 0; i < global.storePlayers.length; i++) {
			var storePlayer = global.storePlayers[i]

			if (storePlayer.interval_creatCircleMarker != null) {
				clearInterval(storePlayer.interval_creatCircleMarker)
			}

			if (storePlayer.interval_creatCircleMarker != null) {
				clearInterval(storePlayer.interval_showTrail)
			}
		}
	}
}