TrackOffical/pages/AO/mapShow1.vue

<template>
	<view class="warp">
		<!-- <button @click="getShopMap(8)">加载地图</button> -->
		<!-- <button @click="zoomOut()">放大</button><button @click="zoomIn()">缩小</button> -->
		<movable-area :scale-area="true">
			
			<movable-view direction="all" :out-of-bounds="true" @change="handleMovableChange" @scale="handleMovableScale" :scale="true" :scale-min="0.5" :scale-max="10" :scale-value="scale">
			<!-- <movable-view direction="all" :scale="true" :scale-min="0.5" :scale-max="10" :scale-value="scale"> -->
				<!-- <canvas canvas-id="mapCanvas" style="width:100%;height:100%;position:absolute;"></canvas> -->
				<canvas canvas-id="mapCanvas" style="width:100%;height:100%;overflow: hidden;"></canvas>
				<canvas canvas-id="markerCanvas" style="width:100%;height:100%;position:absolute;z-index:1;"></canvas>
				<canvas canvas-id="pathCanvas" style="width:100%;height:100%;position:absolute;z-index:2;"></canvas>
			</movable-view>			
		</movable-area>
	</view>
</template>

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

	import mapHelper from '@/utils/mapHelper'

	export default {
		components: {},
		data() {
			return {
				scale: 1, // 地图图片的缩放比例
				translateX: 0, // 地图图片的横向偏移量
				translateY: 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: {
			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('https://ewr1.vultrobjects.com/imgur1/000/001/033/244_7ad_50f.png', 0, 0, this.windowWidth, this.windowHeight-100)
				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/this.scale, 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/this.scale);
				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>