v1.0.2

pages/AO/mapShow.vue

@@ -10,15 +10,15 @@
 		<!-- <div ref="testdiv" class="dragLayer" :class="testdiv" :style="{top: topSize + 'rpx' }"
 			@touchstart="handleTouchStart" @touchend="handleTouchEnd" @touchmove="handleTouchMove"> -->
 		<view :v-show="popupShow" :style="{ height: popupHeight + 'px' }">
-			<uni-list>
-				<uni-list :border="true">
-					<!-- 右侧带角标 -->
-					<uni-list-chat title="uni-app" avatar="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
-						note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="12"></uni-list-chat>
-					</uni-list-chat>
-				</uni-list>
+			<uni-list v-for="(item, index) in players" :key="index" :border="true">
+				<!-- 右侧带角标 -->
+				<!-- <uni-list-chat :title="item.name" avatar="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
+					note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="12"></uni-list-chat> -->
+				<uni-list-item :title="item.name + ' 打点数: ' + item.effectivenum + ' / ' + item.totalcontrolnum + ' 距离: ' + item.distance + '米 配速: ' + item.pace" 
+					:note="'平均心率: ' + item.avghr + ' 最大心率: ' + item.maxhr + ' CAL: ' + item.calorie + ' Ck: ' + item.ck + ' Ei: ' + item.ei">
+				</uni-list-item>
 			</uni-list>
-		<!-- </div> -->
+			<!-- </div> -->
 		</view>
 
 		<!-- 普通弹窗 -->
@@ -47,12 +47,15 @@
 		components: {},
 		data() {
 			return {
-				windowInfo: null,
+				interval: null,
+
+				systemInfo: null,
+				deviceOrientation: 'portrait', // 设备方向（竖屏 portrait | 横屏 landscape）
 				mapHeight: 0,
-				popupHeight: 300,
+				popupHeight: 100,
 				popupType: 'bottom',
 				popupShow: false,
-				
+
 				actionId: 2,
 				actionDetail: {},
 				mapUrl: null,
@@ -126,47 +129,47 @@
 				],
 				players: [{
 						id: 1,
-						nickName: '小鱼儿',
+						name: '小鱼儿',
 						phone: '13105310001',
 					},
 					{
 						id: 2,
-						nickName: '花无缺',
+						name: '花无缺',
 						phone: '13105310002',
 					},
 					{
 						id: 3,
-						nickName: '李大嘴',
+						name: '李大嘴',
 						phone: '13105310003',
 					},
 					{
 						id: 4,
-						nickName: '叶南天',
+						name: '叶南天',
 						phone: '13105310004',
 					},
 				],
 				players_position: [{
 						id: 1,
-						lat: 36.671357,
-						lng: 117.127925
+						latitude: 36.671357,
+						longitude: 117.127925
 					},
 					{
 						id: 2,
-						lat: 36.671657,
-						lng: 117.125925
+						latitude: 36.671657,
+						longitude: 117.125925
 					},
 					{
 						id: 3,
-						lat: 36.672257,
-						lng: 117.128925
+						latitude: 36.672257,
+						longitude: 117.128925
 					},
 					{
 						id: 4,
-						lat: 36.670433,
-						lng: 117.127873
+						latitude: 36.670433,
+						longitude: 117.127873
 					}
 				],
-				
+
 				// fab: {
 				// 	horizontal: 'left',
 				// 	vertical: 'bottom',
@@ -202,83 +205,196 @@
 			}
 		},
 		computed: {},
-		mounted() {
-			// this.handleDrawMap()
-		},
+		mounted() {},
 		onLoad() {
-			this.getToActionDetail(this.actionId)
+			this.loadData(this.actionId)
 		},
 		onReady() {
 			this.layoutInit()
 		},
