TrackOffical/pages/AO/mapShow2.vue

<template>
	<view class="warp">
		<!-- <button @click="getShopMap(8)">加载地图</button> -->
		<!-- <button @click="zoomOut()">放大</button><button @click="zoomIn()">缩小</button> -->
		<view style="width:100%;height:1000px;position:relative;" bindtouchstart="handleTouchStart" bindtouchmove="handleTouchMove"
			bindtouchend="handleTouchEnd">
			<canvas canvas-id="mapCanvas" style="width:100%;height:100%;overflow:visible;"></canvas>
			<!-- <canvas canvas-id="mapCanvas"
				style="position:absolute;top:0;left:0;width:100%;height:1000px;z-index:-1;"></canvas>
			 --><!-- <canvas canvas-id="markerCanvas"
				style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;"></canvas>
			<canvas canvas-id="pathCanvas"
				style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;"></canvas> -->
		</view>
	</view>
</template>

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

	import mapHelper from '@/utils/mapHelper'

	export default {
		components: {},
		data() {
			return {
				scale: 1, // 地图图片的缩放比例
				offsetX: 0, // 地图图片的横向偏移量
				offsetY: 0, // 地图图片的纵向偏移量
				lastX: 0, // 上一次触摸事件的横坐标
				lastY: 0, // 上一次触摸事件的纵坐标

				windowWidth: uni.getSystemInfoSync().windowWidth, // 可视区域宽度
				windowHeight: uni.getSystemInfoSync().windowHeight, // 可视区域高度
				markerX: 100, // 标记位置 x 坐标
				markerY: 100, // 标记位置 y 坐标
				path: [
					[100, 100],
				], // 运动轨迹点坐标

				shopId: 0,
				mapUrl: null,
				mapInfo: {},
				shopList: [],
				controlInfoList: []
			}
		},
		computed: {},
		mounted() {},
		onLoad() {
			// this.getShopList()
			this.getShopMap(8)
		},
		methods: {
			handleTouchStart(e) {
				this.lastX = e.touches[0].clientX;
				this.lastY = e.touches[0].clientY;
			},

			handleTouchMove(e) {
				const deltaX = e.touches[0].clientX - this.lastX;
				const deltaY = e.touches[0].clientY - this.lastY;
				const mapCtx = uni.createCanvasContext('mapCanvas', this);
				mapCtx.translate(this.offsetX + deltaX, this.offsetY + deltaY);
				mapCtx.draw(true, () => {
					this.offsetX += deltaX;
					this.offsetY += deltaY;
				});
				this.lastX = e.touches[0].clientX;
				this.lastY = e.touches[0].clientY;
			},

			handleTouchEnd() {
				// do nothing
			},

			handleScale(e) {
				const mapCtx = uni.createCanvasContext('mapCanvas', this);
				const newScale = this.scale * e.detail.scale;
				const deltaX = (this.windowWidth * (1 - newScale)) / 2 / newScale;
				const deltaY = (this.windowHeight * (1 - newScale)) / 2 / newScale;
				mapCtx.translate(this.offsetX - deltaX, this.offsetY - deltaY);
				mapCtx.scale(e.detail.scale, e.detail.scale);
				mapCtx.draw(true, () => {
					this.offsetX -= deltaX;
					this.offsetY -= deltaY;
					this.scale = newScale;
				});
			},
			zoomOut() {
				this.scale++
				// this.$nextTick(function() {
				// 	this.scale++
				// })
			},
			zoomIn() {
				this.scale--
				// this.$nextTick(function() {
				// 	this.scale--
				// })
			},
			async getShopMap(shopId) {
				try {
					// 创建请求参数并赋值
					var request = new IdRequest()
					request.setId(shopId)
					// 调用客户端相应的grpc方法，发送grpc请求，并接受后台发送回来的返回值
					this.$client.assMapInfoDetail(request, {}, async (err, response) => {
						if (err) {
							console.log(`[assMapInfoDetail] err: code = ${err.code}` +
								`, message = "${err.message}"`)
						} else {
							let res = response.toObject()
							console.log('[assMapInfoDetail]', res)
							this.mapInfo = res

							await mapHelper.handleMapInfo(this, this.mapInfo)
							this.handleDrawMap()
						}
					})
				} catch (e) {
					console.log('[getShopMap] err', e)
				}
			},
			handleDrawMap() {
				this.drawMap();
				// setInterval(() => {
				// 	// 更新标记位置
				// 	this.markerX += 10;
				// 	this.markerY += 10;

				// 	// 更新运动轨迹
				// 	this.path.push([this.markerX, this.markerY]);

				// 	const markerCtx = uni.createCanvasContext('markerCanvas', this);
				// 	markerCtx.clearRect(0, 0, this.windowWidth, this.windowHeight);
				// 	this.drawMarker(markerCtx);
				// 	markerCtx.draw(false);

				// 	const pathCtx = uni.createCanvasContext('pathCanvas', this);
				// 	pathCtx.clearRect(0, 0, this.windowWidth, this.windowHeight);
				// 	this.drawPath(pathCtx);
				// 	pathCtx.draw(false);
				// }, 1000);
			},
			handleMovableChange(e) {
				console.log("[handleMovableChange] 拖动", e.detail)
				// this.translateX = e.detail.x;
				// this.translateY = e.detail.y;
				// this.drawMap();
			},
			handleMovableScale(e) {
				console.log("[handleMovableScale] 缩放", e.detail)
				// this.scale = e.detail.scale;
				// this.translateX = (1 - e.detail.scale) * (e.detail.fingers[0].x + e.detail.fingers[1].x) / 2;
				// this.translateY = (1 - e.detail.scale) * (e.detail.fingers[0].y + e.detail.fingers[1].y) / 2;
				// this.drawMap();
			},
			drawMap() {
				console.log("[drawMap]", this.mapUrl, this.windowWidth, this.windowHeight)
				const mapCtx = uni.createCanvasContext('mapCanvas', this);
				mapCtx.drawImage(this.mapUrl, 0, 0, this.windowWidth, this.windowHeight-100)
				// mapCtx.drawImage('https://ewr1.vultrobjects.com/imgur1/000/001/033/244_7ad_50f.png', 0, 0, this.windowWidth, this.windowHeight-100)
				mapCtx.draw();
				
				// const mapImg = new Image();
				// mapImg.src = this.mapUrl;
				// mapImg.onload = () => {
				// 	mapCtx.drawImage(mapImg, 0, 0, this.windowWidth, this.windowHeight);
				// 	// mapCtx.draw(false, () => {
				// 	// 	setInterval(() => {
				// 	// 		const markerCtx = uni.createCanvasContext('markerCanvas', this);
				// 	// 		markerCtx.clearRect(0, 0, this.windowWidth, this.windowHeight);
				// 	// 		this.drawMarker(markerCtx);
				// 	// 		markerCtx.draw(false);

				// 	// 		const pathCtx = uni.createCanvasContext('pathCanvas', this);
				// 	// 		pathCtx.clearRect(0, 0, this.windowWidth, this.windowHeight);
				// 	// 		this.drawPath(pathCtx);
				// 	// 		pathCtx.draw(false);
				// 	// 	}, 1000);
				// 	// });
				// };

				// const mapCtx = uni.createCanvasContext('mapCanvas', this);
				// mapCtx.drawImage(this.mapUrl, 0, 0, this.windowWidth, this.windowHeight-100)
				// // mapCtx.drawImage(this.mapUrl, 0, 0, this.windowWidth * this.scale, this.windowHeight * this.scale, -this.translateX, -this.translateY, this.windowWidth, this.windowHeight);
				// // mapCtx.drawImage(this.mapUrl, 0, 0, 3113, 3297, -this.translateX, -this.translateY, this.windowWidth, this.windowHeight);
				// mapCtx.draw();
			},
			drawMarker(ctx) {
				// 绘制标记位置
				ctx.beginPath();
				ctx.arc(this.markerX, this.markerY, 10, 0, 2 * Math.PI);
				ctx.setFillStyle('#FF0000');
				ctx.fill();
				ctx.closePath();
			},
			drawPath(ctx) {
				// 绘制运动轨迹
				if (this.path.length <= 1) {
					return;
				}

				ctx.beginPath();
				ctx.setStrokeStyle('#0000FF');
				ctx.setLineWidth(2);
				ctx.moveTo(this.path[0][0], this.path[0][1]);

				for (let i = 1; i < this.path.length; i++) {
					ctx.lineTo(this.path[i][0], this.path[i][1]);
				}

				ctx.stroke();
				ctx.closePath();
			}
		}
	}
</script>

<style lang="scss">
	.padding {
		padding: 0 20rpx;
	}

	movable-area {
		width: 100%;
		height: 1000px;
		// background-color: #D8D8D8;
		overflow: hidden;
	}

	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		// height: 3000px;
		// background-color: #007AFF;
	}

	.mapView {
		// width: 100%;
		// height: 300px;
		// background-color: seagreen;
	}

	// .mapMovArea {
	// 	width: 100%;
	// 	height: 300px;
	// 	background-color: cadetblue;
	// }
	// .mapMovView {
	// 	width: 50%;
	// 	height: 300px;
	// 	background-color: yellow;
	// }
	.imageMap {
		width: 100%;
		// width: 600px;
		height: 100%;
	}
</style>