zhangtao
/
gis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'wangmengqi' of zhangtao/gis into develop

This commit is contained in:
wangmengqi 2022-10-24 10:10:49 +08:00
parent 889830aa1b 3f23fbad32
commit 863b7866cb
4 changed files with 343 additions and 355 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.js
View File

@ -285,7 +285,7 @@ module.exports = {
/* 要求或禁止语句块之前的空格 */ /* 要求或禁止语句块之前的空格 */
'space-before-blocks': [2, 'always'], 'space-before-blocks': [2, 'always'],
/* 要求或禁止函数圆括号之前有一个空格 */ /* 要求或禁止函数圆括号之前有一个空格 */
'space-before-function-paren': [2, 'never'], // 'space-before-function-paren': [2, 'never'],
/* 禁止或强制圆括号内的空格 */ /* 禁止或强制圆括号内的空格 */
'space-in-parens': [2, 'never'], 'space-in-parens': [2, 'never'],
/* 要求中缀操作符周围有空格 */ /* 要求中缀操作符周围有空格 */

64
src/api/gis/coordinate-conversion.js
View File

@ -10,12 +10,12 @@ export default {
* @returns {*[]} * @returns {*[]}
*/ */
bd09togcj02(bd_lon, bd_lat) { bd09togcj02(bd_lon, bd_lat) {
let x = bd_lon - 0.0065 const x = bd_lon - 0.0065
let y = bd_lat - 0.006 const y = bd_lat - 0.006
let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi) const 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) const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi)
let gg_lng = z * Math.cos(theta) const gg_lng = z * Math.cos(theta)
let gg_lat = z * Math.sin(theta) const gg_lat = z * Math.sin(theta)
return [gg_lng, gg_lat] return [gg_lng, gg_lat]
}, },
/** /**
@ -26,10 +26,10 @@ export default {
* @returns {*[]} * @returns {*[]}
*/ */
gcj02tobd09(lng, lat) { gcj02tobd09(lng, lat) {
let z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * this.x_pi) const 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) const theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * this.x_pi)
let bd_lng = z * Math.cos(theta) + 0.0065 const bd_lng = z * Math.cos(theta) + 0.0065
let bd_lat = z * Math.sin(theta) + 0.006 const bd_lat = z * Math.sin(theta) + 0.006
return [bd_lng, bd_lat] return [bd_lng, bd_lat]
}, },
/** /**
@ -44,14 +44,14 @@ export default {
} else { } else {
let dlat = this.transformlat(lng - 105.0, lat - 35.0) let dlat = this.transformlat(lng - 105.0, lat - 35.0)
let dlng = this.transformlng(lng - 105.0, lat - 35.0) let dlng = this.transformlng(lng - 105.0, lat - 35.0)
let radlat = lat / 180.0 * Math.PI const radlat = lat / 180.0 * Math.PI
let magic = Math.sin(radlat) let magic = Math.sin(radlat)
magic = 1 - this.ee * magic * magic magic = 1 - this.ee * magic * magic
let sqrtmagic = Math.sqrt(magic) const sqrtmagic = Math.sqrt(magic)
dlat = (dlat * 180.0) / ((this.a * (1 - this.ee)) / (magic * sqrtmagic) * Math.PI) 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) dlng = (dlng * 180.0) / (this.a / sqrtmagic * Math.cos(radlat) * Math.PI)
let mglat = lat + dlat const mglat = lat + dlat
let mglng = lng + dlng const mglng = lng + dlng
return [mglng, mglat] return [mglng, mglat]
} }
}, },
@ -67,14 +67,14 @@ export default {
} else { } else {
let dlat = this.transformlat(lng - 105.0, lat - 35.0) let dlat = this.transformlat(lng - 105.0, lat - 35.0)
let dlng = this.transformlng(lng - 105.0, lat - 35.0) let dlng = this.transformlng(lng - 105.0, lat - 35.0)
let radlat = lat / 180.0 * Math.PI const radlat = lat / 180.0 * Math.PI
let magic = Math.sin(radlat) let magic = Math.sin(radlat)
magic = 1 - this.ee * magic * magic magic = 1 - this.ee * magic * magic
let sqrtmagic = Math.sqrt(magic) const sqrtmagic = Math.sqrt(magic)
dlat = (dlat * 180.0) / ((this.a * (1 - this.ee)) / (magic * sqrtmagic) * Math.PI) 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) dlng = (dlng * 180.0) / (this.a / sqrtmagic * Math.cos(radlat) * Math.PI)
let mglat = lat + dlat const mglat = lat + dlat
let mglng = lng + dlng const mglng = lng + dlng
return [lng * 2 - mglng, lat * 2 - mglat] return [lng * 2 - mglng, lat * 2 - mglat]
} }
}, },
@ -86,9 +86,9 @@ export default {
*/ */
bd09towgs84(lng, lat) { bd09towgs84(lng, lat) {
// 百度坐标系先转为火星坐标系 // 百度坐标系先转为火星坐标系
let gcj02=this.bd09togcj02(lng,lat) const gcj02 = this.bd09togcj02(lng, lat)
// 火星坐标系转wgs84坐标系 // 火星坐标系转wgs84坐标系
let result=this.gcj02towgs84(gcj02[0],gcj02[1]) const result = this.gcj02towgs84(gcj02[0], gcj02[1])
return result return result
}, },
/** /**
@ -99,9 +99,9 @@ export default {
*/ */
wgs84tobd09(lng, lat) { wgs84tobd09(lng, lat) {
// wgs84先转为火星坐标系 // wgs84先转为火星坐标系
let gcj02=this.wgs84togcj02(lng,lat) const gcj02 = this.wgs84togcj02(lng, lat)
// 火星坐标系转百度坐标系 // 火星坐标系转百度坐标系
let result=this.gcj02tobd09(gcj02[0],gcj02[1]) const result = this.gcj02tobd09(gcj02[0], gcj02[1])
return result return result
}, },
transformlat(lng, lat) { transformlat(lng, lat) {
@ -134,13 +134,13 @@ export default {
* @private * @private
*/ */
LngLatToMercator(poi) { LngLatToMercator(poi) {
let mercator = {} const mercator = {}
let earthRad = 6378137.0; const earthRad = 6378137.0
mercator.x = poi.lng * Math.PI / 180 * earthRad; mercator.x = poi.lng * Math.PI / 180 * earthRad
let a = poi.lat * Math.PI / 180; const a = poi.lat * Math.PI / 180
mercator.y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a))) mercator.y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)))
return mercator; return mercator
}, },
/** /**
@ -150,13 +150,11 @@ export default {
* @private * @private
*/ */
MercatorToLngLat(poi) { MercatorToLngLat(poi) {
let lnglat = {} const lnglat = {}
lnglat.lng = poi.x / 20037508.34 * 180 lnglat.lng = poi.x / 20037508.34 * 180
let mmy = poi.y / 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) lnglat.lat = 180 / Math.PI * (2 * Math.atan(Math.exp(mmy * Math.PI / 180)) - Math.PI / 2)
console.log(lnglat, '222') return lnglat
return lnglat; }
},
} }

