map

package.json

@@ -10,7 +10,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@amap/amap-jsapi-loader": "^1.0.1",
-    "ol": "^10.2.1"
+    "ol": "^10.2.1",
+    "gcoord": "^1.0.6"
   }
 }

pages/index/MapView.vue

@@ -0,0 +1,92 @@
+<template>
+	<view id="container" class=""></view>
+</template>
+<script>
+	import "ol/ol.css";
+	import gcoord from "gcoord";
+	import Map from "ol/Map";
+	import View from "ol/View";
+	import TileLayer from "ol/layer/Tile";
+	import OSM from 'ol/source/OSM';
+	import XYZ from 'ol/source/XYZ'
+	// const getUserInfo = () => {
+	// 	apiUserInfo().then(res => {
+	// 		console.log(res);
+	// 		userinfo.value = res.data
+	// 	})
+	// }
+	let map: any = null
+	export default {
+		name: "map-view",
+		data() {
+			return {
+				maps: {}
+			}
+		},
+		mounted() {
+			// this.initAMap();
+			this.createMap();
+		},
+		unmounted() {
+			map && map.destroy();
+		},
+		methods: {
+			initAMap() {
+				map = new AMap.Map("container", {
+					viewMode: "3D", // 是否为3D地图模式
+					zoom: 11,
+					center: [116.397428, 39.90923],
+				});
+				// 设置离线地图
+				map.setPlugins({
+					'AMap.Offline': {}
+				});
+				// 添加离线地图数据
+				map.offline.setCity('北京');
+			},
+			createMap() {
+				var view = new View({
+					// center: transform([103.23, 35.33], "EPSG:4326", "EPSG:3857"), //地图初始中心点
+					center: gcoord.transform(
+						[106.67591743605254, 38.21012898330025],
+						gcoord.WGS84,
+						gcoord.BD09
+					), //地图初始中心点
+					projection: "EPSG:4326",
+					zoom: 4,
+					minZoom: 1,
+				});
+				this.addMap("container", view);
+
+			},
+			addMap(target:any, view) {
+				if (this.maps[target]) return;
+				var gaodeMapLayer = new TileLayer({
+					title: "高德地图",
+					source: new XYZ({
+						url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
+						wrapX: false,
+					}),
+				});
+				let map = new Map({
+					//地图容器div的ID
+					target,
+					//地图容器中加载的图层
+					layers: [gaodeMapLayer],
+					//地图视图设置
+					view, //同一个view
+				});
+				this.maps[target] = map;
+				window.map = this.maps;
+				console.log(window.map, "window.map");
+			},
+		},
+
+	};
+</script>
+<style scoped>
+	#container {
+		width: 100%;
+		height: 100vh;
+	}
+</style>

pages/index/index.uvue

@@ -1,44 +0,0 @@
-<template>
-	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}11</text>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				title: 'Hello'
-			}
-		},
-		onLoad() {
-
-		},
-		methods: {
-
-		}
-	}
-</script>
-
-<style>
-	.content {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-bottom: 50rpx;
-	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
-	}
-</style>

pages/index/index.vue

@@ -1,72 +1,28 @@
 <template>
-	<view id="container" class=""></view>
-
+	<view class="">
+		<MapView></MapView>
+	</view>
 </template>
 <script>
-	import 'ol/ol.css';
-	import {
-		Map,
-		View
-	} from 'ol';
-	import TileLayer from 'ol/layer/Tile';
-	import OSM from 'ol/source/OSM';
-	const getUserInfo = () => {
-		apiUserInfo().then(res => {
-			console.log(res);
-			userinfo.value = res.data
-		})
-	}
-	let map: any = null
+	import MapView from "./MapView.vue";
+
+
 	export default {
 		name: "map-view",
+		components: {
+			MapView
+		},
 		data() {
 			return {
 
 			}
 		},
-		mounted() {
-			this.initAMap();
-			// this.initMap();
-		},
-		unmounted() {
-			map && map.destroy();
-		},
-		methods: {
-			initAMap() {
-				map = new AMap.Map("container", {
-					viewMode: "3D", // 是否为3D地图模式
-					zoom: 11,
-					center: [116.397428, 39.90923],
-				});
-				// 设置离线地图
-				map.setPlugins({
-					'AMap.Offline': {}
-				});
-				// 添加离线地图数据
-				map.offline.setCity('北京');
-			},
-			initMap() {
-				// 创建地图实例
-				map = new Map({
-					target: 'container',
-					layers: [
-						new TileLayer({
-							source: new OSM()
-						})
-					],
-					view: new View({
-						center: [0, 0], // 地图中心点坐标
-						zoom: 2 // 缩放级别
-					})
-				});
-			}
-		},
+		mounted() {},
+		unmounted() {},
+		methods: {},
 
 	};
 </script>
 <style scoped>
