iot设备行程问题修复
This commit is contained in:
BianLzhaoMin
parent
e047877da7
commit
33fac484a6
|
|
@ -32,6 +32,12 @@
|
|||
@click="handleClickQuery()"
|
||||
>查询</el-button
|
||||
>
|
||||
<!-- <el-button
|
||||
type="primary"
|
||||
style="padding: 8px 16px; margin-left: 5px"
|
||||
@click="handleClickQuery_new()"
|
||||
>测试</el-button
|
||||
> -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
|
@ -228,6 +234,7 @@ export default {
|
|||
loadingData: true,
|
||||
|
||||
tripInfoListNew: [], // 新行程信息
|
||||
polylineNew: [],
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
|
|
@ -276,9 +283,14 @@ export default {
|
|||
handleClickQuery() {
|
||||
this.handleQuery().then(() => {
|
||||
if (this.tripInfoListNew.length < 1) return
|
||||
this.onDrawLine(this.tripInfoListNew)
|
||||
// this.onDrawLine(this.tripInfoListNew)
|
||||
|
||||
this.onDrawLine()
|
||||
})
|
||||
},
|
||||
// handleClickQuery_new() {
|
||||
|
||||
// },
|
||||
/** 查询按钮 */
|
||||
async handleQuery() {
|
||||
if (!this.queryForm.date) {
|
||||
|
|
@ -447,7 +459,10 @@ export default {
|
|||
COORDINATES_WGS84,
|
||||
COORDINATES_BD09,
|
||||
function (data) {
|
||||
console.log('pointArr', pointArr)
|
||||
let polyline = new BMapGL.Polyline(data.points)
|
||||
|
||||
console.log('polyline---', polyline)
|
||||
// 修改线的样式
|
||||
polyline.setStrokeColor('#EA3323') // 线颜色 #EA3323
|
||||
// polyline.setStrokeWeight(2) // 线宽
|
||||
|
|
@ -468,45 +483,177 @@ export default {
|
|||
)
|
||||
},
|
||||
|
||||
onDrawLine(list) {
|
||||
async onDrawLine() {
|
||||
const this_ = this
|
||||
if (this.trackAni) {
|
||||
this.trackAni.cancel()
|
||||
}
|
||||
this.map.clearOverlays()
|
||||
this.polylineNew = []
|
||||
let pointArr = []
|
||||
list.forEach((e, index) => {
|
||||
if (index === list.length - 1) {
|
||||
pointArr.push(new BMapGL.Point(e.startLng, e.startLat))
|
||||
pointArr.push(new BMapGL.Point(e.endLng, e.endLat))
|
||||
} else {
|
||||
pointArr.push(new BMapGL.Point(e.startLng, e.startLat))
|
||||
}
|
||||
})
|
||||
const convertor = new BMapGL.Convertor()
|
||||
convertor.translate(
|
||||
pointArr,
|
||||
COORDINATES_WGS84,
|
||||
COORDINATES_BD09,
|
||||
function (data) {
|
||||
let polyline = new BMapGL.Polyline(data.points)
|
||||
// 修改线的样式
|
||||
polyline.setStrokeColor('#EA3323') // 线颜色 #EA3323
|
||||
// polyline.setStrokeWeight(2) // 线宽
|
||||
this_.trackAni = new BMapGLLib.TrackAnimation(
|
||||
this_.map,
|
||||
polyline,
|
||||
{
|
||||
overallView: true, // 动画完成后自动调整视野到总览
|
||||
tilt: 55, // 轨迹播放的角度，默认为55
|
||||
duration: 1500, // 动画持续时长，默认为10000，单位ms
|
||||
delay: 100, // 动画开始的延迟，默认0，单位ms
|
||||
},
|
||||
|
||||
// console.log('list', list)
|
||||
|
||||
// if(true) return
|
||||
// list.forEach((e, index) => {
|
||||
// if (index === list.length - 1) {
|
||||
// pointArr.push(new BMapGL.Point(e.startLng, e.startLat))
|
||||
// pointArr.push(new BMapGL.Point(e.endLng, e.endLat))
|
||||
// } else {
|
||||
// pointArr.push(new BMapGL.Point(e.startLng, e.startLat))
|
||||
// }
|
||||
// })
|
||||
|
||||
for (let i = 0; i < this.tripInfoListNew.length; i++) {
|
||||
if (i === this.tripInfoListNew.length - 1) {
|
||||
var points_1 = new BMapGL.Point(
|
||||
this.tripInfoListNew[i].startLng,
|
||||
this.tripInfoListNew[i].startLat,
|
||||
)
|
||||
this_.trackAni.start()
|
||||
this_.drawMaker(data.points)
|
||||
},
|
||||
)
|
||||
pointArr.push(points_1)
|
||||
var points_2 = new BMapGL.Point(
|
||||
this.tripInfoListNew[i].endLng,
|
||||
this.tripInfoListNew[i].endLat,
|
||||
)
|
||||
pointArr.push(points_2)
|
||||
} else {
|
||||
var points = new BMapGL.Point(
|
||||
this.tripInfoListNew[i].startLng,
|
||||
this.tripInfoListNew[i].startLat,
|
||||
)
|
||||
pointArr.push(points)
|
||||
}
|
||||
}
|
||||
|
||||
let translatePoint = []
|
||||
for (let i = 0; i < pointArr.length; i += 10) {
|
||||
translatePoint.push(pointArr.slice(i, i + 10))
|
||||
}
|
||||
|
||||
console.log('translatePoint----', translatePoint)
|
||||
const convertor = new BMapGL.Convertor()
|
||||
const translateFun = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const promises = []
|
||||
for (let i = 0; i < translatePoint.length; i++) {
|
||||
const promise = new Promise(
|
||||
(innerResolve, innerReject) => {
|
||||
convertor.translate(
|
||||
translatePoint[i],
|
||||
1, // WGS84
|
||||
5, // BD09
|
||||
function (data) {
|
||||
if (data.status !== 0) {
|
||||
innerReject(
|
||||
new Error(
|
||||
`转换失败，状态码: ${data.status}`,
|
||||
),
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
// 将转换后的坐标添加到 polylineNew
|
||||
this_.polylineNew = [
|
||||
...this_.polylineNew,
|
||||
...data.points,
|
||||
]
|
||||
|
||||
// 调用 innerResolve 将结果传回
|
||||
innerResolve(data.points)
|
||||
},
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
promises.push(promise)
|
||||
}
|
||||
|
||||
// 等待所有转换完成
|
||||
Promise.all(promises)
|
||||
.then(() => resolve(this_.polylineNew)) // 返回所有转换后的坐标
|
||||
.catch((err) => reject(err)) // 处理错误
|
||||
})
|
||||
}
|
||||
|
||||
// 使用转换函数
|
||||
translateFun()
|
||||
.then((convertedPoints) => {
|
||||
console.log('转换后的坐标:', convertedPoints)
|
||||
// console.log('this_.polylineNew:', this_.polylineNew)
|
||||
// 在这里可以继续处理转换后的坐标
|
||||
// const polyline = new BMapGL.Polyline(convertedPoints)
|
||||
|
||||
var polyline = new BMapGL.Polyline(convertedPoints, {
|
||||
strokeColor: '#EA3323',
|
||||
strokeWeight: 3,
|
||||
strokeOpacity: 0.8,
|
||||
}) //绘制轨迹
|
||||
this_.map.addOverlay(polyline)
|
||||
// this_.trackAni = new BMapGLLib.TrackAnimation(
|
||||
// this_.map,
|
||||
// polyline,
|
||||
// {
|
||||
// overallView: true, // 动画完成后自动调整视野到总览
|
||||
// tilt: 55, // 轨迹播放的角度，默认为55
|
||||
// duration: 5000, // 动画持续时长，默认为10000，单位ms
|
||||
// delay: 100, // 动画开始的延迟，默认0，单位ms
|
||||
// strokeWeight: 2,
|
||||
// strokeOpacity: 0.5,
|
||||
// },
|
||||
// )
|
||||
// this_.trackAni.start()
|
||||
this_.drawMaker(this_.polylineNew)
|
||||
this_.map.setViewport(this_.polylineNew)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('转换过程中发生错误:', err)
|
||||
})
|
||||
|
||||
// const translateFun = new Promise((resolve, reject) => {
|
||||
// for (var i = 0; i < translatePoint.length; i++) {
|
||||
// convertor.translate(
|
||||
// translatePoint[i],
|
||||
// 1,
|
||||
// 5,
|
||||
// function (data) {
|
||||
// // const polyline = new BMapGL.Polyline(data.points)
|
||||
|
||||
// this_.polylineNew = [
|
||||
// ...this_.polylineNew,
|
||||
// ...data.points,
|
||||
// ]
|
||||
// // console.log('polyline---', polyline)
|
||||
|
||||
// // 修改线的样式
|
||||
// // polyline.setStrokeColor('#EA3323') // 线颜色 #EA3323
|
||||
// // // polyline.setStrokeWeight(2) // 线宽
|
||||
// // this_.trackAni = null
|
||||
// // this_.trackAni = new BMapGLLib.TrackAnimation(
|
||||
// // this_.map,
|
||||
// // polyline,
|
||||
// // {
|
||||
// // overallView: true, // 动画完成后自动调整视野到总览
|
||||
// // tilt: 55, // 轨迹播放的角度，默认为55
|
||||
// // duration: 5000, // 动画持续时长，默认为10000，单位ms
|
||||
// // delay: 100, // 动画开始的延迟，默认0，单位ms
|
||||
// // strokeWeight: 2,
|
||||
// // strokeOpacity: 0.5,
|
||||
// // },
|
||||
// // )
|
||||
// // this_.trackAni.start()
|
||||
// // this_.drawMaker(data.points)
|
||||
// },
|
||||
// )
|
||||
|
||||
// // console.log('this.polylineNew---', this.polylineNew)
|
||||
// }
|
||||
|
||||
// resolve()
|
||||
// })
|
||||
|
||||
// translateFun().then(() => {
|
||||
// console.log('this_.polylineNew', this_.polylineNew)
|
||||
// })
|
||||
},
|
||||
// async handleQuery() {
|
||||
// console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.date)
|
||||
|
|
@ -610,9 +757,60 @@ export default {
|
|||
},
|
||||
|
||||
drawMaker(list) {
|
||||
// this.map.clearOverlays()
|
||||
list.forEach((e, index) => {
|
||||
let marker = new BMapGL.Marker(e)
|
||||
this.map.addOverlay(marker)
|
||||
if (index === 0) {
|
||||
let startIcon = new BMapGL.Icon(
|
||||
require('/src/assets/images/startIcon.png'),
|
||||
new BMapGL.Size(32, 32),
|
||||
)
|
||||
|
||||
let startMarker = new BMapGL.Marker(e, {
|
||||
icon: startIcon,
|
||||
})
|
||||
|
||||
this.map.addOverlay(startMarker)
|
||||
} else if (index === list.length - 1) {
|
||||
let endIcon = new BMapGL.Icon(
|
||||
require('/src/assets/images/endIcon.png'),
|
||||
new BMapGL.Size(32, 32),
|
||||
)
|
||||
|
||||
let endMarker = new BMapGL.Marker(e, {
|
||||
icon: endIcon,
|
||||
})
|
||||
this.map.addOverlay(endMarker)
|
||||
} else {
|
||||
let icon = new BMapGL.Icon(
|
||||
require('/src/assets/images/startIcon.png'),
|
||||
new BMapGL.Size(0, 0),
|
||||
)
|
||||
|
||||
// 创建标记并设置自定义图标
|
||||
|
||||
console.log('索引---', index)
|
||||
const marker = new BMapGL.Marker(e, { icon: icon })
|
||||
const label = new BMapGL.Label(index + 1, {
|
||||
position: e, // 标记的位置
|
||||
offset: new BMapGL.Size(0, -40), // 偏移量
|
||||
})
|
||||
|
||||
// 设置标签样式
|
||||
label.setStyle({
|
||||
color: '#498c01',
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid #a6e228',
|
||||
borderRadius: '40px',
|
||||
fontSize: '18px',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
textAlign: 'center',
|
||||
lineHeight: '40px',
|
||||
fontWeight: 'bold',
|
||||
})
|
||||
this.map.addOverlay(marker)
|
||||
this.map.addOverlay(label)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 轨迹运动结束后的回调
|
||||
|
|
@ -709,6 +907,7 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #e7f3ff;
|
||||
color: #498c01;
|
||||
}
|
||||
|
||||
.right-info {
|
||||
|
|
|
|||
Loading…
Reference in New Issue