iot设备行程问题修复

src/views/warehouseManage/machinery/coding-nw/component/MapDIalog.vue

@@ -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) {
+            // console.log('list', list)
-                    pointArr.push(new BMapGL.Point(e.startLng, e.startLat))
+
-                    pointArr.push(new BMapGL.Point(e.endLng, e.endLat))
+            // if(true) return
-                } else {
+            // list.forEach((e, index) => {
-                    pointArr.push(new BMapGL.Point(e.startLng, e.startLat))
+            //     if (index === list.length - 1) {
-                }
+            //         pointArr.push(new BMapGL.Point(e.startLng, e.startLat))
-            })
+            //         pointArr.push(new BMapGL.Point(e.endLng, e.endLat))
-            const convertor = new BMapGL.Convertor()
+            //     } else {
-            convertor.translate(
+            //         pointArr.push(new BMapGL.Point(e.startLng, e.startLat))
-                pointArr,
+            //     }
-                COORDINATES_WGS84,
+            // })
-                COORDINATES_BD09,
+
-                function (data) {
+            for (let i = 0; i < this.tripInfoListNew.length; i++) {
-                    let polyline = new BMapGL.Polyline(data.points)
+                if (i === this.tripInfoListNew.length - 1) {
-                    // 修改线的样式
+                    var points_1 = new BMapGL.Point(
-                    polyline.setStrokeColor('#EA3323') // 线颜色  #EA3323
+                        this.tripInfoListNew[i].startLng,
-                    // polyline.setStrokeWeight(2) // 线宽
+                        this.tripInfoListNew[i].startLat,
-                    this_.trackAni = new BMapGLLib.TrackAnimation(
-                        this_.map,
-                        polyline,
-                        {
-                            overallView: true, // 动画完成后自动调整视野到总览
-                            tilt: 55, // 轨迹播放的角度，默认为55
-                            duration: 1500, // 动画持续时长，默认为10000，单位ms
-                            delay: 100, // 动画开始的延迟，默认0，单位ms
-                        },
                     )
-                    this_.trackAni.start()
+                    pointArr.push(points_1)
-                    this_.drawMaker(data.points)
+                    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)
+                if (index === 0) {
-                this.map.addOverlay(marker)
+                    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 {