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

坐标匹配 #9

Manually merged
wangmengqi merged 1 commits from wangmengqi into develop 2022-10-31 15:02:23 +08:00
Conversation 0 Commits 1 Files Changed 4 +195 -39
4 changed files with 195 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,7 @@ export default {
* @param bd_lat
* @returns {*[]}
*/
bd09togcj02(bd_lon, bd_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)
@ -25,7 +25,7 @@ export default {
* @param lat
* @returns {*[]}
*/
gcj02tobd09(lng, 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
@ -38,7 +38,7 @@ export default {
* @param lat
* @returns {*[]}
*/
wgs84togcj02(lng, lat) {
wgs84togcj02 (lng, lat) {
if (this.out_of_china(lng, lat)) {
return [lng, lat]
} else {
@ -61,7 +61,7 @@ export default {
* @param lat
* @returns {*[]}
*/
gcj02towgs84(lng, lat) {
gcj02towgs84 (lng, lat) {
if (this.out_of_china(lng, lat)) {
return [lng, lat]
} else {
@ -84,7 +84,7 @@ export default {
* @param {*} lat
* @returns
*/
bd09towgs84(lng, lat) {
bd09towgs84 (lng, lat) {
// 百度坐标系先转为火星坐标系
const gcj02 = this.bd09togcj02(lng, lat)
// 火星坐标系转wgs84坐标系
@ -97,21 +97,21 @@ export default {
* @param {*} lat
* @returns
*/
wgs84tobd09(lng, lat) {
wgs84tobd09 (lng, lat) {
// wgs84先转为火星坐标系
const gcj02 = this.wgs84togcj02(lng, lat)
// 火星坐标系转百度坐标系
const result = this.gcj02tobd09(gcj02[0], gcj02[1])
return result
},
transformlat(lng, lat) {
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) {
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
@ -124,7 +124,7 @@ export default {
* @param lat
* @returns {boolean}
*/
out_of_china(lng, lat) {
out_of_china (lng, lat) {
return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false)
},
/**
@ -133,14 +133,14 @@ export default {
* @returns {{}}
* @private
*/
LngLatToMercator(poi) {
LngLatToMercator (lng, lat) {
const mercator = {}
const earthRad = 6378137.0
mercator.x = poi.lng * Math.PI / 180 * earthRad
const a = poi.lat * Math.PI / 180
mercator.x = lng * Math.PI / 180 * earthRad
const a = lat * Math.PI / 180
mercator.y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)))
return mercator
return [mercator.x, mercator.y]
},
/**
@ -149,12 +149,13 @@ export default {
* @returns {{}}
* @private
*/
MercatorToLngLat(poi) {
MercatorToLngLat (x, y) {
const lnglat = {}
lnglat.lng = poi.x / 20037508.34 * 180
const mmy = poi.y / 20037508.34 * 180
lnglat.lng = x / 20037508.34 * 180
const mmy = y / 20037508.34 * 180
lnglat.lat = 180 / Math.PI * (2 * Math.atan(Math.exp(mmy * Math.PI / 180)) - Math.PI / 2)
return lnglat
// console.log(lnglat, '经纬度')
return [lnglat.lng, lnglat.lat]
}
}

BIN
src/assets/img/located.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

139
src/components/PositionMatching/index.vue
View File

@ -1,30 +1,115 @@
<template>
<div class="searchOption">
<div>
<input id="keyword"
v-model="searchStyle"
type="radio"
value="keyword">
<label for="keyword">按关键字搜索</label>
</div>
<div>
<input id="lnglat"
v-model="searchStyle"
type="radio"
value="lnglat">
<label for="lnglat">按经纬度搜索</label>
</div>
</div>
<div class="content">
<img src="@/assets/img/location.png">
<input type="text"
placeholder="请输入搜索位置/坐标">
<input v-model="searchContent"
type="text"
placeholder="请输入搜索位置/坐标"
@input="searchPlace()">
<img src="@/assets/img/search.png"
@click="showList()">
</div>
<div ref="locationList"
class="locationList" />
class="my-click-transition">
<li v-for="(item,index) in localList"
:key="index"
class="itemLocation"
@click="flyTo(item.geometry,item.id)"><img src="@/assets/img/location.png">
<span class="locationName">{{ item.name }}</span>
<span class="locationAddress">{{ item.address }}</span>
</li>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
searchType: '',
searchStyle: 'keyword',
searchContent: '',
localList: []
}
},
methods: {
showList () {
if (this.$refs.locationList.className == 'locationList my-click-transition') {
this.$refs.locationList.className = 'locationList'
// if (this.$refs.locationList.className == 'my-click-transition') {
// this.$refs.locationList.className = 'locationList'
// } else {
// this.$refs.locationList.className = 'my-click-transition'
// }
},
// 实时查询
searchPlace () {
let url
if (this.searchStyle == 'keyword') {
console.log('111')
url = 'http://192.168.11.35:8500/thmap/poi/searchFeat/keywords?keywords=' + this.searchContent
} else {
this.$refs.locationList.className = 'locationList my-click-transition'
console.log('222')
const arr = this.searchContent.split(',')
url = 'http://192.168.11.35:8500/thmap/poi/searchFeat/keywords?lat=' + arr[0] + '&lng=' + arr[1] + '&distance=' + 50
}
axios.get(url).then((res) => {
// console.log(res.data.data.datas, '数据集')
if (res.data.data.datas) {
// console.log('有数据了')
this.$refs.locationList.className = 'locationList'
this.localList = res.data.data.datas
} else {
this.$refs.locationList.className = 'my-click-transition'
}
}).catch((err) => {
console.log(err)
})
},
flyTo (lonLatInfo, id) {
const Arr = lonLatInfo.split(' ')
// const Num1 = parseFloat(Arr[1])
const Num1 = Number(Arr[1].match(/\d+(\.\d+)?/g)[0])
const Num2 = Number(Arr[2].match(/\d+(\.\d+)?/g)[0])
const Arr1 = [Num1, Num2]
// console.log(this.$parent, '父组件')
this.$parent.flyTo(Arr1, id)
// // console.log(Arr1, '点位信息')
}
}
}
</script>
<style lang="scss" scoped>
.searchOption {
width: 300px;
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
line-height: 50px;
input {
margin-right: 5px;
}
}
.content {
width: 300px;
height: 45px;
@ -42,14 +127,42 @@ export default {
.locationList {
margin-top: 5px;
width: 300px;
height: 100px;
background-color: pink;
transform: scale(0.5, 0.5);
opacity: 0;
transition: transform 0.5s linear, opacity 0.5s linear;
// height: 100px;
background-color: rgba(245, 245, 245, 0.8);
transition: height 0.5s ease-in;
-webkit-transform: height 0.5s ease-in;
}
.my-click-transition {
opacity: 1;
transform: scale(1, 1);
overflow: hidden;
margin-top: 5px;
transition: height 0.5s ease-out;
-webkit-transform: height 0.5s ease-out;
height: 0;
width: 300px;
background-color: rgba(245, 245, 245, 0.8);
}
.itemLocation {
width: 300px;
height: 32px;
position: relative;
padding-left: 32px;
font-size: 13px;
overflow: hidden;
line-height: 32px;
list-style: none;
cursor: pointer;
img {
width: 26px;
height: 26px;
position: absolute;
top: 3px;
left: 0px;
}
.locationName {
color: #0082e5;
}
.locationAddress {
color: #565656;
}
}
</style>

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

@ -94,7 +94,7 @@ export default {
},
methods: {
initMap () {
mapboxgl.accessToken = 'pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQwMTZvMnRtYWZnM2lpbHFvIn0.ef3rFZTr9psmLWahrqap2A'
// mapboxgl.accessToken = 'pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQwMTZvMnRtYWZnM2lpbHFvIn0.ef3rFZTr9psmLWahrqap2A'
this.map = new mapboxgl.Map({
container: 'map',
@ -151,30 +151,35 @@ export default {
}
},
changeCoordinate (transformStyle) {
const arr = this.coordinateBefore.split(',')
switch (transformStyle) {
case 'bd09togcj02':
this.coordinateAfter = Transform.bd09togcj02(this.coordinateBefore)
this.coordinateAfter = Transform.bd09togcj02(arr[0], arr[1])
break
case 'gcj02tobd09':
this.coordinateAfter = Transform.gcj02tobd09(this.coordinateBefore)
this.coordinateAfter = Transform.gcj02tobd09(arr[0], arr[1])
break
case 'wgs84togcj02':
this.coordinateAfter = Transform.wgs84togcj02(this.coordinateBefore)
this.coordinateAfter = Transform.wgs84togcj02(arr[0], arr[1])
break
case 'gcj02towgs84':
this.coordinateAfter = Transform.gcj02towgs84(this.coordinateBefore)
this.coordinateAfter = Transform.gcj02towgs84(arr[0], arr[1])
break
case 'bd09towgs84':
this.coordinateAfter = Transform.bd09towgs84(this.coordinateBefore)
this.coordinateAfter = Transform.bd09towgs84(arr[0], arr[1])
break
case 'wgs84tobd09':
this.coordinateAfter = Transform.wgs84tobd09(this.coordinateBefore)
this.coordinateAfter = Transform.wgs84tobd09(arr[0], arr[1])
break
case 'LngLatToMercator':
this.coordinateAfter = Transform.LngLatToMercator(this.coordinateBefore)
this.coordinateAfter = Transform.LngLatToMercator(arr[0], arr[1])
break
case 'MercatorToLngLat':
this.coordinateAfter = Transform.MercatorToLngLat(this.coordinateBefore)
this.coordinateAfter = Transform.MercatorToLngLat(arr[0], arr[1])
break
}
},
@ -339,6 +344,43 @@ export default {
22.49156056685961
)
console.log(lng_lat_2, 'gc坐标')
},
flyTo (point, id) {
console.log(point, '传过来的点!')
this.map.flyTo({
center: point,
zoom: 10
})
if (this.map.getLayer(id)) {
} else {
this.map.loadImage(new URL('../../assets/img/located.png', import.meta.url).href, (error, image) => {
if (error) throw error
this.map.addImage(id + 'image', image)
this.map.addLayer({
id: id,
type: 'symbol',
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: point
}
}]
}
},
layout: {
'icon-image': id + 'image',
'icon-size': 0.3
}
})
})
}
}
}