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

地图定位

Browse Source
master
lion 1 year 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

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

@ -57,10 +57,10 @@
<tr>
<td>型号名称</td>
<td>{{ locationObj?locationObj.model:'' }}</td>
</tr>
<tr>
<td>车牌/船号</td>
<td>{{ locationObj?locationObj.plate:'' }}</td>
</tr>
<tr>
<td>车牌/船号</td>
<td>{{ locationObj?locationObj.plate:'' }}</td>
</tr>
<tr>
<td>购买时间</td>
@ -69,11 +69,11 @@
<tr>
<td>GPS</td>
<td>{{ locationObj?locationObj.gps:'' }}</td>
</tr>
<tr>
<td>电量</td>
<td>{{ locationInfo?(locationInfo.lithium?locationInfo.lithium:'-'):'-' }}</td>
</tr>
</tr>
<tr>
<td>电量</td>
<td>{{ locationInfo?(locationInfo.lithium?locationInfo.lithium:'-'):'-' }}</td>
</tr>
<tr>
<td>设备描述</td>
@ -82,7 +82,7 @@
</table>
<div class="playback">
<li
@click="showPlayBack(locationInfo.equipment_number,locationObj.name,locationObj.branch,locationObj.model,locationObj.plate)"
@click="showPlayBack(locationInfo.equipment_number,locationObj.name,locationObj.branch,locationObj.model,locationObj.plate)"
>
<img :src="play_back" />轨迹
</li>
@ -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
}
</style>
</style>

Write Preview
Loading…
Cancel
Save