From 3f23fbad3239cfcfd645c49f35e894a79c3a0e8d Mon Sep 17 00:00:00 2001
From: unknown <2548700810@qq.com>
Date: Mon, 24 Oct 2022 10:07:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.eslintrc.js | 2 +-
src/api/gis/coordinate-conversion.js | 236 ++++++++++++------------
src/api/gis/service.js | 259 +++++++++++++--------------
src/views/dashboard/index.vue | 201 +++++++++++----------
4 files changed, 343 insertions(+), 355 deletions(-)
diff --git a/.eslintrc.js b/.eslintrc.js
index 36b2749..109ec22 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -285,7 +285,7 @@ module.exports = {
/* 要求或禁止语句块之前的空格 */
'space-before-blocks': [2, 'always'],
/* 要求或禁止函数圆括号之前有一个空格 */
- 'space-before-function-paren': [2, 'never'],
+ // 'space-before-function-paren': [2, 'never'],
/* 禁止或强制圆括号内的空格 */
'space-in-parens': [2, 'never'],
/* 要求中缀操作符周围有空格 */
diff --git a/src/api/gis/coordinate-conversion.js b/src/api/gis/coordinate-conversion.js
index f4073fd..09ec518 100644
--- a/src/api/gis/coordinate-conversion.js
+++ b/src/api/gis/coordinate-conversion.js
@@ -1,162 +1,160 @@
export default {
- x_pi: Math.PI * 3000.0 / 180.0,
- a: 6378245.0,
- ee: 0.00669342162296594323,
- /**
+ 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]
- },
- /**
+ bd09togcj02(bd_lon, bd_lat) {
+ const x = bd_lon - 0.0065
+ const y = bd_lat - 0.006
+ const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi)
+ const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi)
+ const gg_lng = z * Math.cos(theta)
+ const gg_lat = z * Math.sin(theta)
+ return [gg_lng, gg_lat]
+ },
+ /**
* 火星坐标系(GCJ-02)与百度坐标系(BD-09)的转换
* 即谷歌,高德转百度
* @param lng
- * @param lat
+ * @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]
- },
- /**
+ gcj02tobd09(lng, lat) {
+ const z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * this.x_pi)
+ const theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * this.x_pi)
+ const bd_lng = z * Math.cos(theta) + 0.0065
+ const 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]
- }
- },
- /**
+ 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)
+ const radlat = lat / 180.0 * Math.PI
+ let magic = Math.sin(radlat)
+ magic = 1 - this.ee * magic * magic
+ const 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)
+ const mglat = lat + dlat
+ const 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]
- }
- },
- /**
+ 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)
+ const radlat = lat / 180.0 * Math.PI
+ let magic = Math.sin(radlat)
+ magic = 1 - this.ee * magic * magic
+ const 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)
+ const mglat = lat + dlat
+ const mglng = lng + dlng
+ return [lng * 2 - mglng, lat * 2 - mglat]
+ }
+ },
+ /**
* 百度坐标系转wgs84坐标系
- * @param {*} lng
- * @param {*} lat
- * @returns
+ * @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
- },
- /**
+ bd09towgs84(lng, lat) {
+ // 百度坐标系先转为火星坐标系
+ const gcj02 = this.bd09togcj02(lng, lat)
+ // 火星坐标系转wgs84坐标系
+ const result = this.gcj02towgs84(gcj02[0], gcj02[1])
+ return result
+ },
+ /**
* wgs84坐标系转百度坐标系
- * @param {*} lng
- * @param {*} lat
- * @returns
+ * @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
- },
- /**
+ wgs84tobd09(lng, lat) {
+ // wgs84先转为火星坐标系
+ const gcj02 = this.wgs84togcj02(lng, lat)
+ // 火星坐标系转百度坐标系
+ const 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)
- },
- /**
+ 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;
- },
+ LngLatToMercator(poi) {
+ const mercator = {}
+ const earthRad = 6378137.0
+ mercator.x = poi.lng * Math.PI / 180 * earthRad
+ const 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;
- },
+ MercatorToLngLat(poi) {
+ const lnglat = {}
+ lnglat.lng = poi.x / 20037508.34 * 180
+ const mmy = poi.y / 20037508.34 * 180
+ lnglat.lat = 180 / Math.PI * (2 * Math.atan(Math.exp(mmy * Math.PI / 180)) - Math.PI / 2)
+ return lnglat
+ }
-
-}
\ No newline at end of file
+}
diff --git a/src/api/gis/service.js b/src/api/gis/service.js
index 345cf50..0805de0 100644
--- a/src/api/gis/service.js
+++ b/src/api/gis/service.js
@@ -1,169 +1,160 @@
-import axios from "axios";
+import axios from 'axios'
/**
* @description:加载WMS服务
- * @param map
+ * @param map
* @param url String
- * @param option Object
- *
+ * @param option Object
+ *
*/
-export function loadWMS(map,url,option){
- if(url) {
- let id=url.split('layer=')[1]
- console.log(id,'新增的图层id')
- map.addSource(option.source,{
- 'id':option.id,
- 'type':'raster',
- 'tiles':[url],
- 'tileSize':512
- })
+export function loadWMS(map, url, option) {
+ if (url) {
+ const id = url.split('layer=')[1]
+ console.log(id, '新增的图层id')
+ map.addSource(option.source, {
+ id: option.id,
+ type: 'raster',
+ tiles: [url],
+ tileSize: 512
+ })
map.addLayer({
- 'id':id,
- 'type':option.type,
- 'source':option.source,
- 'paint':option.paint
- })
-
- }else{
- alert('请输入WMS服务地址!')
- }
-
+ id: id,
+ type: option.type,
+ source: option.source,
+ paint: option.paint
+ })
+ } else {
+ alert('请输入WMS服务地址!')
+ }
}
/**
* @description:根据id删除指定图层
- * @param map
- * @param url
+ * @param map
+ * @param url
*/
-export function removeLayer(map,url,option){
- console.log(url,'地址')
- let id=url.split('layer=')[1]
- console.log(id,'移除的id')
- map.removeLayer(id)
- map.removeSource(id)
+export function removeLayer(map, url, option) {
+ console.log(url, '地址')
+ const id = url.split('layer=')[1]
+ console.log(id, '移除的id')
+ map.removeLayer(id)
+ map.removeSource(id)
}
/**
* @description:移除WFS服务图层
- * @param {*} map
- * @param {*} url
- * @param {*} option
+ * @param {*} map
+ * @param {*} url
+ * @param {*} option
*/
-export function removeWFSLayer(map,option){
- map.removeLayer(option.id)
- map.removeSource(option.id)
+export function removeWFSLayer(map, option) {
+ map.removeLayer(option.id)
+ map.removeSource(option.id)
}
/**
* @description:加载WFS服务
* @param url String
- * @param option Object
+ * @param option Object
*/
- export function loadWFSLayer(map,url,option){
- if(url){
- axios.get(url).then((res) => {
-
- let features = res.data.features;
- // console.log(features, "元素层");
- // let layerType = null;
- // let geometryType = features[0].geometry.type;
- let addLayerOption = {
- id: option.id,
- type: option.type,
- source: {
- type: "geojson",
- data: {
- type: "FeatureCollection",
- features: features,
- },
- },
- layout: {
- visibility: "visible",
- },
- paint:option.paint
- };
- // if (geometryType == "MultiLineString") {
- // addLayerOption.type = "line";
- // } else if (geometryType == "Line") {
- // addLayerOption.type = "line";
- // } else if (geometryType == "Point") {
- // addLayerOption.type = "circle";
- // } else if (geometryType == " MultiPoint") {
- // addLayerOption.type = "circle";
- // } else if (geometryType == "Polygon") {
- // addLayerOption.type = "fill";
- // addLayerOption.paint = {
- // "fill-color": "rgba(200,100,240,0.4)",
- // "fill-outline-color": "rgba(200,100,240,1)",
- // };
- // } else if (geometryType == "MultiPolygon") {
- // addLayerOption.type = "fill";
- // addLayerOption.paint = {
- // "fill-color": "rgba(200,100,240,0.4)",
- // "fill-outline-color": "rgba(200,100,240,1)",
- // };
- // }
-
- map.addLayer(addLayerOption);
-
- });
- }else{
- alert('请输入WFS地址!')
- }
-
+export function loadWFSLayer(map, url, option) {
+ if (url) {
+ axios.get(url).then((res) => {
+ const features = res.data.features
+ // console.log(features, "元素层");
+ // let layerType = null;
+ // let geometryType = features[0].geometry.type;
+ const addLayerOption = {
+ id: option.id,
+ type: option.type,
+ source: {
+ type: 'geojson',
+ data: {
+ type: 'FeatureCollection',
+ features: features
+ }
+ },
+ layout: {
+ visibility: 'visible'
+ },
+ paint: option.paint
+ }
+ // if (geometryType == "MultiLineString") {
+ // addLayerOption.type = "line";
+ // } else if (geometryType == "Line") {
+ // addLayerOption.type = "line";
+ // } else if (geometryType == "Point") {
+ // addLayerOption.type = "circle";
+ // } else if (geometryType == " MultiPoint") {
+ // addLayerOption.type = "circle";
+ // } else if (geometryType == "Polygon") {
+ // addLayerOption.type = "fill";
+ // addLayerOption.paint = {
+ // "fill-color": "rgba(200,100,240,0.4)",
+ // "fill-outline-color": "rgba(200,100,240,1)",
+ // };
+ // } else if (geometryType == "MultiPolygon") {
+ // addLayerOption.type = "fill";
+ // addLayerOption.paint = {
+ // "fill-color": "rgba(200,100,240,0.4)",
+ // "fill-outline-color": "rgba(200,100,240,1)",
+ // };
+ // }
+
+ map.addLayer(addLayerOption)
+ })
+ } else {
+ alert('请输入WFS地址!')
+ }
}
/**
* @description:加载WMTS服务
* @param map
* @param url String
- * @param option Object
+ * @param option Object
*/
- export function loadWMTS(map,url,option){
- if(url){
-
- let id=url.split('layer=')[1]
- map.addSource(option.source,{
- 'type':'raster',
- 'tiles':[url],
-
- 'tileSize':256
- })
- map.addLayer({
- 'id':id,
- 'type':option.type,
- 'source':option.source,
- 'paint':option.paint
- })
- }else{
- alert('请输入WMTS服务地址!')
- }
-
+export function loadWMTS(map, url, option) {
+ if (url) {
+ const id = url.split('layer=')[1]
+ map.addSource(option.source, {
+ type: 'raster',
+ tiles: [url],
+
+ tileSize: 256
+ })
+ map.addLayer({
+ id: id,
+ type: option.type,
+ source: option.source,
+ paint: option.paint
+ })
+ } else {
+ alert('请输入WMTS服务地址!')
+ }
}
/**
* @description:加载TMS服务
- * @param map
+ * @param map
* @param url String
- * @param option Object
+ * @param option Object
*/
- export function loadTMSLayer(map,url,option){
- if(url){
- let id=url.split('layer=')[1]
- map.addSource(option.source,{
- 'type':'raster',
- 'tiles':[url],
-
- 'tileSize':256
- })
- map.addLayer({
- 'id':id,
- 'type':option.type,
- 'source':option.source,
- 'paint':option.paint
- })
- }else{
- alert('请输入TMS服务地址!')
- }
-
-}
+export function loadTMSLayer(map, url, option) {
+ if (url) {
+ const id = url.split('layer=')[1]
+ map.addSource(option.source, {
+ type: 'raster',
+ tiles: [url],
+ tileSize: 256
+ })
+ map.addLayer({
+ id: id,
+ type: option.type,
+ source: option.source,
+ paint: option.paint
+ })
+ } else {
+ alert('请输入TMS服务地址!')
+ }
+}
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1d0484c..0fe450b 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -11,150 +11,150 @@
-
+
-
--
2.25.1