mobile_h5/actMgt/pages/index/index.vue

<template>
	<view class="content uni-column">
		<view class="title">场地直播</view>
		<!-- <view id="map" class="map" :style="{ height: mapHeight + 'px', width: mapWidth + 'px' }"></view> -->
		<view id="map" class="map"></view>
	</view>
</template>

<script>
	// import L from 'leaflet';
	import 'leaflet/dist/leaflet.css';
	import '@/utils/map/leafletHelper.css'
	import leafletHelper from '@/utils/map/leafletHelper';

	export default {
		data() {
			return {
				// systemInfo: null,
				// flexDirection: 'column',
				// mapHeight: 0,
				// mapWidth: 0,
				// popupHeight: 0,
				// popupWidth: 0,
				// popupHeightPortrait: 300, // 竖屏状态下的底部弹框高度
				// popupWidthlandscape: 330, // 横屏状态下的右侧弹框宽度
				// popupType: 'bottom',
				// popupShow: false,
			}
		},
		onLoad() {},
		mounted() {
			this.initMap();
			// this.test();
			// this.test2();
		},
		methods: {
			initMap() {
				const mapUrl = 'http://192.168.0.22:5173/actMgt/static/test/华山西北-描边.jpg';
				// const center = [this.actionDetail.mapinfo.centerlatitude, this.actionDetail.mapinfo.centerlongitude]
				// const zoomNum = this.actionDetail.mapinfo.defscale
				const zoomNum = 15;
				const mapOptions = {
					// center: center,
					zoom: zoomNum
				};
				leafletHelper.init(this, 'map', mapUrl, mapOptions);
			},
			popupToggle() {
				this.popupShow = !this.popupShow
				this.$store.commit('setMapPopupShow', this.popupShow)
				// this.layoutInit()
			},
			fullScreenToggle() {
				this.$global.fullscreen()
				// this.layoutInit()
			},
			// async getImageBoundsByJgw(jgwUrl, imageWidth, imageHeight) {
			// 	const jgwData = await this.readJgwFile(jgwUrl);
			// 	// console.log("jgwData", jgwData);
			// 	const xmin = jgwData.x_origin;
			// 	const ymax = jgwData.y_origin;
			// 	const xmax = jgwData.x_origin + jgwData.a * imageWidth;
			// 	const ymin = jgwData.y_origin + jgwData.d * imageHeight;
			// 	const wgs84LatLng1 = this.Convert_EPSG3857_To_WGS84(ymax, xmin);
			// 	const wgs84LatLng2 = this.Convert_EPSG3857_To_WGS84(ymin, xmax);
			// 	const bounds = [
			// 		[wgs84LatLng1.lat, wgs84LatLng1.lng],
			// 		[wgs84LatLng2.lat, wgs84LatLng2.lng]
			// 	];
			// 	// console.log("bounds", bounds);
			// 	return bounds;
			// },
			// getImageCenterByBounds(bounds) {
			// 	const wgs84Center = {
			// 		lat: bounds[0][0] + (bounds[1][0] - bounds[0][0]) / 2,
			// 		lng: bounds[0][1] + (bounds[1][1] - bounds[0][1]) / 2,
			// 	}
			// 	return wgs84Center;
			// },			
			// // 读取 jgw 文件的函数
			// async readJgwFile(jgwUrl) {
			// 	console.log(jgwUrl);
			// 	const response = await fetch(jgwUrl);
			// 	// const lines = await response.text().split('\n');
			// 	const responseText = await response.text();
			// 	const lines = responseText.split('\r\n');
			// 	// console.log(lines);
			// 	const a = parseFloat(lines[0]); // x pixel size
			// 	const b = parseFloat(lines[1]); // x rotation
			// 	const c = parseFloat(lines[2]); // y rotation
			// 	const d = parseFloat(lines[3]); // y pixel size
			// 	const x_origin = parseFloat(lines[4]); // x coordinate of upper left corner
			// 	const y_origin = parseFloat(lines[5]); // y coordinate of upper left corner
			// 	return {
			// 		a,
			// 		b,
			// 		c,
			// 		d,
			// 		x_origin,
			// 		y_origin
			// 	};
			// },
			// async test() {
			// 	let imageUrl = 'http://localhost:5173/track/static/test/华山西北-描边.jpg';
			// 	const imageInfo = await uni.getImageInfo({
			// 		src: imageUrl
			// 	});
			// 	console.log(imageInfo);

			// 	let jgwUrl = "";
			// 	let index = imageUrl.lastIndexOf("."); // 获取最后一个.的位置
			// 	if (index >= 0)
			// 		jgwUrl = imageUrl.substring(0, index) + ".jgw"
			// 	console.log("jgwUrl", jgwUrl);
			// 	// const jgwUrl = "http://localhost:5173/track/static/test/华山西北-描边.jgw";
			// 	const bounds = await this.getImageBoundsByJgw(jgwUrl, imageInfo.width, imageInfo.height);
			// 	const center = this.getImageCenterByBounds(bounds);

			// 	const mapOptions = {
			// 		center: center,
			// 		zoom: 16,
			// 		maxBounds: bounds
			// 	}

			// 	let map = L.map("map", mapOptions);

			// 	// let map = L.map("map", {
			// 	// 	crs: L.CRS.EPSG3857
			// 	// }).setView([center.lat, center.lng], 15);

			// 	L.imageOverlay(imageUrl, bounds).addTo(map);
			// },
			// test2() {
			// 	// 将 EPSG:3857 坐标转换为 WGS84 坐标
			// 	// let wgs84LatLng = gcoord.transform([4401467.4, 13030783.9], gcoord.EPSG3857, gcoord.WGS84);
			// 	let wgs84LatLng = this.Convert_EPSG3857_To_WGS84(4401467.4, 13030783.9);
			// 	console.log(wgs84LatLng);

			// 	let map = L.map("map").setView([wgs84LatLng.lat, wgs84LatLng.lng], 13);
			// 	// let map = L.map("map", {
			// 	// 	crs: L.CRS.EPSG3857
			// 	// });
			// 	// map.setView([wgs84LatLng.lat, wgs84LatLng.lng], 13);
			// 	// let map = L.map("map", { crs: L.CRS.EPSG3857 }).setView([13030783.9,4401467.4], 13);
			// 	L.tileLayer(
			// 		//将图层加载到地图上
			// 		"http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}", {
			// 			maxZoom: 16, //最大聚焦值
			// 			//右下角描述
			// 			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
			// 		}
			// 	).addTo(map);
			// },
			// // EPSG3857坐标(平面坐标) 转 WGS84经纬度坐标(球状坐标)
			// Convert_EPSG3857_To_WGS84(lat, lng) {
			// 	let tempLng = lng / 20037508.34 * 180;
			// 	let tempLat = lat / 20037508.34 * 180;
			// 	tempLat = 180 / Math.PI * (2 * Math.atan(Math.exp(tempLat * Math.PI / 180)) - Math.PI / 2);
			// 	return {
			// 		lng: lng == 0 ? 0 : tempLng,
			// 		lat: lat == 0 ? 0 : tempLat
			// 	};
			// },
			// // WGS84经纬度坐标(球状坐标) 转 EPSG3857坐标(平面坐标)
			// Convert_WGS84_To_EPSG3857(lat, lng) {
			// 	let mercator = {};
			// 	let x = lng * 20037508.34 / 180;
			// 	let y = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / 180);
			// 	y = y * 20037508.34 / 180;
			// 	mercator.x = x;
			// 	mercator.y = y;
			// 	return {
			// 		lng: lng == 0 ? 0 : mercator.x,
			// 		lat: lat == 0 ? 0 : mercator.y
			// 	};
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: 100vh;
		// justify-content: center;
		background-color: white;
	}

	.title {
		width: 100%;
		height: 30px;
		line-height: 30px;
		text-align: center;
	}
	
	.map {
		width: 100%;
		// height: 100vh;
		flex: 1 1 auto;
		background-color: white;
		// border: none;
		// border: solid red 2px;
		z-index: 0;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>