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/api/gis/service.js b/src/api/gis/service.js new file mode 100644 index 0000000..345cf50 --- /dev/null +++ b/src/api/gis/service.js @@ -0,0 +1,169 @@ +import axios from "axios"; + +/** + * @description:加载WMS服务 + * @param map + * @param url String + * @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 + }) + map.addLayer({ + 'id':id, + 'type':option.type, + 'source':option.source, + 'paint':option.paint + }) + + }else{ + alert('请输入WMS服务地址!') + } + +} + +/** + * @description:根据id删除指定图层 + * @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) +} + +/** + * @description:移除WFS服务图层 + * @param {*} map + * @param {*} url + * @param {*} option + */ +export function removeWFSLayer(map,option){ + map.removeLayer(option.id) + map.removeSource(option.id) +} +/** + * @description:加载WFS服务 + * @param url String + * @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地址!') + } + +} + +/** + * @description:加载WMTS服务 + * @param map + * @param url String + * @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服务地址!') + } + +} + +/** + * @description:加载TMS服务 + * @param map + * @param url String + * @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服务地址!') + } + +} + diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index c21d447..1d0484c 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,75 +1,185 @@