From 33fac484a66e087623278526cd30eb4c1f65a90d Mon Sep 17 00:00:00 2001 From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com> Date: Mon, 4 Nov 2024 15:31:58 +0800 Subject: [PATCH] =?UTF-8?q?iot=E8=AE=BE=E5=A4=87=E8=A1=8C=E7=A8=8B?= =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../coding-nw/component/MapDIalog.vue | 269 +++++++++++++++--- 1 file changed, 234 insertions(+), 35 deletions(-) diff --git a/src/views/warehouseManage/machinery/coding-nw/component/MapDIalog.vue b/src/views/warehouseManage/machinery/coding-nw/component/MapDIalog.vue index 9c2db73..252c3c9 100644 --- a/src/views/warehouseManage/machinery/coding-nw/component/MapDIalog.vue +++ b/src/views/warehouseManage/machinery/coding-nw/component/MapDIalog.vue @@ -32,6 +32,12 @@ @click="handleClickQuery()" >查询 + @@ -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 {