83
src/api/gis/service.js
View File

@ -1,4 +1,4 @@
import axios from "axios"; import axios from 'axios'
/** /**
* @description:加载WMS服务 * @description:加载WMS服务
@ -9,25 +9,23 @@ import axios from "axios";
*/ */
export function loadWMS(map, url, option) { export function loadWMS(map, url, option) {
if (url) { if (url) {
let id=url.split('layer=')[1] const id = url.split('layer=')[1]
console.log(id, '新增的图层id') console.log(id, '新增的图层id')
map.addSource(option.source, { map.addSource(option.source, {
'id':option.id, id: option.id,
'type':'raster', type: 'raster',
'tiles':[url], tiles: [url],
'tileSize':512 tileSize: 512
}) })
map.addLayer({ map.addLayer({
'id':id, id: id,
'type':option.type, type: option.type,
'source':option.source, source: option.source,
'paint':option.paint paint: option.paint
}) })
} else { } else {
alert('请输入WMS服务地址!') alert('请输入WMS服务地址!')
} }
} }
/** /**
@ -37,7 +35,7 @@ export function loadWMS(map,url,option){
*/ */
export function removeLayer(map, url, option) { export function removeLayer(map, url, option) {
console.log(url, '地址') console.log(url, '地址')
let id=url.split('layer=')[1] const id = url.split('layer=')[1]
console.log(id, '移除的id') console.log(id, '移除的id')
map.removeLayer(id) map.removeLayer(id)
map.removeSource(id) map.removeSource(id)
@ -61,26 +59,25 @@ export function removeWFSLayer(map,option){
export function loadWFSLayer(map, url, option) { export function loadWFSLayer(map, url, option) {
if (url) { if (url) {
axios.get(url).then((res) => { axios.get(url).then((res) => {
const features = res.data.features
let features = res.data.features;
// console.log(features, "元素层"); // console.log(features, "元素层");
// let layerType = null; // let layerType = null;
// let geometryType = features[0].geometry.type; // let geometryType = features[0].geometry.type;
let addLayerOption = { const addLayerOption = {
id: option.id, id: option.id,
type: option.type, type: option.type,
source: { source: {
type: "geojson", type: 'geojson',
data: { data: {
type: "FeatureCollection", type: 'FeatureCollection',
features: features, features: features
}, }
}, },
layout: { layout: {
visibility: "visible", visibility: 'visible'
}, },
paint: option.paint paint: option.paint
}; }
// if (geometryType == "MultiLineString") { // if (geometryType == "MultiLineString") {
// addLayerOption.type = "line"; // addLayerOption.type = "line";
// } else if (geometryType == "Line") { // } else if (geometryType == "Line") {
@ -103,13 +100,11 @@ export function removeWFSLayer(map,option){
// }; // };
// } // }
map.addLayer(addLayerOption); map.addLayer(addLayerOption)
})
});
} else { } else {
alert('请输入WFS地址!') alert('请输入WFS地址!')
} }
} }
/** /**
@ -120,24 +115,22 @@ export function removeWFSLayer(map,option){
*/ */
export function loadWMTS(map, url, option) { export function loadWMTS(map, url, option) {
if (url) { if (url) {
const id = url.split('layer=')[1]
let id=url.split('layer=')[1]
map.addSource(option.source, { map.addSource(option.source, {
'type':'raster', type: 'raster',
'tiles':[url], tiles: [url],
'tileSize':256 tileSize: 256
}) })
map.addLayer({ map.addLayer({
'id':id, id: id,
'type':option.type, type: option.type,
'source':option.source, source: option.source,
'paint':option.paint paint: option.paint
}) })
} else { } else {
alert('请输入WMTS服务地址!') alert('请输入WMTS服务地址!')
} }
} }
/** /**
@ -148,22 +141,20 @@ export function removeWFSLayer(map,option){
*/ */
export function loadTMSLayer(map, url, option) { export function loadTMSLayer(map, url, option) {
if (url) { if (url) {
let id=url.split('layer=')[1] const id = url.split('layer=')[1]
map.addSource(option.source, { map.addSource(option.source, {
'type':'raster', type: 'raster',
'tiles':[url], tiles: [url],
'tileSize':256 tileSize: 256
}) })
map.addLayer({ map.addLayer({
'id':id, id: id,
'type':option.type, type: option.type,
'source':option.source, source: option.source,
'paint':option.paint paint: option.paint
}) })
} else { } else {
alert('请输入TMS服务地址!') alert('请输入TMS服务地址!')
} }
} }

173
src/views/dashboard/index.vue
View File

@ -11,150 +11,150 @@
<button @click="removeTMSLayer()">移除TMS服务图层</button> <button @click="removeTMSLayer()">移除TMS服务图层</button>
<button @click="transform()">坐标转换</button> <button @click="transform()">坐标转换</button>
</div> </div>
<div id="map"></div> <div id="map" />
</div> </div>
</template> </template>
<script> <script>
import { useRouter } from "vue-router"; import { useRouter } from 'vue-router'
import Service from "../../examples/service.vue";
import { import {
loadWMS, loadWMS,
removeLayer, removeLayer,
loadWMTS, loadWMTS,
loadWFSLayer, loadWFSLayer,
loadTMSLayer, loadTMSLayer,
removeWFSLayer, removeWFSLayer
} from "@/api/gis/service.js"; } from '@/api/gis/service.js'
import Transform from "@/api/gis/coordinate-conversion.js"; import Transform from '@/api/gis/coordinate-conversion.js'
export default { export default {
name: "HomePage", name: 'HomePage',
components: { components: {
Service,
},
setup (props) {
const router = useRouter()
function toSystem () {
router.push({ path: '/login' })
}
return {
toSystem
}
}, },
data () { data () {
return { return {
map: null, map: null
};
},
setup(props) {
const router = useRouter();
function toSystem() {
router.push({ path: "/login" });
} }
return {
toSystem,
};
}, },
mounted () { mounted () {
this.initMap(); this.initMap()
}, },
methods: { methods: {
initMap () { initMap () {
this.map = new mapboxgl.Map({ this.map = new mapboxgl.Map({
container: "map", container: 'map',
center: [120.476913, 31.416667], center: [120.476913, 31.416667],
zoom: 5, zoom: 5,
style: { style: {
version: 8, version: 8,
name: "Mapbox Streets", name: 'Mapbox Streets',
sources: { sources: {
"osm-tiles": { 'osm-tiles': {
type: "raster", type: 'raster',
tiles: ["http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"], tiles: ['http://c.tile.openstreetmap.org/{z}/{x}/{y}.png'],
tileSize: 256, tileSize: 256
}, }
}, },
layers: [ layers: [
{ {
id: "123", id: '123',
type: "raster", type: 'raster',
source: "osm-tiles", source: 'osm-tiles',
"source-layer": "osmtiles", 'source-layer': 'osmtiles'
}, }
], ]
}, }
// style:normal_style // style:normal_style
}); })
}, },
loadWFS () { loadWFS () {
let url = 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"; '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: {} }; const option = { id: 'point', type: 'circle', paint: {} }
loadWFSLayer(this.map, url, option); loadWFSLayer(this.map, url, option)
}, },
removeWFSLayer () { removeWFSLayer () {
let option = { id: "point", type: "circle", paint: {} }; const option = { id: 'point', type: 'circle', paint: {} }
removeWFSLayer(this.map, option); removeWFSLayer(this.map, option)
}, },
loadWMS () { loadWMS () {
let url = 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"; '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 = { const option = {
id: "wms-layer", id: 'wms-layer',
sourceId: "wms-sourceId", sourceId: 'wms-sourceId',
type: "raster", type: 'raster',
source: "wms-source", source: 'wms-source',
paint: {}, paint: {}
}; }
loadWMS(this.map, url, option); loadWMS(this.map, url, option)
}, },
removeWMSLayer () { removeWMSLayer () {
let url = 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"; '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 = { const option = {
id: "wms-layer", id: 'wms-layer',
sourceId: "wms-sourceId", sourceId: 'wms-sourceId',
type: "raster", type: 'raster',
source: "wms-source", source: 'wms-source',
paint: {}, paint: {}
}; }
removeLayer(this.map, url, option); removeLayer(this.map, url, option)
}, },
loadWMTS () { loadWMTS () {
let url = 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"; '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 = { const option = {
id: "wmts-layer", id: 'wmts-layer',
type: "raster", type: 'raster',
source: "wmts-source", source: 'wmts-source',
paint: { "raster-opacity": 0.8 }, paint: { 'raster-opacity': 0.8 }
}; }
loadWMTS(this.map, url, option); loadWMTS(this.map, url, option)
}, },
removeWMTSLayer () { removeWMTSLayer () {
let url = 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"; '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); removeLayer(this.map, url)
}, },
loadTMS () { loadTMS () {
let url; let url
let option = {}; const option = {}
loadTMSLayer(this.map, url, option); loadTMSLayer(this.map, url, option)
}, },
removeTMSLayer () { removeTMSLayer () {
let url; let url
removeLayer(this.map, url); removeLayer(this.map, url)
}, },
transform () { transform () {
let poi = { lng: 114.32894, lat: 30.585748 }; const poi = { lng: 114.32894, lat: 30.585748 }
let poi2 = { x: 12727039.383734727, y: 3579066.6894065156 }; const poi2 = { x: 12727039.383734727, y: 3579066.6894065156 }
// Transform.LngLatToMercator(poi) // Transform.LngLatToMercator(poi)
// Transform.MercatorToLngLat(poi2) // Transform.MercatorToLngLat(poi2)
let lng_lat_1 = Transform.bd09togcj02(113.912743, 22.497629); const lng_lat_1 = Transform.bd09togcj02(113.912743, 22.497629)
let lng_lat_2 = Transform.gcj02tobd09( const lng_lat_2 = Transform.gcj02tobd09(
113.90624786062033, 113.90624786062033,
22.49156056685961 22.49156056685961
); )
console.log(lng_lat_2, "gc坐标"); console.log(lng_lat_2, 'gc坐标')
}, }
}, }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content { .content {
@ -182,4 +182,3 @@ export default {
} }
} }
</style> </style>