1

common/helper.js

@@ -166,6 +166,101 @@ const startMeasure = (map, callback) => {
 	});
 }
 
+//定义一些常量
+var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
+var PI = 3.1415926535897932384626;
+var a = 6378245.0;
+var ee = 0.00669342162296594323;
+/**
+ * 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
+ * 即 百度 转 谷歌、高德
+ */
+function bd09togcj02(bd_lon, bd_lat) {
+	var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
+	var x = bd_lon - 0.0065;
+	var y = bd_lat - 0.006;
+	var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
+	var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
+	var gg_lng = z * Math.cos(theta);
+	var gg_lat = z * Math.sin(theta);
+	return [gg_lng, gg_lat]
+}
+/**
+ * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
+ * 即谷歌、高德 转 百度
+ */
+function gcj02tobd09(lng, lat) {
+	var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
+	var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
+	var bd_lng = z * Math.cos(theta) + 0.0065;
+	var bd_lat = z * Math.sin(theta) + 0.006;
+	return [bd_lng, bd_lat]
+}
+/**
+ * WGS84转GCj02
+ */
+function wgs84togcj02(lng, lat) {
+	if (out_of_china(lng, lat)) {
+		return [lng, lat]
+	} else {
+		var dlat = transformlat(lng - 105.0, lat - 35.0);
+		var dlng = transformlng(lng - 105.0, lat - 35.0);
+		var radlat = lat / 180.0 * PI;
+		var magic = Math.sin(radlat);
+		magic = 1 - ee * magic * magic;
+		var sqrtmagic = Math.sqrt(magic);
+		dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
+		dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
+		var mglat = lat + dlat;
+		var mglng = lng + dlng;
+		return [mglng, mglat]
+	}
+}
+/**
+ * GCJ02 转换为 WGS84
+ */
+function gcj02towgs84(lng, lat) {
+	if (out_of_china(lng, lat)) {
+		return [lng, lat]
+	} else {
+		var dlat = transformlat(lng - 105.0, lat - 35.0);
+		var dlng = transformlng(lng - 105.0, lat - 35.0);
+		var radlat = lat / 180.0 * PI;
+		var magic = Math.sin(radlat);
+		magic = 1 - ee * magic * magic;
+		var sqrtmagic = Math.sqrt(magic);
+		dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
+		dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
+		var mglat = lat + dlat;
+		var mglng = lng + dlng;
+		return [lng * 2 - mglng, lat * 2 - mglat]
+	}
+}
+
+function transformlat(lng, lat) {
+	var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
+	ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
+	ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
+	ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
+	return ret
+}
+
+function transformlng(lng, lat) {
+	var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
+	ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
+	ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
+	ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
+	return ret
+}
+/**
+ * 判断是否在国内，不在国内则不做偏移
+ */
+function out_of_china(lng, lat) {
+	return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
+}
+
+
+
 export default {
 	serverUrl,
 	geoserverUrl,
@@ -176,5 +271,6 @@ export default {
 	formatArea,
 	formatLength,
 	generateStyle,
-	tempUserInfo: ''
+	tempUserInfo: '',
+	gcj02towgs84
 }

manifest.json

@@ -2,8 +2,8 @@
     "name" : "草原管理",
     "appid" : "__UNI__BBBC950",
     "description" : "",
-    "versionName" : "1.0.4",
+    "versionName" : "1.0.5",
-    "versionCode" : 104,
+    "versionCode" : 105,
     "transformPx" : false,
     "app-plus" : {
         /* 5+App特有相关 */

pages/index/index.vue

@@ -22,7 +22,7 @@
 			</view>
 			<view class="btn-location right-btn" @click="location">
 				<image src="/static/dw.png" class="img-location" />
-				<view>{{locationing?'定位中':'定位'}}</view> 
+				<view>{{locationing?'定位中':'定位'}}</view>
 			</view>
 			<view class="btn-mjcl right-btn" @click="showJwdPopup">
 				<image src="/static/jwd.png" class="img-jwd" />
@@ -276,7 +276,11 @@
 						console.log(resp)
 						if (resp.data.data) {
 							const item = resp.data.data;
-							this.layerItems = item?.layerItems.map(layerItem => {
+							const defaultShowIndexs = [];
+							this.layerItems = item?.layerItems.map((layerItem, i) => {
+								if (layerItem.visible) {
+									defaultShowIndexs.push(i);
+								}
 								return {
 									text: layerItem.title,
 									value: layerItem.layerName,
@@ -287,7 +291,10 @@
 									layerWorkspace: layerItem.layerWorkspace || item.layerWorkspace,
 									...layerItem
 								}
-							})
+							});
+							if (defaultShowIndexs.length > 0) {
+								this.currentLayers = defaultShowIndexs;
+							}
 						}
 					},
 				})
