wangyifang
/
patrol-wzgl-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

地图定位

Browse Source
master
lion 3 months ago
parent d8abe532dd
commit 1a8dddb0d3
2 changed files with 1332 additions and 75 deletions
Show Stats Download Patch File Download Diff File

1104
src/components/maps/maps copy.vue
View File

File diff suppressed because it is too large Load Diff

169
src/components/maps/maps.vue
Unescape View File

@ -334,6 +334,134 @@ export default {
this.initLoad()
},
methods: {
// 坐标转换：高德地图(GCJ-02) 转 天地图(CGCS2000)
// 高德地图使用GCJ-02坐标系，天地图使用CGCS2000坐标系
convertGCJ02ToCGCS2000(lng, lat) {
// 确保输入是数字类型
const numLng = parseFloat(lng)
const numLat = parseFloat(lat)
// 检查转换是否成功
if (isNaN(numLng) || isNaN(numLat)) {
console.error('坐标转换失败：经纬度不是有效的数字', { lng, lat })
return { lng: 0, lat: 0 }
}
// 首先将GCJ-02转换为WGS84
const wgs84 = this.convertGCJ02ToWGS84(numLng, numLat)
// 然后将WGS84转换为CGCS2000
const result = this.convertWGS84ToCGCS2000(wgs84.lng, wgs84.lat)
// 调试输出
console.log('坐标转换:', {
原始输入: { lng, lat, lngType: typeof lng, latType: typeof lat },
转换后数字: { lng: numLng, lat: numLat },
转换后坐标: result
})
return result
},
// GCJ-02 转 WGS84
convertGCJ02ToWGS84(lng, lat) {
const a = 6378245.0
const ee = 0.00669342162296594323
const pi = 3.1415926535897932384626
// 确保输入是有效的数字
if (isNaN(lng) || isNaN(lat)) {
console.error('GCJ02转WGS84失败：输入不是有效数字', { lng, lat })
return { lng: lng, lat: lat }
}
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 * pi
let magic = Math.sin(radLat)
magic = 1 - ee * magic * magic
const sqrtMagic = Math.sqrt(magic)
dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi)
dLng = (dLng * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi)
const mgLat = lat + dLat
const mgLng = lng + dLng
const result = { lng: lng * 2 - mgLng, lat: lat * 2 - mgLat }
// 检查结果是否有效
if (isNaN(result.lng) || isNaN(result.lat)) {
console.error('GCJ02转WGS84结果无效', { input: { lng, lat }, output: result })
return { lng: lng, lat: lat }
}
return result
},
// WGS84 转 CGCS2000 (近似转换，误差较小)
convertWGS84ToCGCS2000(lng, lat) {
// CGCS2000与WGS84在大部分地区差异很小，可以直接使用
// 如果需要精确转换，可以使用七参数转换
return { lng: lng, lat: lat }
},
// 辅助方法：纬度转换
transformLat(lng, lat) {
const pi = 3.1415926535897932384626
// 确保输入是数字
const numLng = parseFloat(lng)
const numLat = parseFloat(lat)
if (isNaN(numLng) || isNaN(numLat)) {
console.error('transformLat输入无效', { lng, lat })
return 0
}
let ret = -100.0 + 2.0 * numLng + 3.0 * numLat + 0.2 * numLat * numLat + 0.1 * numLng * numLat + 0.2 * Math.sqrt(Math.abs(numLng))
ret += (20.0 * Math.sin(6.0 * numLng * pi) + 20.0 * Math.sin(2.0 * numLng * pi)) * 2.0 / 3.0
ret += (20.0 * Math.sin(numLat * pi) + 40.0 * Math.sin(numLat / 3.0 * pi)) * 2.0 / 3.0
ret += (160.0 * Math.sin(numLat / 12.0 * pi) + 320 * Math.sin(numLat * pi / 30.0)) * 2.0 / 3.0
return isNaN(ret) ? 0 : ret
},
// 辅助方法：经度转换
transformLng(lng, lat) {
const pi = 3.1415926535897932384626
// 确保输入是数字
const numLng = parseFloat(lng)
const numLat = parseFloat(lat)
if (isNaN(numLng) || isNaN(numLat)) {
console.error('transformLng输入无效', { lng, lat })
return 0
}
let ret = 300.0 + numLng + 2.0 * numLat + 0.1 * numLng * numLng + 0.1 * numLng * numLat + 0.1 * Math.sqrt(Math.abs(numLng))
ret += (20.0 * Math.sin(6.0 * numLng * pi) + 20.0 * Math.sin(2.0 * numLng * pi)) * 2.0 / 3.0
ret += (20.0 * Math.sin(numLng * pi) + 40.0 * Math.sin(numLng / 3.0 * pi)) * 2.0 / 3.0
ret += (150.0 * Math.sin(numLng / 12.0 * pi) + 300.0 * Math.sin(numLng / 30.0 * pi)) * 2.0 / 3.0
return isNaN(ret) ? 0 : ret
},
// 测试坐标转换
testCoordinateConversion() {
// 测试一些常见的坐标
const testCoords = [
{ lng: '120.612720', lat: '31.321883' }, // 字符串类型
{ lng: 120.612720, lat: 31.321883 }, // 数字类型
{ lng: '120.0', lat: '30.0' }, // 简单坐标
]
console.log('=== 坐标转换测试 ===')
testCoords.forEach((coord, index) => {
console.log(`测试 ${index + 1}:`, coord)
const result = this.convertGCJ02ToCGCS2000(coord.lng, coord.lat)
console.log(`结果 ${index + 1}:`, result)
})
},
initLoad() {
var that = this
var clientHeight = document.documentElement.clientHeight
@ -342,6 +470,9 @@ export default {
that.mapHeight = tableHeight + 'px'
this.$emit('mapHeight', that.mapHeight)
this.showMaps(that.mapHeight)
// 在初始化时运行坐标转换测试
this.testCoordinateConversion()
},
showMaps() {
this.$nextTick(function() {
@ -514,9 +645,15 @@ export default {
})
// 添加图层
this.map.addLayer(this.flagLayer)
// 坐标转换：高德地图坐标转天地图坐标
const convertedCoords = this.convertGCJ02ToCGCS2000(
this.locationObj.location.longitude,
this.locationObj.location.latitude
)
// 创建feature，一个feature就是一个点坐标信息
const feature = new Feature({
geometry: new Point([this.locationObj.location.longitude, this.locationObj.location.latitude])
geometry: new Point([convertedCoords.lng, convertedCoords.lat])
})
// 设置 展示信息
feature.set('obj', this.locationObj)
@ -535,8 +672,8 @@ export default {
this.flagLayer.getSource().addFeatures(this.featuresArr)
this.$nextTick(function() {
// 根据定位点 移动地图
// this.moveto(this.locationObj.location.longitude, this.locationObj.location.latitude)
this.moveto(this.locationObj.location.longitude, this.locationObj.location.latitude)
// 使用转换后的坐标
this.moveto(convertedCoords.lng, convertedCoords.lat)
this.autoOpen(feature)
})
@ -573,10 +710,17 @@ export default {
// 循环添加feature
for (let i = 0; i < this.locationArray.length; i++) {
const mod = this.locationArray[i]
// 坐标转换：高德地图坐标转天地图坐标
const convertedCoords = this.convertGCJ02ToCGCS2000(
mod.location.longitude,
mod.location.latitude
)
// 创建feature，一个feature就是一个点坐标信息
const feature = new Feature({
type: 'boat',
geometry: new Point([mod.location.longitude, mod.location.latitude])
geometry: new Point([convertedCoords.lng, convertedCoords.lat])
})
// 设置 展示信息
feature.set('obj', mod)
@ -626,13 +770,17 @@ export default {
// 循环添加feature
for (let i = 0; i < this.questionArr.length; i++) {
// 坐标转换：高德地图坐标转天地图坐标
const convertedCoords = this.convertGCJ02ToCGCS2000(
this.questionArr[i]['questionArrs']['lng'],
this.questionArr[i]['questionArrs']['lat']
)
// 创建feature，一个feature就是一个点坐标信息
console.log(this.questionArr[i])
const feature = new Feature({
type: 'question',
geometry: new Point([this.questionArr[i]['questionArrs']['lng'], this.questionArr[i]['questionArrs'][
'lat'
]])
geometry: new Point([convertedCoords.lng, convertedCoords.lat])
})
// 设置展示
feature.set('questionObj', this.questionArr[i])
@ -810,7 +958,12 @@ export default {
// this.animating = true
this.animating = false
for (var m of this.pointsArr) {
this.routeCoords.push([parseFloat(m.longitude), parseFloat(m.latitude)])
// 坐标转换：高德地图坐标转天地图坐标
const convertedCoords = this.convertGCJ02ToCGCS2000(
parseFloat(m.longitude),
parseFloat(m.latitude)
)
this.routeCoords.push([convertedCoords.lng, convertedCoords.lat])
}
this.center = this.routeCoords[0]
this.map.getView().animate({

Write Preview
Loading…
Cancel
Save