From 7b0cf77b273359b2d4247fbc3117ed7bb2fc4f24 Mon Sep 17 00:00:00 2001 From: unknown <2548700810@qq.com> Date: Thu, 20 Oct 2022 19:19:57 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E5=8A=A0=E8=BD=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 6 +- src/App.vue | 26 +++----- src/assets/js/normal_style.js | 4 +- src/examples/service.vue | 116 ++++++++++++++++++++++++++++++++-- src/main.js | 2 + src/views/dashboard/index.vue | 27 +++++--- 6 files changed, 148 insertions(+), 33 deletions(-) diff --git a/package-lock.json b/package-lock.json index b3b9481..048d5d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2692,9 +2692,9 @@ "dev": true }, "follow-redirects": { - "version": "1.14.9", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz", - "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==" + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", + "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==" }, "formstream": { "version": "1.1.1", diff --git a/src/App.vue b/src/App.vue index 75c529d..2e04f59 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,29 +7,23 @@ * @FilePath: \gis\src\App.vue --> - -- 2.25.1 From 05c1116703f3ac33a0562d89549b1b79e6a67c37 Mon Sep 17 00:00:00 2001 From: unknown <2548700810@qq.com> Date: Sat, 22 Oct 2022 15:31:29 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E5=9D=90=E6=A0=87=E7=B3=BB=E8=BD=AC?= =?UTF-8?q?=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/gis/coordinate-conversion.js | 162 +++++++++++++++++++++++++++ src/views/dashboard/index.vue | 118 ++++++------------- 2 files changed, 199 insertions(+), 81 deletions(-) create mode 100644 src/api/gis/coordinate-conversion.js diff --git a/src/api/gis/coordinate-conversion.js b/src/api/gis/coordinate-conversion.js new file mode 100644 index 0000000..f4073fd --- /dev/null +++ b/src/api/gis/coordinate-conversion.js @@ -0,0 +1,162 @@ +export default { + x_pi: Math.PI * 3000.0 / 180.0, + a: 6378245.0, + ee: 0.00669342162296594323, + /** + * 百度坐标系(BD-09)与火星坐标系(GCJ-02)的转换 + * 即百度转谷歌,高德 + * @param bd_lon + * @param bd_lat + * @returns {*[]} + */ + bd09togcj02(bd_lon, bd_lat) { + let x = bd_lon - 0.0065 + let y = bd_lat - 0.006 + let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi) + let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x *this.x_pi) + let gg_lng = z * Math.cos(theta) + let gg_lat = z * Math.sin(theta) + return [gg_lng, gg_lat] + }, + /** + * 火星坐标系(GCJ-02)与百度坐标系(BD-09)的转换 + * 即谷歌,高德转百度 + * @param lng + * @param lat + * @returns {*[]} + */ + gcj02tobd09(lng, lat) { + let z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * this.x_pi) + let theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * this.x_pi) + let bd_lng = z * Math.cos(theta) + 0.0065 + let bd_lat = z * Math.sin(theta) + 0.006 + return [bd_lng, bd_lat] + }, + /** + * WGS84转GCj02 + * @param lng + * @param lat + * @returns {*[]} + */ + wgs84togcj02(lng, lat) { + if (this.out_of_china(lng, lat)) { + return [lng, lat] + } else { + let dlat = this.transformlat(lng - 105.0, lat - 35.0) + let dlng = this.transformlng(lng - 105.0, lat - 35.0) + let radlat = lat / 180.0 * Math.PI + let magic = Math.sin(radlat) + magic = 1 - this.ee * magic * magic + let sqrtmagic = Math.sqrt(magic) + dlat = (dlat * 180.0) / ((this.a * (1 - this.ee)) / (magic * sqrtmagic) * Math.PI) + dlng = (dlng * 180.0) / (this.a / sqrtmagic * Math.cos(radlat) * Math.PI) + let mglat = lat + dlat + let mglng = lng + dlng + return [mglng, mglat] + } + }, + /** + * GCJ02转换为WGS84 + * @param lng + * @param lat + * @returns {*[]} + */ + gcj02towgs84(lng, lat) { + if (this.out_of_china(lng, lat)) { + return [lng, lat] + } else { + let dlat = this.transformlat(lng - 105.0, lat - 35.0) + let dlng = this.transformlng(lng - 105.0, lat - 35.0) + let radlat = lat / 180.0 * Math.PI + let magic = Math.sin(radlat) + magic = 1 - this.ee * magic * magic + let sqrtmagic = Math.sqrt(magic) + dlat = (dlat * 180.0) / ((this.a * (1 -this.ee)) / (magic * sqrtmagic) * Math.PI) + dlng = (dlng * 180.0) / (this.a / sqrtmagic * Math.cos(radlat) * Math.PI) + let mglat = lat + dlat + let mglng = lng + dlng + return [lng * 2 - mglng, lat * 2 - mglat] + } + }, + /** + * 百度坐标系转wgs84坐标系 + * @param {*} lng + * @param {*} lat + * @returns + */ + bd09towgs84(lng,lat){ + //百度坐标系先转为火星坐标系 + let gcj02=this.bd09togcj02(lng,lat) + //火星坐标系转wgs84坐标系 + let result=this.gcj02towgs84(gcj02[0],gcj02[1]) + return result + }, + /** + * wgs84坐标系转百度坐标系 + * @param {*} lng + * @param {*} lat + * @returns + */ + wgs84tobd09(lng,lat){ + //wgs84先转为火星坐标系 + let gcj02=this.wgs84togcj02(lng,lat) + //火星坐标系转百度坐标系 + let result=this.gcj02tobd09(gcj02[0],gcj02[1]) + return result + }, + transformlat(lng,lat){ + let 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*Math.PI)+20.0*Math.sin(2.0*lng*Math.PI))*2.0/3.0 + ret +=(20.0*Math.sin(lat*Math.PI)+40.0*Math.sin(lat/3.0*Math.PI))*2.0/3.0 + ret +=(160.0*Math.sin(lat/12.0*Math.PI)+320*Math.sin(lat*Math.PI/30.0))*2.0/3.0 + return ret + }, + transformlng(lng,lat){ + let 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*Math.PI)+20.0*Math.sin(2.0*lng*Math.PI))*2.0/3.0 + ret +=(20.0*Math.sin(lng*Math.PI)+40.0*Math.sin(lng/3.0*Math.PI))*2.0/3.0 + ret +=(150.0*Math.sin(lng/12.0*Math.PI)+300.0*Math.sin(lng/30.0*Math.PI))*2.0/3.0 + return ret + }, + /** + * 判断是否在国内,不在国内则不做偏移 + * @param lng + * @param lat + * @returns {boolean} + */ + out_of_china(lng,lat){ + return (lng<72.004 || lng>137.8347)||((lat<0.8293 || lat >55.8271)||false) + }, + /** + * 经纬度转墨卡托 + * @param poi 经纬度 + * @returns {{}} + * @private + */ + LngLatToMercator(poi) { + let mercator = {} + let earthRad = 6378137.0; + mercator.x = poi.lng * Math.PI / 180 * earthRad; + let a = poi.lat * Math.PI / 180; + mercator.y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a))) + + return mercator; + }, + + /** + * 墨卡托转经纬度 + * @param poi 墨卡托 + * @returns {{}} + * @private + */ + MercatorToLngLat(poi) { + let lnglat = {} + lnglat.lng = poi.x / 20037508.34 * 180 + let mmy = poi.y / 20037508.34 * 180 + lnglat.lat = 180 / Math.PI * (2 * Math.atan(Math.exp(mmy * Math.PI / 180)) - Math.PI / 2) + console.log(lnglat, '222') + return lnglat; + }, + + +} \ No newline at end of file diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index 092bb23..1d0484c 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,10 +1,7 @@ @@ -34,8 +24,9 @@ import { loadWMTS, loadWFSLayer, loadTMSLayer, - removeWFSLayer + removeWFSLayer, } from "@/api/gis/service.js"; +import Transform from "@/api/gis/coordinate-conversion.js"; export default { name: "HomePage", components: { @@ -88,22 +79,22 @@ export default { }); }, loadWFS() { - let url='http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_china_mb_china_poi&outputFormat=application/json' - let option = {id:'point',type:'circle',paint:{}}; + let url = + "http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_china_mb_china_poi&outputFormat=application/json"; + let option = { id: "point", type: "circle", paint: {} }; loadWFSLayer(this.map, url, option); - }, - removeWFSLayer(){ - let option = {id:'point',type:'circle',paint:{}}; - - removeWFSLayer(this.map,option) - }, + removeWFSLayer() { + let option = { id: "point", type: "circle", paint: {} }; + + removeWFSLayer(this.map, option); + }, loadWMS() { let url = "http://192.168.11.35:8999/geoserver/ows?service=WMS&version=1.3.0&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=sz_pg%3Asz_pg_china_mb_china_poi"; let option = { id: "wms-layer", - sourceId:'wms-sourceId', + sourceId: "wms-sourceId", type: "raster", source: "wms-source", paint: {}, @@ -114,19 +105,18 @@ export default { removeWMSLayer() { let url = "http://192.168.11.35:8999/geoserver/ows?service=WMS&version=1.3.0&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=sz_pg%3Asz_pg_china_mb_china_poi"; - let option = { + let option = { id: "wms-layer", - sourceId:'wms-sourceId', + sourceId: "wms-sourceId", type: "raster", source: "wms-source", paint: {}, }; - removeLayer(this.map, url,option); + removeLayer(this.map, url, option); }, loadWMTS() { - let url = - "http://192.168.11.35:8999/geoserver/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=dem_test%3Ajs" - ; + let url = + "http://192.168.11.35:8999/geoserver/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=dem_test%3Ajs"; let option = { id: "wmts-layer", type: "raster", @@ -136,24 +126,34 @@ export default { loadWMTS(this.map, url, option); }, - removeWMTSLayer(){ - let url = - "http://192.168.11.35:8999/geoserver/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=dem_test%3Ajs" - ; - removeLayer(this.map, url); + removeWMTSLayer() { + let url = + "http://192.168.11.35:8999/geoserver/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=dem_test%3Ajs"; + removeLayer(this.map, url); }, loadTMS() { let url; let option = {}; loadTMSLayer(this.map, url, option); }, - removeTMSLayer(){ + removeTMSLayer() { let url; - - removeLayer(this.map, url); - } + + removeLayer(this.map, url); + }, + transform() { + let poi = { lng: 114.32894, lat: 30.585748 }; + let poi2 = { x: 12727039.383734727, y: 3579066.6894065156 }; + // Transform.LngLatToMercator(poi) + // Transform.MercatorToLngLat(poi2) + let lng_lat_1 = Transform.bd09togcj02(113.912743, 22.497629); + let lng_lat_2 = Transform.gcj02tobd09( + 113.90624786062033, + 22.49156056685961 + ); + console.log(lng_lat_2, "gc坐标"); + }, }, -<<<<<<< HEAD }; -- 2.25.1