格式调整 #6
|
|
@ -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'],
|
||||
/* 要求中缀操作符周围有空格 */
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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服务地址!')
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,150 +11,150 @@
|
|||
<button @click="removeTMSLayer()">移除TMS服务图层</button>
|
||||
<button @click="transform()">坐标转换</button>
|
||||
</div>
|
||||
<div id="map"></div>
|
||||
<div id="map" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useRouter } from "vue-router";
|
||||
import Service from "../../examples/service.vue";
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import {
|
||||
loadWMS,
|
||||
removeLayer,
|
||||
loadWMTS,
|
||||
loadWFSLayer,
|
||||
loadTMSLayer,
|
||||
removeWFSLayer,
|
||||
} from "@/api/gis/service.js";
|
||||
import Transform from "@/api/gis/coordinate-conversion.js";
|
||||
removeWFSLayer
|
||||
} from '@/api/gis/service.js'
|
||||
import Transform from '@/api/gis/coordinate-conversion.js'
|
||||
export default {
|
||||
name: "HomePage",
|
||||
name: 'HomePage',
|
||||
components: {
|
||||
Service,
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
};
|
||||
},
|
||||
setup(props) {
|
||||
const router = useRouter();
|
||||
function toSystem() {
|
||||
router.push({ path: "/login" });
|
||||
setup (props) {
|
||||
const router = useRouter()
|
||||
function toSystem () {
|
||||
router.push({ path: '/login' })
|
||||
}
|
||||
return {
|
||||
toSystem,
|
||||
};
|
||||
toSystem
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initMap();
|
||||
data () {
|
||||
return {
|
||||
map: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initMap()
|
||||
},
|
||||
methods: {
|
||||
initMap() {
|
||||
initMap () {
|
||||
this.map = new mapboxgl.Map({
|
||||
container: "map",
|
||||
container: 'map',
|
||||
center: [120.476913, 31.416667],
|
||||
zoom: 5,
|
||||
style: {
|
||||
version: 8,
|
||||
name: "Mapbox Streets",
|
||||
name: 'Mapbox Streets',
|
||||
sources: {
|
||||
"osm-tiles": {
|
||||
type: "raster",
|
||||
tiles: ["http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"],
|
||||
'osm-tiles': {
|
||||
type: 'raster',
|
||||
tiles: ['http://c.tile.openstreetmap.org/{z}/{x}/{y}.png'],
|
||||
|
||||
tileSize: 256,
|
||||
},
|
||||
tileSize: 256
|
||||
}
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
id: "123",
|
||||
type: "raster",
|
||||
source: "osm-tiles",
|
||||
"source-layer": "osmtiles",
|
||||
},
|
||||
],
|
||||
},
|
||||
id: '123',
|
||||
type: 'raster',
|
||||
source: 'osm-tiles',
|
||||
'source-layer': 'osmtiles'
|
||||
}
|
||||
]
|
||||
}
|
||||
// style:normal_style
|
||||
});
|
||||
})
|
||||
},
|
||||
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: {} };
|
||||
loadWFSLayer(this.map, url, option);
|
||||
loadWFS () {
|
||||
const 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'
|
||||
const option = { id: 'point', type: 'circle', paint: {} }
|
||||
loadWFSLayer(this.map, url, option)
|
||||
},
|
||||
removeWFSLayer() {
|
||||
let option = { id: "point", type: "circle", paint: {} };
|
||||
removeWFSLayer () {
|
||||
const option = { id: 'point', type: 'circle', paint: {} }
|
||||
|
||||
removeWFSLayer(this.map, option);
|
||||
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",
|
||||
type: "raster",
|
||||
source: "wms-source",
|
||||
paint: {},
|
||||
};
|
||||
loadWMS () {
|
||||
const 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'
|
||||
const option = {
|
||||
id: 'wms-layer',
|
||||
sourceId: 'wms-sourceId',
|
||||
type: 'raster',
|
||||
source: 'wms-source',
|
||||
paint: {}
|
||||
}
|
||||
|
||||
loadWMS(this.map, url, option);
|
||||
loadWMS(this.map, url, option)
|
||||
},
|
||||
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 = {
|
||||
id: "wms-layer",
|
||||
sourceId: "wms-sourceId",
|
||||
type: "raster",
|
||||
source: "wms-source",
|
||||
paint: {},
|
||||
};
|
||||
removeLayer(this.map, url, option);
|
||||
removeWMSLayer () {
|
||||
const 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'
|
||||
const option = {
|
||||
id: 'wms-layer',
|
||||
sourceId: 'wms-sourceId',
|
||||
type: 'raster',
|
||||
source: 'wms-source',
|
||||
paint: {}
|
||||
}
|
||||
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 option = {
|
||||
id: "wmts-layer",
|
||||
type: "raster",
|
||||
source: "wmts-source",
|
||||
paint: { "raster-opacity": 0.8 },
|
||||
};
|
||||
loadWMTS () {
|
||||
const url =
|
||||
'http://192.168.11.35:8999/geoserver/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=dem_test%3Ajs'
|
||||
const option = {
|
||||
id: 'wmts-layer',
|
||||
type: 'raster',
|
||||
source: 'wmts-source',
|
||||
paint: { 'raster-opacity': 0.8 }
|
||||
}
|
||||
|
||||
loadWMTS(this.map, url, option);
|
||||
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 () {
|
||||
const 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);
|
||||
loadTMS () {
|
||||
let url
|
||||
const option = {}
|
||||
loadTMSLayer(this.map, url, option)
|
||||
},
|
||||
removeTMSLayer() {
|
||||
let url;
|
||||
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 () {
|
||||
const poi = { lng: 114.32894, lat: 30.585748 }
|
||||
const 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坐标");
|
||||
},
|
||||
},
|
||||
};
|
||||
const lng_lat_1 = Transform.bd09togcj02(113.912743, 22.497629)
|
||||
const lng_lat_2 = Transform.gcj02tobd09(
|
||||
113.90624786062033,
|
||||
22.49156056685961
|
||||
)
|
||||
console.log(lng_lat_2, 'gc坐标')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
|
|
@ -182,4 +182,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue