TrackOffical/pages/AO/mapShow.vue

<template>
	<view>
		<view id="map" :style="{ height: mapHeight + 'px' }" class='map' />

		<!-- <view class="fab">
			<uni-fab ref="fab" :pattern="fab.pattern" :content="fab.content" :horizontal="fab.horizontal"
				:vertical="fab.vertical" :direction="fab.direction" @trigger="trigger" @fabClick="fabClick" />
		</view> -->

		<!-- <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>
		<!-- </div> -->
		</view>

		<!-- 普通弹窗 -->
		<!-- <uni-popup ref="popup" :is-mask-click="false" background-color="#fff" @change="onPopupChange">
			<view class="popup-content"
				:class="{ 'popup-bottom': popupType === 'bottom', 'popup-right': popupType === 'right' }">
				<text class="text">popup 内容</text>
			</view>
		</uni-popup> -->
	</view>
</template>

<script module="leaflet" lang="renderjs">
	import 'leaflet/dist/leaflet.css'
	import '@/utils/map/leafletHelper.css'

	import {
		DefaultRequest,
		IdRequest
	} from "@/grpc/base_pb.js"

	// import mapHelper from '@/utils/mapHelper'
	import leafletHelper from '@/utils/map/leafletHelper'

	export default {
		components: {},
		data() {
			return {
				windowInfo: null,
				mapHeight: 0,
				popupHeight: 300,
				popupType: 'bottom',
				popupShow: false,
				
				actionId: 2,
				actionDetail: {},
				mapUrl: null,
				mapInfo: {},

				map: null,
				checkPoints: [{
						cp_id: 1, // 检查点ID
						serial_num: 1, // 序号
						c_type: 1, // 检查点类型 1：起始点 2：途经点 3：结束点 4：其他
						category: 1, // 检查点种类 1：实体点 2：虚拟点 3：VR点
						latitude: 36.67205,
						longitude: 117.126945
					},
					{
						cp_id: 2,
						serial_num: 2,
						c_type: 1,
						category: 1,
						latitude: 36.670871,
						longitude: 117.12725
					},
					{
						cp_id: 3,
						serial_num: 3,
						c_type: 1,
						category: 1,
						latitude: 36.671723,
						longitude: 117.128565
					},
					{
						cp_id: 4,
						serial_num: 4,
						c_type: 1,
						category: 1,
						latitude: 36.672704,
						longitude: 117.128415
					},
					{
						cp_id: 5,
						serial_num: 5,
						c_type: 1,
						category: 1,
						latitude: 36.672003,
						longitude: 117.129305
					},
					{
						cp_id: 6,
						serial_num: 6,
						c_type: 1,
						category: 1,
						latitude: 36.672416,
						longitude: 117.127116
					},
					{
						cp_id: 7,
						serial_num: 7,
						c_type: 1,
						category: 1,
						latitude: 36.671689,
						longitude: 117.127798
					},
					{
						cp_id: 8,
						serial_num: 8,
						c_type: 1,
						category: 1,
						latitude: 36.67094,
						longitude: 117.128522
					},
				],
				players: [{
						id: 1,
						nickName: '小鱼儿',
						phone: '13105310001',
					},
					{
						id: 2,
						nickName: '花无缺',
						phone: '13105310002',
					},
					{
						id: 3,
						nickName: '李大嘴',
						phone: '13105310003',
					},
					{
						id: 4,
						nickName: '叶南天',
						phone: '13105310004',
					},
				],
				players_position: [{
						id: 1,
						lat: 36.671357,
						lng: 117.127925
					},
					{
						id: 2,
						lat: 36.671657,
						lng: 117.125925
					},
					{
						id: 3,
						lat: 36.672257,
						lng: 117.128925
					},
					{
						id: 4,
						lat: 36.670433,
						lng: 117.127873
					}
				],
				
				// fab: {
				// 	horizontal: 'left',
				// 	vertical: 'bottom',
				// 	direction: 'horizontal',
				// 	pattern: {
				// 		color: '#7A7E83',
				// 		backgroundColor: '#fff',
				// 		selectedColor: '#007AFF',
				// 		buttonColor: '#007AFF',
				// 		iconColor: '#fff'
				// 	},
				// 	is_color_type: false,
				// 	content: [{
				// 			iconPath: '/static/image.png',
				// 			selectedIconPath: '/static/image-active.png',
				// 			text: '玩家',
				// 			active: false
				// 		},
				// 		{
				// 			iconPath: '/static/home.png',
				// 			selectedIconPath: '/static/home-active.png',
				// 			text: '统计',
				// 			active: false
				// 		},
				// 		{
				// 			iconPath: '/static/star.png',
				// 			selectedIconPath: '/static/star-active.png',
				// 			text: '设置',
				// 			active: false
				// 		}
				// 	]
				// },
			}
		},
		computed: {},
		mounted() {
			// this.handleDrawMap()
		},
		onLoad() {
			this.getToActionDetail(this.actionId)
		},
		onReady() {
			this.layoutInit()
		},
		beforeDestroy() {
			// console.log("beforeDestroy")
			leafletHelper.free()
		},
		methods: {
			// 布局初始化 设置地图高度
			layoutInit() {
				this.windowInfo = uni.getWindowInfo()
				console.log('[layoutInit] windowInfo', this.windowInfo)
				this.mapHeight = this.windowInfo.windowHeight
			},
			popupToggle() {
				this.popupShow = !this.popupShow
				if (this.popupShow) {
					this.mapHeight = this.windowInfo.windowHeight - this.popupHeight
				} else {
					this.mapHeight = this.windowInfo.windowHeight
				}
			},
			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()
						}
					})
				} catch (e) {
					console.log('[getShopMap] err', e)
				}
			},
			handleDrawMap() {
				// 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)

				leafletHelper.checkPoint.drawAllCheckPoints()
				leafletHelper.checkPoint.drawPath()

				leafletHelper.player.drawAllPlayers()
				// leafletHelper.player.drawOneTrail(1, 10000, true)
				// leafletHelper.player.drawOneTrail(2, 0, false)
				leafletHelper.player.drawAllTrails(5000)

				leafletHelper.checkPoint.toggle(true)
				leafletHelper.player.togglePlayer(true)
				leafletHelper.player.toggleTooltip(true)
				leafletHelper.player.toggleTrail(true)
			},
			trigger(e) {
				console.log(e)
				this.content[e.index].active = !e.item.active
				uni.showModal({
					title: '提示',
					content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定')
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
			fabClick() {
				uni.showToast({
					title: '点击了悬浮按钮',
					icon: 'none'
				})
			},
			//type: 弹出方式 [ top center bottom left right ]
			popup(type) {
				this.type = type
				if (!this.popupShow) {
					this.$refs.popup.open(type)
					this.popupShow = true
				} else {
					this.$refs.popup.close()
					this.popupShow = false
				}
			},
			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>

<style lang="scss" scoped>
	.map {
		z-index: 0;
		width: 100vw;
		// height: 95vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: white;
	}

	.fab {
		z-index: 1000;
		width: 20px;
	}

	// @mixin flex {
	// 	/* #ifndef APP-NVUE */
	// 	display: flex;
	// 	/* #endif */
	// 	flex-direction: row;
	// }

	// @mixin height {
	// 	/* #ifndef APP-NVUE */
	// 	height: 100%;
	// 	/* #endif */
	// 	/* #ifdef APP-NVUE */
	// 	flex: 1;
	// 	/* #endif */
	// }

	.popup-bottom {
		width: 100%;
		height: 200px;
	}

	.popup-right {
		// @include height;
		width: 200px;
		height: 100%;
	}
</style>