@@ -391,8 +398,10 @@
 					success: (res) => {
 						console.log(res);
 						this.locationing = false;
+						const coords = helper.gcj02towgs84(res.longitude, res.latitude)
+						console.log(coords, [res.longitude, res.latitude])
 						this.mapData = {
-							center: [res.longitude, res.latitude, Math.random()]
+							center: [...coords, Math.random()]
 						}
 					},
 					fail: () => {
@@ -537,7 +546,7 @@
 	import {
 		WMTS as WMTSGrid
 	} from 'ol/tilegrid'
-	let map, vectorLayer;
+	let map, vectorLayer, locationVectorLayer;
 	export default {
 		name: 'c-ol-map',
 		data() {
@@ -579,8 +588,8 @@
 							// 	})
 							// })
 						])
-						vectorLayer.getSource().clear();
+						locationVectorLayer.getSource().clear();
-						vectorLayer.getSource().addFeature(pFeature);
+						locationVectorLayer.getSource().addFeature(pFeature);
 						map.getView().fit(point, {
 							maxZoom: 16
 						});
@@ -636,13 +645,30 @@
 										businessName: opt.layerName,
 										businessIndex: opt.layerIndex,
 										zIndex: opt.zIndex,
-										source
+										source,
+										extent: opt.extent || undefined
 									});
+								} else if (opt.layerType === 'xyz') {
+									layer = new TileLayer({
+										source: new XYZ({
+											maxZoom: opt.maxZoom || 18,
+											url: opt.url,
+											// url: 'http://t{0-5}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',
+											projection: opt.projection || 'EPSG:3857',
+											crossOrigin: '*',
+										}),
+										zIndex: opt.zIndex,
+										extent: opt.extent || undefined,
+										businessId: 'business-layer',
+										businessName: opt.layerName,
+										businessIndex: opt.layerIndex,
+									})
 								} else {
 									layer = new Image({
 										businessId: 'business-layer',
 										businessName: opt.layerName,
 										businessIndex: opt.layerIndex,
+										extent: opt.extent || undefined,
 										source: new ImageWMS({
 											ratio: 1,
 											url: `${opt.geoserverUrl}/geoserver/${opt.layerWorkspace}/wms`,
@@ -775,21 +801,22 @@
 				if (map) {
 					map.removeLayer(map.getAllLayers().find(l => l.get('id') === 'draw-layer'));
 					vectorLayer.getSource().clear();
+					locationVectorLayer.getSource().clear();
 				}
 			},
 			// 初始化天地图
 			initMap() {
 				let that = this
 				//天地图影像
-				var tdt = new TileLayer({
+				// var tdt = new TileLayer({
-					source: new XYZ({
+				// 	source: new XYZ({
-						maxZoom: 16,
+				// 		maxZoom: 16,
-						url: "https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
+				// 		url: "https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
-						// url: 'http://t{0-5}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',
+				// 		// url: 'http://t{0-5}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',
-						projection: 'EPSG:3857',
+				// 		projection: 'EPSG:3857',
-						crossOrigin: '*',
+				// 		crossOrigin: '*',
-					}),
+				// 	}), 
-				})
+				// })
 				//天地图标注
 				// var tdtLabel = new TileLayer({
 				// 	source: new XYZ({
@@ -801,7 +828,7 @@
 				map = new Map({
 					controls: [],
 					target: 'map',
-					layers: [tdt],
+					layers: [],
 					view: new View({
 						projection: 'EPSG:4326',
 						center: [102.45438, 32.53223],
@@ -817,9 +844,15 @@
 					zIndex: 999
 				})
 				map.addLayer(vectorLayer);
+				locationVectorLayer = new VectorLayer({
+					id: 'l-v-layer',
+					source: new VectorSource(),
+					zIndex: 1000
+				})
+				map.addLayer(locationVectorLayer);
 				map.on('singleclick', evt => {
 					vectorLayer.getSource().clear();
-					console.log('evt', evt)
+					console.log('evt', evt, map.getView().calculateExtent())
 					this.showByWkt(evt.coordinate);
 				})
 			},