![]()
轨迹
@@ -273,7 +273,7 @@ export default {
shopquestionPopup: false,
questionObj: {},
questionId: ''
- }
+ }
},
watch: {
locationObj(val) {
@@ -302,7 +302,7 @@ export default {
})
}
},
- showWhichBoat(val) {
+ showWhichBoat(val) {
if (val.indexOf('baojie') > -1) {
this.flagLayerIndex.setVisible(true)
} else {
@@ -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() {
@@ -366,8 +497,8 @@ export default {
this.map = map
// 添加天地图
let url = 'http://t1.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}'
- url = `${url}&T=vec_c&tk=75488413aef20f190e5c7708347c3e56`
- // let sourceMark = `http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=5a257cd2df1b3311723bd77b0de14baf`
+ url = `${url}&T=vec_c&tk=75488413aef20f190e5c7708347c3e56`
+ // let sourceMark = `http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=5a257cd2df1b3311723bd77b0de14baf`
const sourceMark = 'http://t3.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=75488413aef20f190e5c7708347c3e56'
const tdtLayer = new TileLayer({
title: '天地图',
@@ -375,32 +506,32 @@ export default {
type: 'overlay',
visible: true,
layerType: 'TD地图',
- opacity: 1,
+ opacity: 1,
preload: Infinity,
source: new XYZ({
crossOrigin: 'anonymous',
url: url,
projection: 'EPSG:4326'
})
- })
-
+ })
+
// console.log("tdtLayer1",tdtLayer1)
- this.map.addLayer(tdtLayer)
- const tdtLayer1 = new TileLayer({
- title: '天地图1',
- id: 'M23',
- type: 'overlay',
- visible: true,
- layerType: 'TD地图1',
- opacity: 1,
- zIndex: 2,
- preload: Infinity,
- source: new XYZ({
- crossOrigin: 'anonymous',
- url: sourceMark,
- projection: 'EPSG:4326'
- })
- })
+ this.map.addLayer(tdtLayer)
+ const tdtLayer1 = new TileLayer({
+ title: '天地图1',
+ id: 'M23',
+ type: 'overlay',
+ visible: true,
+ layerType: 'TD地图1',
+ opacity: 1,
+ zIndex: 2,
+ preload: Infinity,
+ source: new XYZ({
+ crossOrigin: 'anonymous',
+ url: sourceMark,
+ projection: 'EPSG:4326'
+ })
+ })
this.map.addLayer(tdtLayer1)
this.ShowLayers()
this.addOverlay()
@@ -441,7 +572,7 @@ export default {
tileGrid: tileGrid,
url: result.url,
projection: projection
- }),
+ }),
preload: Infinity,
})
this.map.addLayer(layer)
@@ -452,7 +583,7 @@ export default {
type: result.type,
visible: result.visible,
layerType: result.layerType,
- opacity: result.opacity,
+ opacity: result.opacity,
preload: Infinity,
source: new TileArcGISRest({
url: result.url,
@@ -461,7 +592,7 @@ export default {
})
this.map.addLayer(layer)
}
- }
+ }
},
// 切换地图
changeMap(val) {
@@ -491,7 +622,7 @@ export default {
this.checkLayers(m.id, false)
}
}
- }
+ }
},
// 切换地图
@@ -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)
@@ -529,14 +666,14 @@ export default {
anchor: [0.48, 0.52]
})
})
- )
+ )
console.log('locationInfo', this.locationObj)
this.featuresArr.push(feature)
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({
+ 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)
@@ -602,20 +746,20 @@ export default {
autoArrIndex2.push(feature)
} else {
featuresArrIndex.push(feature)
- }
+ }
} // for 结束
this.flagLayerIndex.getSource().addFeatures(featuresArrIndex)
this.autoLayerIndex.getSource().addFeatures(autoArrIndex)
this.autoLayerIndex2.getSource().addFeatures(autoArrIndex2)
},
// 设置 问题巡查 点位
- setQuestionMarker() {
- if (this.questionArr.length == 0) {
- this.$message({
- message: '暂无相关问题巡查信息',
- type: 'warning'
- })
- return
+ setQuestionMarker() {
+ if (this.questionArr.length == 0) {
+ this.$message({
+ message: '暂无相关问题巡查信息',
+ type: 'warning'
+ })
+ return
}
// 设置图层
this.questionflagLayer = new VectorLayer({
@@ -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({
+ 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])
@@ -675,21 +823,21 @@ export default {
const feature = this.map.forEachFeatureAtPixel(
e.pixel,
(feature) => feature
- )
- if (!feature) {
- return
- }
+ )
+ if (!feature) {
+ return
+ }
console.log(feature)
- this.shopPopup = true
- this.shopquestionPopup = false
- // 设置弹窗位置
- const coordinates = feature.getGeometry().getCoordinates()
- this.infoObj = feature.get('obj')
- this.locationObj = feature.get('obj')
- this.locationInfo = feature.get('locationInfo')
- // this.camera = this.infoObj.camera
- // this.cameraNo = this.camera ? this.camera.idno : ""
- // this.cameraStatus = this.camera ? this.camera.state : ""
+ this.shopPopup = true
+ this.shopquestionPopup = false
+ // 设置弹窗位置
+ const coordinates = feature.getGeometry().getCoordinates()
+ this.infoObj = feature.get('obj')
+ this.locationObj = feature.get('obj')
+ this.locationInfo = feature.get('locationInfo')
+ // this.camera = this.infoObj.camera
+ // this.cameraNo = this.camera ? this.camera.idno : ""
+ // this.cameraStatus = this.camera ? this.camera.state : ""
this.popup.setPosition(coordinates)
})
},
@@ -725,7 +873,7 @@ export default {
this.popup.setPosition(coordinates)
},
// 移动地图
- moveto(longitude, latitude) {
+ moveto(longitude, latitude) {
console.log(longitude, latitude)
this.map.getView().animate({
center: [longitude, latitude], // 中心点
@@ -734,7 +882,7 @@ export default {
})
},
// 实时定位 跳转轨迹回放
- showPlayBack(gps, name, branch, model, plate) {
+ showPlayBack(gps, name, branch, model, plate) {
console.log('plat', plate)
this.$router.push({
path: '/car/playback',
@@ -742,7 +890,7 @@ export default {
boatEquipment: gps,
boatName: name,
boatBranch: branch,
- modelName: model,
+ modelName: model,
boatPlate: plate
// type: type
}
@@ -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({
@@ -1020,7 +1173,7 @@ export default {
.info {
font-size: 14px;
- text-align: left;
+ text-align: left;
padding: 20px;
}
@@ -1101,4 +1254,4 @@ export default {
z-index: 1000;
padding: 13px
}
-
+