+		onShow() {
+			console.log('[onShow]')
+			uni.onWindowResize(res => {
+				console.log('[onWindowResize]', res)
+				this.deviceOrientation = res.deviceOrientation
+				console.log('[onWindowResize] deviceOrientation', this.deviceOrientation)
+
+				this.layoutInit()
+			});
+		},
 		beforeDestroy() {
 			// console.log("beforeDestroy")
+			clearInterval(this.interval)
 			leafletHelper.free()
 		},
 		methods: {
 			// 布局初始化 设置地图高度
 			layoutInit() {
-				this.windowInfo = uni.getWindowInfo()
-				console.log('[layoutInit] windowInfo', this.windowInfo)
-				this.mapHeight = this.windowInfo.windowHeight
+				this.systemInfo = uni.getSystemInfoSync()
+				console.log('[layoutInit] systemInfo', this.systemInfo)
+				this.deviceOrientation = this.systemInfo.deviceOrientation
+				this.mapHeight = this.systemInfo.windowHeight
 			},
 			popupToggle() {
 				this.popupShow = !this.popupShow
-				if (this.popupShow) {
-					this.mapHeight = this.windowInfo.windowHeight - this.popupHeight
-				} else {
-					this.mapHeight = this.windowInfo.windowHeight
+
+				if (this.deviceOrientation == 'portrait') { // 竖屏 
+					console.log('[popupToggle] 竖屏')
+					if (this.popupShow) {
+						this.mapHeight = this.systemInfo.windowHeight - this.popupHeight
+					} else {
+						this.mapHeight = this.systemInfo.windowHeight
+					}
+				} else if (this.deviceOrientation == 'landscape') { // 横屏
+					console.log('[popupToggle] 横屏')
+					if (this.popupShow) {
+						this.mapHeight = this.systemInfo.windowHeight - this.popupHeight
+					} else {
+						this.mapHeight = this.systemInfo.windowHeight
+					}
+				}
+			},
+			async loadData() {
+				this.actionDetail = await this.getToActionDetail(this.actionId)
+				uni.setNavigationBarTitle({
+					title: this.actionDetail.name
+				});
+				// console.log(this.actionDetail)
+
+				this.initMap()
+				this.handleMapDrawRoute()
+
+				if (this.interval != null) {
+					clearInterval(this.interval)
 				}
+
+				let that = this
+				that.players = await that.getToUsersInGameDetail(that.actionId)
+				// console.log('players', that.players)
+				leafletHelper.global.setPlayers(this.players)
+
+				that.players_position = await that.getToUsersInGameGpsQuery(that.actionId)
+				leafletHelper.global.setPlayersPosition(this.players_position)
+
+				that.handleMapDrawPlayer()
+
+				this.interval = setInterval(async function() {
+
+					that.players_position = await that.getToUsersInGameGpsQuery(that.actionId)
+					// leafletHelper.global.setPlayers(that.players)
+					leafletHelper.global.setPlayersPosition(that.players_position)
+
+				}, 1000);
+
+				// await mapHelper.handleMapInfo(this, this.mapInfo)
+				this.handleMapToggle()
 			},
+			//场控端_活动详情
 			async getToActionDetail(actId) {
 				try {
-					// 创建请求参数并赋值
-					var request = new IdRequest()
-					request.setId(actId)
-					// 调用客户端相应的grpc方法，发送grpc请求，并接受后台发送回来的返回值
-					this.$client.toActionDetail(request, {}, async (err, response) => {
-						if (err) {
-							console.log(`[toActionDetail] err: code = ${err.code}` +
-								`, message = "${err.message}"`)
-						} else {
-							let res = response.toObject()
-							console.log('[toActionDetail]', res)
-							this.actionDetail = res
-
-							uni.setNavigationBarTitle({
-								title: this.actionDetail.name
-							});
-							
-							// await mapHelper.handleMapInfo(this, this.mapInfo)
-							this.handleDrawMap()
-						}
-					})
+					return new Promise((resolve, reject) => {
+						// 创建请求参数并赋值
+						var request = new IdRequest()
+						request.setId(actId)
+						// 调用客户端相应的grpc方法，发送grpc请求，并接受后台发送回来的返回值
+						this.$client.toActionDetail(request, {}, (err, response) => {
+							if (err) {
+								console.log(`[toActionDetail] err: code = ${err.code}` +
+									`, message = "${err.message}"`)
+								reject(err)
+							} else {
+								let res = response.toObject()
+								console.log('[toActionDetail]', res)
+								resolve(res)
+							}
+						})
+					});
 				} catch (e) {
-					console.log('[getShopMap] err', e)
+					console.log('[getToActionDetail] err', e)
+					reject(e)
 				}
 			},
-			handleDrawMap() {
+			//场控端_正在进行中所有用户实时信息
+			async getToUsersInGameDetail(actId) {
+				try {
+					return new Promise((resolve, reject) => {
+						// 创建请求参数并赋值
+						var request = new IdRequest()
+						request.setId(actId)
+						// 调用客户端相应的grpc方法，发送grpc请求，并接受后台发送回来的返回值
+						this.$client.toUsersInGameDetail(request, {}, (err, response) => {
+							if (err) {
+								console.log(`[toUsersInGameDetail] err: code = ${err.code}` +
+									`, message = "${err.message}"`)
+								reject(err)
+							} else {
+								let res = response.toObject()
+								// console.log('[toUsersInGameDetail]', res)
+								resolve(res.usersList)
+							}
+						})
+					});
+				} catch (e) {
+					console.log('[getToUsersInGameDetail] err', e)
+					reject(e)
+				}
+			},
+			//场控端_正在进行中所有用户实时gps查询
+			async getToUsersInGameGpsQuery(actId) {
+				try {
+					return new Promise((resolve, reject) => {
+						// 创建请求参数并赋值
+						var request = new IdRequest()
+						request.setId(actId)
+						// 调用客户端相应的grpc方法，发送grpc请求，并接受后台发送回来的返回值
+						this.$client.toUsersInGameGpsQuery(request, {}, (err, response) => {
+							if (err) {
+								console.log(`[toUsersInGameGpsQuery] err: code = ${err.code}` +
+									`, message = "${err.message}"`)
+								reject(err)
+							} else {
+								let res = response.toObject()
+								// console.log('[toUsersInGameGpsQuery]', res)
+								resolve(res.gpsinfoList)
+							}
+						})
+					});
+				} catch (e) {
+					console.log('[getToUsersInGameGpsQuery] err', e)
+					reject(e)
+				}
+			},
+			initMap() {
 				// leafletHelper.init(this, 'map', [36.67175772119628, 117.12792580603369], 17)
-				
+
 				// const mapid = this.actionDetail.mapinfo.lid
 				const mapurl = this.actionDetail.mapinfo.mapurl
 				const centPoint = [this.actionDetail.mapinfo.centerlatitude, this.actionDetail.mapinfo.centerlongitude]
 				const zoomNum = this.actionDetail.mapinfo.defscale
 				leafletHelper.init(this, 'map', centPoint, zoomNum)
-				leafletHelper.global.setCheckPoints(this.checkPoints)
-				leafletHelper.global.setPlayers(this.players)
-				leafletHelper.global.setPlayersPosition(this.players_position)
 				leafletHelper.addMapLayer(mapurl)
+			},
+			handleMapDrawRoute() {
+				// leafletHelper.global.setCheckPoints(this.checkPoints)
+				leafletHelper.global.setRoutes(this.actionDetail.routesList)
 
-				leafletHelper.checkPoint.drawAllCheckPoints()
-				leafletHelper.checkPoint.drawPath()
+				// leafletHelper.checkPoint.drawAllCheckPoints()
+				// leafletHelper.checkPoint.drawPath()
+				leafletHelper.route.drawAllRoutes()
+				leafletHelper.route.drawAllPath()
+			},
+			handleMapDrawPlayer() {
+				// leafletHelper.global.setPlayers(this.players)
+				// leafletHelper.global.setPlayersPosition(this.players_position)
 
 				leafletHelper.player.drawAllPlayers()
 				// leafletHelper.player.drawOneTrail(1, 10000, true)
 				// leafletHelper.player.drawOneTrail(2, 0, false)
 				leafletHelper.player.drawAllTrails(5000)
-
-				leafletHelper.checkPoint.toggle(true)
+			},
+			handleMapToggle() {
+				// leafletHelper.checkPoint.toggle(true)
+				leafletHelper.route.toggle(true)
 				leafletHelper.player.togglePlayer(true)
 				leafletHelper.player.toggleTooltip(true)
 				leafletHelper.player.toggleTrail(true)
@@ -318,129 +434,6 @@
 			onPopupChange(e) {
 				console.log('[onPopupChange] 当前模式：' + e.type + ', 状态：' + e.show);
 			},
-
-			// ========================================================= //
-
-			// getEl: function(el) {
-			// 	if (typeof el === 'string' || typeof el === 'number') return el;
-			// 	return el instanceof HTMLElement ? el : el.$el;
-			// },
-
-			// // 获取角度
-			// getAngle(angx, angy) {
-			// 	return Math.atan2(angy, angx) * 180 / Math.PI;
-			// },
-
-			// // 根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
-			// getDirection(startx, starty, endx, endy) {
-			// 	var angx = endx - startx;
-			// 	var angy = endy - starty;
-			// 	var result = 0;
-			// 	//如果滑动距离太短
-			// 	if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
-			// 		return result;
-			// 	}
-			// 	var angle = this.getAngle(angx, angy);
-			// 	if (angle >= -135 && angle <= -45) {
-			// 		result = 1;
-			// 	} else if (angle > 45 && angle < 135) {
-			// 		result = 2;
-			// 	} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
-			// 		result = 3;
-			// 	} else if (angle >= -45 && angle <= 45) {
-			// 		result = 4;
-			// 	}
-			// 	return result;
-			// },
-
-			// // 手势滑动开始
-			// handleTouchStart(e) {
-			// 	this.startx = e.changedTouches[0].pageX;
-			// 	this.starty = e.changedTouches[0].pageY;
-			// },
-
-			// // 手势滑动结束
-			// handleTouchEnd(e) {
-			// 	var endx, endy;
-			// 	endx = e.changedTouches[0].pageX;
-			// 	endy = e.changedTouches[0].pageY;
-			// 	var direction = this.getDirection(this.startx, this.starty, endx, endy);
-			// 	switch (direction) {
-			// 		// 未滑动！
-			// 		case 0:
-			// 			break;
-			// 			// 向上滑动	
-			// 		case 1:
-			// 			if (!this.isTop) {
-			// 				this.goTop();
-			// 				this.isTop = true
-			// 				this.scrollable = true
-			// 			}
-			// 			break;
-			// 			// 向下滑动	
-			// 		case 2:
-			// 			if (this.isTop && this.contentOffsetY == 0) {
-			// 				this.goBottom();
-			// 				this.isTop = false
-			// 				this.scrollable = false
-			// 			}
-			// 			break;
-			// 			// 向左
-			// 		case 3:
-			// 			break;
-
-			// 			// 向右
-			// 		case 4:
-			// 			break;
-			// 		default:
-			// 	}
-
-			// },
-
-			// handleTouchMove(e) {},
-
-			// // 上滑操作
-			// goTop() {
-			// 	console.log("上滑操作")
-			// 	let box = this.getEl(this.$refs.testdiv);
-			// 	let topHeight = this.topHeight
-			// 	// Binding.bind({
-			// 	// 	eventType: 'timing',
-			// 	// 	exitExpression: {
-			// 	// 		origin: 't>800'
-			// 	// 	},
-			// 	// 	props: [{
-			// 	// 		element: box,
-			// 	// 		property: 'transform.translateY',
-			// 	// 		expression: {
-			// 	// 			origin: "easeOutQuint(t, 0, - " + topHeight + ", 800)"
-			// 	// 		}
-			// 	// 	}]
-			// 	// });
-			// },
-
-			// // 下滑操作
-			// goBottom() {
-			// 	console.log("下滑操作")
-			// 	let box = this.getEl(this.$refs.testdiv);
-			// 	let topHeight = this.topHeight
-			// 	// Binding.bind({
-			// 	// 	eventType: 'timing',
-			// 	// 	exitExpression: {
-			// 	// 		origin: 't>800'
-			// 	// 	},
-			// 	// 	props: [{
-			// 	// 		element: box,
-			// 	// 		property: 'transform.translateY',
-			// 	// 		expression: {
-			// 	// 			origin: "easeOutQuint(t, - " + topHeight + ", " + topHeight + ", 800)"
-			// 	// 		}
-			// 	// 	}, ]
-			// 	// });
-			// 	// setTimeout(() => {
-			// 	// 	this.refreshing = false
-			// 	// }, 100)
-			// },
 		}
 	}
 </script>

utils/map/leafletHelper.css

@@ -12,7 +12,7 @@
 .my-div-icon {
 	z-index: -1000 !important;
 	text-align: center; 
-	font-size: 26px; 
+	font-size: 16px; 
 	font-weight: bold; 
 	color: #ff00ff;
 }

utils/map/leafletHelper.js

@@ -10,12 +10,14 @@ import config from '@/utils/map/sub/config'
 import global from '@/utils/map/sub/global'
 import player from '@/utils/map/sub/player'
 import checkPoint from '@/utils/map/sub/checkPoint'
+import route from '@/utils/map/sub/route'
 
 export default {
 	global: global,
 	config: config,
 	player: player,
 	checkPoint: checkPoint,
+	route: route,
 	
 	// 地图初始化
 	// mapid <string> 地图容器的id
@@ -37,12 +39,12 @@ export default {
 		// }).setView(centPoint, zoomNum);
 
 		L.control.attribution({
-			prefix: '&copy; 小飞龙定向', // 地图右下角属性文本的前缀内容
-			// prefix: false	// 地图右下角属性文本的前缀内容
+			// prefix: '&copy; 小飞龙定向', // 地图右下角属性文本的前缀内容
+			prefix: false	// 地图右下角属性文本的前缀内容
 		}).addTo(global.map);
 
 		L.control.scale({
-			maxWidth: 200, // 控件的最大宽度，单位是像素
+			maxWidth: 120, // 控件的最大宽度，单位是像素
 			metric: true, // 是否显示公制比例线（米/公里）
 			imperial: false, // 是否显示英制比例线（英里/英尺）
 			position: 'topright' // 控件的位置（地图的一个角）。可能的值是 ‘topleft’、 ‘topright’、 ‘bottomleft’ 或 ‘bottomright’
@@ -62,28 +64,33 @@ export default {
 			// console.log("[zoomstart] 即将开始地图缩放", e)
 			player.onZoomStart(e)
 			checkPoint.onZoomStart(e)
+			route.onZoomStart(e)
 		});
 
 		global.map.on('zoom', (e) => {
 			// console.log("[zoom] 地图缩放", e)
 			player.onZoom(e)
 			checkPoint.onZoom(e)
+			route.onZoom(e)
 		});
 
 		global.map.on('zoomend', (e) => {
 			// console.log("[zoomend] 地图缩放结束", e)
 			player.onZoomEnd(e)
 			checkPoint.onZoomEnd(e)
+			route.onZoomEnd(e)
 		});
 
 		// global.map.on('zoomanim', (e) => {
 		// 	console.log("地图缩放中...", e)
 		// 	// player.onZoomEnd(e)
 		// 	// checkPoint.onZoomEnd(e)
+		// 	// route.onZoomEnd(e)
 		// });
 
 		player.init()
 		checkPoint.init()
+		route.init()
 	},
 
 	addMapLayer(mapurl, minZoom = 15, maxZoom = 20) {
@@ -95,7 +102,7 @@ export default {
 			errorTileUrl: '/static/image/tileMiss.png',
 			tms: false, // 是否反转Y轴坐标,
 			keepBuffer: 20, // 平移地图时，在卸载切片之前，请保留这么多行和几列的切片
-			attribution: '版权所有'
+			// attribution: '版权所有'
 		}).addTo(global.map);
 	},
 
@@ -118,7 +125,7 @@ export default {
 				var caller = global._caller
 				//创建Dom元素 L.DomUtil.create('元素类型', 'class类名')
 				// this._container = L.DomUtil.create('div', 'leaflet-control-container')
-				this._container = L.DomUtil.create('div', 'leaflet-bar leaflet-control')
+				this._container = L.DomUtil.create('div', 'leaflet-bar')
 				
 				// var inp = L.DomUtil.create('div', 'leaflet-control-input')
 				// var btn = L.DomUtil.create('button', 'leaflet-control-button')
@@ -128,8 +135,11 @@ export default {
 				// 	' <input placeholder="天安门" ref="a" id="boox" style="width:150px;margin-right:20px;" /> '
 				// btn.innerText = '搜索'
 				
-				this.elCheckPoint = L.DomUtil.create('a', 'leaflet-control-common')
-				this.elCheckPoint.innerHTML = '<span>点位</span>'
+				// this.elCheckPoint = L.DomUtil.create('a', 'leaflet-control-common')
+				// this.elCheckPoint.innerHTML = '<span>点位</span>'
+				
+				this.elRoute = L.DomUtil.create('a', 'leaflet-control-common')
+				this.elRoute.innerHTML = '<span>路线</span>'
 				
 				this.elPlayer = L.DomUtil.create('a', 'leaflet-control-common')
 				this.elPlayer.innerHTML = '<span>玩家</span>'
@@ -144,46 +154,51 @@ export default {
 				this.elList.innerHTML = '<span>列表</span>'
 				
 				// this._container.style.display = 'flex'
-				this._container.appendChild(this.elCheckPoint)
+				// this._container.appendChild(this.elCheckPoint)
+				this._container.appendChild(this.elRoute)
 				this._container.appendChild(this.elPlayer)
 				this._container.appendChild(this.elPlayerTooltip)
 				this._container.appendChild(this.elPlayerTrail)
 				this._container.appendChild(this.elList)
 				
 				//注册事件
-				L.DomEvent.addListener(this.elCheckPoint, 'click', function (ev) {
+				// L.DomEvent.addListener(this.elCheckPoint, 'click', function (ev) {
+				//     L.DomEvent.stopPropagation(ev)
+				// 	L.DomEvent.preventDefault(ev)
+				// 	that.checkPoint.toggle()
+				// }, that.checkPoint)
+				
+				L.DomEvent.addListener(this.elRoute, 'click dblclick', function (ev) {
 				    L.DomEvent.stopPropagation(ev)
 					L.DomEvent.preventDefault(ev)
-					that.checkPoint.toggle()
+					that.route.toggle()
 				}, that.checkPoint)
 				
-				L.DomEvent.addListener(this.elPlayer, 'click', function (ev) {
+				L.DomEvent.addListener(this.elPlayer, 'click dblclick', function (ev) {
 				    L.DomEvent.stopPropagation(ev)
 					L.DomEvent.preventDefault(ev)
 					that.player.togglePlayer()
 				}, that.player)
 				
-				L.DomEvent.addListener(this.elPlayerTooltip, 'click', function (ev) {
+				L.DomEvent.addListener(this.elPlayerTooltip, 'click dblclick', function (ev) {
 				    L.DomEvent.stopPropagation(ev)
 					L.DomEvent.preventDefault(ev)
 					that.player.toggleTooltip()
 				}, that.player)
 				
-				L.DomEvent.addListener(this.elPlayerTrail, 'click', function (ev) {
+				L.DomEvent.addListener(this.elPlayerTrail, 'click dblclick', function (ev) {
 				    L.DomEvent.stopPropagation(ev)
 					L.DomEvent.preventDefault(ev)
 					that.player.toggleTrail()
 				}, that.player)
 				
-				L.DomEvent.addListener(this.elList, 'click', function (ev) {
+				L.DomEvent.addListener(this.elList, 'click dblclick', function (ev) {
 				    L.DomEvent.stopPropagation(ev)
 					L.DomEvent.preventDefault(ev)
 					global._caller.popupToggle()
 					// global._caller.popup('bottom')
 				}, this)
 				
-				// L.DomEvent.preventDefault('click')
-				
 				//返回这个主元素
 				return this._container
 			},
@@ -207,5 +222,6 @@ export default {
 	free() {
 		player.free()
 		checkPoint.free()
+		route.free()
 	}
 }

utils/map/sub/checkPoint.js

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

utils/map/sub/global.js

@@ -10,6 +10,7 @@ export default {
 	
 	focusPlayerId: 0, // 当前选中的玩家ID
 	checkPoints: [], // 检查点列表
+	routes: [], // 路线列表
 	
 	setCaller(data) {
 		this._caller = data // 指针复制，是同一个对象
@@ -26,6 +27,9 @@ export default {
 	setCheckPoints(data) {
 		this.checkPoints = data // 指针复制，是同一个对象
 	},
+	setRoutes(data) {
+		this.routes = data // 指针复制，是同一个对象
+	},
 	getPlayerById(playerId) {
 		if (!(playerId > 0)) return
 	
@@ -66,4 +70,14 @@ export default {
 		// console.log("[getCheckPointById]", cpId, checkPoint)
 		return checkPoint
 	},
+	getRouteById(rtId) {
+		if (!(rtId > 0)) return
+	
+		var route = null
+		if (this.routes != null && this.routes.length > 0) {
+			route = this.routes.find(o => o.id === rtId)
+		}
+		// console.log("[getCheckPointById]", rtId, route)
+		return route
+	},
 }

utils/map/sub/player.js

@@ -74,6 +74,7 @@ export default {
 		}
 	},
 	drawAllPlayers() {
+		console.log('[drawAllPlayers]', global.players)
 		if (this.playerLayerGroup != null)
 			this.playerLayerGroup.clearLayers()
 			
@@ -99,13 +100,13 @@ export default {
 			iconSize: [20, 32.8],
 			iconAnchor: [10, 30]
 		});
-		var marker = L.marker([player_position.lat, player_position.lng], {
+		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.nickName} ${player.phone}`, {
+			.bindTooltip(`${player.name}`, {
 				permanent: true,
 				offset: [0, -30],
 				direction: 'top',
@@ -172,18 +173,18 @@ export default {
 		var that = this
 		var player = global.getPlayerById(playerId)
 		var player_position = global.getPlayerPositionById(playerId)
-		// console.log(player, player_position)
+		console.log('[drawOnePlayer]', 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)
+		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.nickName} ${player.phone}`, config.gStyle.marker.tooltip)
+			.bindTooltip(`${player.name}`, config.gStyle.marker.tooltip)
 
 		marker.type = 'circleMarker'
 		marker.playerId = player.id // 存储用户信息
@@ -249,52 +250,96 @@ export default {
 		var player = global.getPlayerById(playerId)
 		var player_position = global.getPlayerPositionById(playerId)
 		var player_trail = global.getPlayerTrailById(playerId)
-		// console.log(player, player_position, player_trail)
-
+		// console.log('[drawOneTrail] param', player, player_position, player_trail)
+		
 		if (player == null || player_position == null) {
 			console.warn('[drawOneTrail] 关键数据为空', player, player_position)
 			return
 		}
+		
+		var trail = player.trail
+		var curPoint = [player_position.latitude, player_position.longitude, new Date()]
+		console.log('[drawOneTrail] curPoint', curPoint)
 	
 		if (player_trail == null) {
-			// console.warn('[drawOneTrail] 轨迹数据为空', player_trail)
+		// if (player.trail == null) {
+			console.warn('[drawOneTrail] 轨迹数据为空', player, player.trail, player_trail)
 			// return
+			
+			var points = curPoint
+			// var points = curPoint.slice(0, 2)
+			
 			player_trail = {
 				id: playerId,
 				points: [
-					[player_position.lat, player_position.lng, new Date()]
+					points
 				],
-				pointsT: 0
+				pointsT: 0,
+				// trail: trail
 			}
 			global.players_trail.push(player_trail)
+			
+			trail = L.polyline(player_trail.points, config.gStyle.trail.default)
+			.addTo(this.trailLayerGroup)
+			// .addTo(global.map)
+			
+			console.log('[drawOneTrail] trail', trail)
+			player.trail = trail
 		}
-	
-		if (player.marker != null) {
-			player.marker.animate = animate
+		else {
+			// 去除过期的历史轨迹
+			// if (duration > 0) {
+			// 	var now = +new Date();
+			// 	player_trail.points = player_trail.points.filter(function(point) {
+			// 		return now - point[2] < duration;
+			// 	});
+			// }
+			// player_trail.points.push(curPoint)
+			// player_trail.points.push(curPoint.slice(0, 2))
 		}
+		
+		// console.log('[drawOneTrail] player_trail.points', player, player_trail.points)
+		console.log('[drawOneTrail] player_trail.points', JSON.stringify(player_trail.points))
+		// trail.setLatLngs(player_trail.points)
+		// trail.addLatLng(curPoint.slice(0, 2))
+			
+	// 	if (player.marker != null) {
+	// 		player.marker.setLatLng(curPoint.slice(0, 2)) // 更新玩家的标记位置
+	// 	}
 	
-		var trail = L.polyline(player_trail.points, config.gStyle.trail.default)
-		.addTo(this.trailLayerGroup)
-		// .addTo(global.map)
+	// 	if (player.marker != null) {
+	// 		player.marker.animate = animate
+	// 	}
 	
-		var lastpos = [player_position.lat, player_position.lng, new Date()]
-		var point = null
+		// var lastpos = [player_position.latitude, player_position.longitude, new Date()]
+		// var point = null
 		var that = this
 		interval_showTrail = setInterval(function() {
+			// 去除过期的历史轨迹
+			if (duration > 0) {
+				var now = +new Date();
+				player_trail.points = player_trail.points.filter(function(point) {
+					return now - point[2] < duration;
+				});
+			}
+			player_trail.points.push(curPoint)
+			
+			player_position = global.getPlayerPositionById(playerId)
+			curPoint = [player_position.latitude, player_position.longitude, new Date()]
+			// player_trail.points.push(curPoint.slice(0, 2))
+			
+			// console.log('interval_showTrail', player_trail.points)
 			trail.setLatLngs(player_trail.points);
-			point = that.getCurPos(lastpos, duration, player_trail)
-			lastpos = point
-			trail.addLatLng(point.slice(0, 2))
+			// trail.addLatLng(point.slice(0, 2))
 	
 			if (player.marker != null) {
-				player.marker.setLatLng(point.slice(0, 2)) // 更新玩家的标记位置
+				player.marker.setLatLng(curPoint.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) {