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.players.length; i++) {
			var player = global.getPlayerById(global.players[i].id)
			if (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
		}
	},
	drawAllPlayers() {
		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)
		// console.log(player, player_position)
	
		if (player == null || player_position == null) {
			console.warn('[drawOnePlayer2] 关键数据为空', player, player_position)
			return
		}
	
		// 在地图上创建 marker 并存储用户信息
		var playerIcon = L.icon({
			iconUrl: 'static/image/marker-icon.png',
			iconSize: [20, 32.8],
			iconAnchor: [10, 30]
		});
		var marker = L.marker([player_position.lat, player_position.lng], {
				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.nickName} ${player.phone}`, {
				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)
		
		player.marker = marker
	},
	// 创建动画效果函数，用于实现circleMarker的大小和透明度随时间变化
	animateCircle(circle, minRadius, maxRadius, step = 1) {
		var radius = circle.getRadius();
		var opacity = circle.options.fillOpacity;
		var zoomType = 'zoomIn' // zoomIn: 放大 zoomOut: 缩小
	
		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);
	},
	drawOnePlayer(playerId, animate = true) {
		var that = this
		var player = global.getPlayerById(playerId)
		var player_position = global.getPlayerPositionById(playerId)
		// console.log(player, player_position)
	
		if (player == null || player_position == null) {
			console.warn('[drawOnePlayer] 关键数据为空', player, player_position)
			return
		}

		var marker = L.circleMarker([player_position.lat, player_position.lng], 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.nickName} ${player.phone}`, 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)
		})
	
		if (animate) {
			this.animateCircle(marker, 3, 9, 0.5)
		}
		
		// this.playerLayerGroup.addTo(global.map)
		
		player.marker = marker
	},
	handleFocusPlayer(playerId) {
		console.log("[handleFocusPlayer] 当前选中玩家ID: " + playerId)
	
		if (global.focusPlayerId > 0) {
			// 先把之前选中的目标恢复成默认状态
			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.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, animate = false) {
		var player = global.getPlayerById(playerId)
		var player_position = global.getPlayerPositionById(playerId)
		var player_trail = global.getPlayerTrailById(playerId)
		// console.log(player, player_position, player_trail)

		if (player == null || player_position == null) {
			console.warn('[drawOneTrail] 关键数据为空', player, player_position)
			return
		}
	
		if (player_trail == null) {
			// console.warn('[drawOneTrail] 轨迹数据为空', player_trail)
			// return
			player_trail = {
				id: playerId,
				points: [
					[player_position.lat, player_position.lng, new Date()]
				],
				pointsT: 0
			}
			global.players_trail.push(player_trail)
		}
	
		if (player.marker != null) {
			player.marker.animate = animate
		}
	
		var trail = L.polyline(player_trail.points, config.gStyle.trail.default)
		.addTo(this.trailLayerGroup)
		// .addTo(global.map)
	
		var lastpos = [player_position.lat, player_position.lng, new Date()]
		var point = null
		var that = this
		interval_showTrail = setInterval(function() {
			trail.setLatLngs(player_trail.points);
			point = that.getCurPos(lastpos, duration, player_trail)
			lastpos = point
			trail.addLatLng(point.slice(0, 2))
	
			if (player.marker != null) {
				player.marker.setLatLng(point.slice(0, 2)) // 更新玩家的标记位置
			}
			// global.map.setView(point.slice(0, 2), 18); //地图中心跟踪最新位置
		}, 100);
	
		// this.trailLayerGroup.addTo(global.map)
		
		player.trail = trail
	},
	// 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() {
		clearInterval(interval_creatCircleMarker)
		clearInterval(interval_showTrail)
	}
}