定位页面开发

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));
+    addStartEndMarkers(startLatLng, endLatLng) {
-      var myIcon = new BMapGL.Icon(imgUrl, new BMapGL.Size(size))
+      let startIcon = new BMapGL.Icon(require('/src/assets/images/startIcon.png'), new BMapGL.Size(32, 32))
-      // 创建Marker标注，使用小车图标
+      let startMarker = new BMapGL.Marker(startLatLng, { icon: startIcon })
-      var pt = new BMapGL.Point(...position)
+      this.map.addOverlay(startMarker)
-      var marker = new BMapGL.Marker(pt, {
+
-        icon: myIcon,
+      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)
-      this.map.addOverlay(marker)
+    },
+
+    // 模拟轨迹运动结束后的回调
+    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)
     },
   },
 }