-	#container {
-		width: 100%;
-		height: 100vh;
-	}
+
 </style>

utils/transformUtils.js

@@ -0,0 +1,66 @@
+import gcoord from "gcoord";
+
+// 示例 WKT 数据，可以是 POLYGON 或 MULTIPOLYGON
+let wktData = "MULTIPOLYGON(((106.67591743605254 38.21012898330025,106.67588081160454 38.21003303839916,106.6755667227518 38.21006159193115,106.67551318487904 38.20994380861134,106.67578087424232 38.20991525507935,106.67573447475257 38.209776056610394,106.67594862624321 38.20973322631232,106.6759771797752 38.20983673286605,106.67621495734579 38.20981715370431,106.6761636759473 38.20962317624071,106.67538440246796 38.209765943901175,106.67538440246796 38.20984050880776,106.67519166939297 38.20987258822527,106.6752925390611 38.2102444053304,106.67591743605254 38.21012898330025)))";
+
+// 从 WKT 字符串解析出坐标数组
+function wktToCoordinates(wkt) {
+    if (wkt.startsWith("POLYGON")) {
+        // 处理 POLYGON 格式
+        return [wkt.match(/\(([^()]+)\)/)[1].trim().split(',').map(point => {
+            return point.trim().split(' ').map(Number);
+        })];
+    } else if (wkt.startsWith("MULTIPOLYGON")) {
+        // 处理 MULTIPOLYGON 格式
+        let polygons = wkt.match(/\(\(\(([^()]+)\)\)\)/g);
+        return polygons.map(polygon => {
+            return polygon.match(/\(([^()]+)\)/)[1].trim().split(',').map(point => {
+                return point.trim().split(' ').map(Number);
+            });
+        });
+    } else {
+        throw new Error("Unsupported WKT type");
+    }
+}
+
+// 将坐标数组转换为火星坐标系（GCJ-02）
+function convertToGCJ02(coordinates) {
+    return coordinates.map(polygon => {
+        return polygon.map(coord => {
+            return gcoord.transform(
+                coord,    // 源坐标
+                gcoord.WGS84,    // 源坐标系
+                gcoord.GCJ02     // 目标坐标系（火星坐标系）
+            );
+        });
+    });
+}
+
+// 将火星坐标系的坐标转换回 WKT 格式字符串
+function coordinatesToWKT(coordinates, isMultiPolygon) {
+    if (isMultiPolygon) {
+        // MULTIPOLYGON 格式
+        let polygons = coordinates.map(polygon => {
+            let coordString = polygon.map(coord => coord.join(' ')).join(', ');
+            return `((${coordString}))`;
+        });
+        return `MULTIPOLYGON (${polygons.join(', ')})`;
+    } else {
+        // POLYGON 格式
+        let coordString = coordinates[0].map(coord => coord.join(' ')).join(', ');
+        return `POLYGON ((${coordString}))`;
+    }
+}
+// 输入wkt 为84，返回wkt为火星坐标（高德）
+export function transform(wktData) {
+    if (!wktData) return []
+    wktData = wktData.replace("SRID=4490;", '')
+    // 判断 WKT 数据是 POLYGON 还是 MULTIPOLYGON
+    let isMultiPolygon = wktData.startsWith("MULTIPOLYGON");
+
+    // WGS84 转 火星坐标
+    let coordinates = wktToCoordinates(wktData);
+    let gcj02Coordinates = convertToGCJ02(coordinates);
+    let gcj02Wkt = coordinatesToWKT(gcj02Coordinates, isMultiPolygon);
+    return gcj02Wkt;
+}