From d04f23454b2a331152739fc98d171cdd764714b4 Mon Sep 17 00:00:00 2001 From: binbin_pan Date: Wed, 3 Jul 2024 20:05:33 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9A=E4=BD=8D=E9=A1=B5=E9=9D=A2=E5=BC=80?= =?UTF-8?q?=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../machinery/coding/component/MapDIalog.vue | 112 ++++++------------ 1 file changed, 33 insertions(+), 79 deletions(-) diff --git a/sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue b/sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue index a5ab523e..0bf51ece 100644 --- a/sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue +++ b/sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue @@ -45,14 +45,7 @@ export default { equipmentNumber: 'H906L', // 设备编号 engineering: '大禹治水', // 工程 map: null, - centerPoint: [113.271431, 23.135336], // 中心点 - animiationLineList: [], // 动画线 - lineStyle: { - // 线样式 - color: '#0e83ed', - width: 2, - opacity: 0.6, - }, + // 轨迹点 linePointList: [ { lng: 116.297611, @@ -82,24 +75,7 @@ export default { lng: 116.307223, lat: 40.056379, }, - ], // 线点 - // map: { - // center: { lng: 113.763924, lat: 22.938634 }, - // zoom: 18, - // show: true, - // dragging: true, - // }, - // lineList: [ - // { lng: 113.763924, lat: 22.938634 }, - // { lng: 113.759621, lat: 22.933625 }, - // { lng: 113.76654, lat: 22.934174 }, - // { lng: 113.766558, lat: 22.932916 }, - // { lng: 113.766558, lat: 22.932916 }, - // { lng: 113.768745, lat: 22.93173 }, - // { lng: 113.76945, lat: 22.930731 }, - // { lng: 113.772022, lat: 22.93014 }, - // { lng: 108.952789, lat: 34.348938 }, - // ], + ], } }, mounted() {}, @@ -122,78 +98,56 @@ export default { // 初始化地图和轨迹 initMap() { this.$nextTick(() => { - // // 创建地图实例 - // this.map = new BMapGL.Map('map') - // // 创建点坐标 - // this.map.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 18) - // // 启用滚轮放大缩小 - // this.map.enableScrollWheelZoom(true) - // // setTimeout - // setTimeout(() => { - // // const startIcon = { - // // imgUrl: new URL('/src/assets/images/startIcon', import.meta.url).href, - // // position: [this.linePointList[0].lng, this.linePointList[0].lat], - // // size: [50, 50], - // // } - // // const endIcon = { - // // imgUrl: new URL('/src/assets/images/endIcon', import.meta.url).href, - // // position: [this.linePointList[this.linePointList.length - 1].lng, this.linePointList[linePointList.length - 1].lat], - // // size: [50, 50], - // // } - // this.initIcon(startIcon.imgUrl, startIcon.position, startIcon.size) - // this.initIcon(endIcon.imgUrl, endIcon.position, endIcon.size) - // }, 100) this.map = new BMapGL.Map('container') // 创建地图实例 - let point = new BMapGL.Point(116.297611, 40.047363) // 创建点坐标 + let point = new BMapGL.Point(117.14, 31.87) // 创建点坐标 console.log('🚀 ~ this.$nextTick ~ point:', point) this.map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别 this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小 - // 设置起点终点图标 - setTimeout(async () => { - const startIcon = { - imgUrl: await import('/src/assets/images/startIcon.png'), - position: [linePointList[0].lng, linePointList[0].lat], - size: [50, 50], - } - const endIcon = { - imgUrl: await import('/src/assets/images/endIcon.png'), - position: [linePointList[linePointList.length - 1].lng, linePointList[linePointList.length - 1].lat], - size: [50, 50], - } - initIcon(startIcon.imgUrl, startIcon.position, startIcon.size) - initIcon(endIcon.imgUrl, endIcon.position, endIcon.size) - // initPolyline() - // initPolylineAnimation() - // setViewPortFn() - }, 200) // 添加轨迹 let pointList = [] for (var i = 0; i < this.linePointList.length; i++) { pointList.push(new BMapGL.Point(this.linePointList[i].lng, this.linePointList[i].lat)) } - let pl = new BMapGL.Polyline(pointList) + let polyline = new BMapGL.Polyline(pointList) + // 修改线的样式 + polyline.setStrokeColor('#EA3323') // 线颜色 #EA3323 + // polyline.setStrokeWeight(2) // 线宽 - let trackAni = new BMapGLLib.TrackAnimation(this.map, pl, { + let trackAni = new BMapGLLib.TrackAnimation(this.map, polyline, { overallView: true, // 动画完成后自动调整视野到总览 tilt: 30, // 轨迹播放的角度，默认为55 duration: 10000, // 动画持续时长，默认为10000，单位ms - delay: 3000, // 动画开始的延迟，默认0，单位ms + delay: 2000, // 动画开始的延迟，默认0，单位ms }) + // 设置起点终点图标 + this.simulateMovement() trackAni.start() }) }, - initIcon(imgUrl, position, size) { - // var myIcon = new BMapGL.Icon("https://api.map.baidu.com/img/markers.png", new BMapGL.Size(50, 50)); - var myIcon = new BMapGL.Icon(imgUrl, new BMapGL.Size(size)) - // 创建Marker标注，使用小车图标 - var pt = new BMapGL.Point(...position) - var marker = new BMapGL.Marker(pt, { - icon: myIcon, - }) - // 将标注添加到地图 - this.map.addOverlay(marker) + // 添加起点和终点的标记 + addStartEndMarkers(startLatLng, endLatLng) { + let startIcon = new BMapGL.Icon(require('/src/assets/images/startIcon.png'), new BMapGL.Size(32, 32)) + let startMarker = new BMapGL.Marker(startLatLng, { icon: startIcon }) + this.map.addOverlay(startMarker) + + let endIcon = new BMapGL.Icon(require('/src/assets/images/endIcon.png'), new BMapGL.Size(32, 32)) + let endMarker = new BMapGL.Marker(endLatLng, { icon: endIcon }) + this.map.addOverlay(endMarker) + }, + + // 模拟轨迹运动结束后的回调 + simulateMovement() { + // 模拟轨迹运动结束后获取起点和终点的经纬度坐标 + let startLatLng = new BMapGL.Point(this.linePointList[0].lng, this.linePointList[0].lat) + let endLatLng = new BMapGL.Point( + this.linePointList[this.linePointList.length - 1].lng, + this.linePointList[this.linePointList.length - 1].lat + ) + + // 添加起点和终点的图标 + this.addStartEndMarkers(startLatLng, endLatLng) }, }, }