From 57588e7e8e8a08798d512a567a1ce748cdd3df27 Mon Sep 17 00:00:00 2001 From: Swanky <413564165@qq.com> Date: Wed, 8 May 2024 22:21:50 +0800 Subject: [PATCH] 1 --- common/helper.js | 98 ++++++++++++++++++++++++++++++++++++++++++- manifest.json | 4 +- pages/index/index.vue | 71 ++++++++++++++++++++++--------- 3 files changed, 151 insertions(+), 22 deletions(-) diff --git a/common/helper.js b/common/helper.js index a959f92..1c73f76 100644 --- a/common/helper.js +++ b/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 } \ No newline at end of file diff --git a/manifest.json b/manifest.json index 7aecba0..98d04ae 100644 --- a/manifest.json +++ b/manifest.json @@ -2,8 +2,8 @@ "name" : "草原管理", "appid" : "__UNI__BBBC950", "description" : "", - "versionName" : "1.0.4", - "versionCode" : 104, + "versionName" : "1.0.5", + "versionCode" : 105, "transformPx" : false, "app-plus" : { /* 5+App特有相关 */ diff --git a/pages/index/index.vue b/pages/index/index.vue index d1e7559..e9bb6a5 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -22,7 +22,7 @@ - {{locationing?'定位中':'定位'}} + {{locationing?'定位中':'定位'}} @@ -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(); - vectorLayer.getSource().addFeature(pFeature); + locationVectorLayer.getSource().clear(); + 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({ - source: new XYZ({ - maxZoom: 16, - 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', - projection: 'EPSG:3857', - crossOrigin: '*', - }), - }) + // var tdt = new TileLayer({ + // source: new XYZ({ + // maxZoom: 16, + // 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', + // projection: 'EPSG:3857', + // 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); }) },