重点车辆 轨迹联动时间轴

src/api/globalMap/spatialAnalysis.ts

@@ -403,3 +403,42 @@ export const getVideoDisasterPrevention = (id: string) => {
     }
   });
 };
+
+// 交通视频
+export const getVideoTraffic = (id: string) => {
+  return request({
+    url: '/api/gateway/v2/get_video_transportation_list',
+    method: 'post',
+    data: {
+      query: {
+        id: id
+      }
+    }
+  });
+};
+
+// 交通局视频
+export const getPointInfoTransportationVideo = (id: string) => {
+  return request({
+    url: '/api/videoResource/videoinfo/get_point_info_transportation_video',
+    method: 'post',
+    data: {
+      query: {
+        id: id
+      }
+    }
+  });
+};
+
+// 重点车辆
+export const getVehicleInfo = (id: string) => {
+  return request({
+    url: '/api/gateway/v2/get_vehicle_info',
+    method: 'post',
+    data: {
+      query: {
+        vehicle_no: id
+      }
+    }
+  });
+};

src/components/Map/YztMap/index.vue

@@ -293,8 +293,9 @@ const filterTd = (obj, dataType) => {
   let data = [];
   let tempData = {};
   let i = 0;
-  for (let key in obj) {
-    let keyLabel = pointDetailTemplate[dataType][key];
+  const pointDetailTemplateObj = pointDetailTemplate[dataType];
+  Object.keys(pointDetailTemplateObj).forEach((key) => {
+    let keyLabel = pointDetailTemplateObj[key];
     if (!!keyLabel) {
       if (i === 2) {
         i = 0;
@@ -321,7 +322,7 @@ const filterTd = (obj, dataType) => {
         }
       }
     }
-  }
+  });
   if (!!tempData && JSON.stringify(tempData) !== '{}') {
     data.push(tempData);
   }

src/components/Map/data.ts

@@ -27,7 +27,7 @@ import {
   getWaterList,
   getVideoDrowning,
   getVideoForestFire,
-  getVideoDisasterPrevention
+  getVideoDisasterPrevention, getVehicleInfo
 } from '@/api/globalMap/spatialAnalysis';
 import { getPointInfoTransportationVideo, getRescueTeamsInfo } from '@/api/globalMap/rescueTeam';
 
@@ -66,7 +66,8 @@ export const methodList = {
   '33': getVideoForestFire,
   '34': getVideoDisasterPrevention,
   '41': getRescueTeamsInfo,
-  '42': getPointInfoTransportationVideo
+  '42': getPointInfoTransportationVideo,
+  '43': getVehicleInfo
 };
 export const titleList = {
   '1': '专家信息',
@@ -104,5 +105,6 @@ export const titleList = {
   '33': '森林防火',
   '34': '防灾救援',
   '41': '救援队伍',
-  '42': '交通局视频'
+  '42': '交通局视频',
+  '43': '重点车辆'
 };

src/components/Map/index.vue

@@ -255,8 +255,9 @@ const filterTd = (obj, dataType) => {
   let data = [];
   let tempData = {};
   let i = 0;
-  for (let key in obj) {
-    let keyLabel = pointDetailTemplate[dataType][key];
+  const pointDetailTemplateObj = pointDetailTemplate[dataType];
+  Object.keys(pointDetailTemplateObj).forEach((key) => {
+    let keyLabel = pointDetailTemplateObj[key];
     if (!!keyLabel) {
       if (i === 2) {
         i = 0;
@@ -283,7 +284,7 @@ const filterTd = (obj, dataType) => {
         }
       }
     }
-  }
+  });
   if (!!tempData && JSON.stringify(tempData) !== '{}') {
     data.push(tempData);
   }

src/components/TimeAxis/index.vue

@@ -40,29 +40,28 @@
         </div>
       </div>
     </div>
-    <Dialog v-model="timeAxisState.showDialog" type="sm" title="气象图" hide-footer @close="dialogClose">
-      <img v-show="timeAxisState.activeIndex > -1" :src="timeAxisState.data[timeAxisState.activeIndex]?.img" style="width: 100%; height: 250px" />
-    </Dialog>
   </div>
 </template>
 
 <script lang="ts" setup name="TimeAxis">
 import { parseTime } from '@/utils/ruoyi';
-import Dialog from '@/components/Dialog/index.vue';
-import img1 from './tempImg/img1.jfif';
-import img2 from './tempImg/img2.jfif';
-import img3 from './tempImg/img3.jfif';
-import img4 from './tempImg/img4.jfif';
-import img5 from './tempImg/img5.jfif';
-import img6 from './tempImg/img6.jfif';
-import img7 from './tempImg/img7.jfif';
-import img8 from './tempImg/img8.jfif';
-import img9 from './tempImg/img9.jfif';
-import img10 from './tempImg/img10.jfif';
+import carImg from '@/assets/images/car.png';
 
+const props = defineProps({
+  activeMap: String
+});
 const containerScale = inject('containerScale');
+const getMapUtils = inject('getMapUtils');
+
+const AMapType = ['vectorgraph', 'satellite'];
+let mapUtils, map, AMap;
+// 轨迹数据
+let moveMarker, movePassedPolyline, movePolyline;
+let isNewMarkerPause = false;
+let trackPathArr = [];
 const timeAxisState = reactive({
   expand: false,
+  type: '',
   format: 'YYYY-MM-DD HH:mm',
   startTime: '',
   endTime: '',
@@ -71,50 +70,9 @@ const timeAxisState = reactive({
   show: false,
   showDialog: false,
   speed: 1,
-  data: [
-    {
-      time: '00:15',
-      img: img1
-    },
-    {
-      time: '01:15',
-      img: img2
-    },
-    {
-      time: '01:45',
-      img: img3
-    },
-    {
-      time: '02:15',
-      img: img4
-    },
-    {
-      time: '03:15',
-      img: img5
-    },
-    {
-      time: '04:15',
-      img: img6
-    },
-    {
-      time: '05:15',
-      img: img7
-    },
-    {
-      time: '06:15',
-      img: img8
-    },
-    {
-      time: '07:15',
-      img: img9
-    },
-    {
-      time: '07:45',
-      img: img10
-    }
-  ]
+  data: []
 });
-let timer;
+let originalData = [];
 
 // 展开收起
 const changeExpand = () => {
@@ -133,46 +91,23 @@ const getInitTime = () => {
 
 // 返回上一个时间点
 const toPrevTime = () => {
-  timeAxisState.showDialog = true;
-  timeAxisState.playing = false;
-  if (timeAxisState.activeIndex === 0) {
-    timeAxisState.playing = false;
-  } else {
-    timeAxisState.activeIndex -= 1;
+  if (timeAxisState.type === 'track') {
+    prevPauseTime();
   }
 };
 
 // 播放
 const toPlayTime = () => {
-  timeAxisState.playing = true;
-  if (timeAxisState.activeIndex === timeAxisState.data.length - 1) {
-    timeAxisState.activeIndex = -1;
-  }
-  loopPlay();
-};
-
-// 循环播放
-const loopPlay = () => {
-  if (timeAxisState.playing === false) return;
-  toNextTime();
-  //  && timeAxisState.activeIndex < timeAxisState.data.length - 1
-  if (timeAxisState.playing) {
-    setTimeout(loopPlay, 1000 / timeAxisState.speed);
+  timeAxisState.playing = !timeAxisState.playing;
+  if (timeAxisState.type === 'track') {
+    playOrPauseTrack();
   }
 };
 
 // 前往下一个时间点
 const toNextTime = (flag?: boolean) => {
-  timeAxisState.showDialog = true;
-  if (flag) {
-    timeAxisState.playing = false;
-  } else if (!timeAxisState.playing) {
-    return;
-  }
-  if (timeAxisState.activeIndex === timeAxisState.data?.length - 1) {
-    timeAxisState.playing = false;
-  } else {
-    timeAxisState.activeIndex += 1;
+  if (timeAxisState.type === 'track') {
+    nextPauseTime();
   }
 };
 
@@ -184,11 +119,6 @@ const changeSpeed = () => {
 // 拖拽移动位置
 const dragMove = () => {};
 
-// 弹窗关闭后
-const dialogClose = () => {
-  timeAxisState.playing = false;
-};
-
 // 拖拽的参数
 const dragState = reactive({
   bottom: 40,
@@ -241,9 +171,179 @@ const stopDrag2 = () => {
   document.removeEventListener('mouseup', stopDrag2);
 };
 
+// 外部数据传入，开始播放
+const initDataToPlay = (obj) => {
+  timeAxisState.type = obj.type;
+  originalData = obj.data;
+  timeAxisState.data = obj.data;
+  trackPathArr = [];
+  timeAxisState.data.forEach((item) => {
+    trackPathArr.push(item.lnglat);
+  });
+  // 路线轨迹
+  if (timeAxisState.type === 'track') {
+    mapUtils = getMapUtils();
+    map = mapUtils?.getMap();
+    AMap = mapUtils?.getAMap();
+    if (AMapType.includes(props.activeMap)) {
+      if (moveMarker) {
+        // 不停止remove还是有
+        moveMarker.stopMove();
+        moveMarker.remove();
+      }
+      movePolyline?.remove();
+      movePassedPolyline?.remove();
+      // 绘制轨迹
+      movePolyline = new AMap.Polyline({
+        map: map,
+        path: trackPathArr,
+        showDir: true,
+        strokeColor: '#28F', //线颜色
+        // strokeOpacity: 1,     //线透明度
+        strokeWeight: 6 //线宽
+        // strokeStyle: "solid"  //线样式
+      });
+
+      movePassedPolyline = new AMap.Polyline({
+        map: map,
+        strokeColor: '#AF5', //线颜色
+        strokeWeight: 6 //线宽
+      });
+      startPlay();
+    }
+  }
+};
+// 创建新标点 moveTo调用第二次不生效，重新生成marker
+const createMarker = () => {
+  if (moveMarker) {
+    // 不停止remove还是有
+    moveMarker.stopMove();
+    moveMarker.remove();
+  }
+
+  const icon = new AMap.Icon({
+    size: new AMap.Size(13, 26),
+    image: carImg
+  });
+  moveMarker = new AMap.Marker({
+    map: map,
+    position: trackPathArr[timeAxisState.activeIndex],
+    icon: icon,
+    anchor: 'center'
+  });
+  moveMarker.on('moving', (e) => {
+    // 更新已通过路径
+    const position = e.target.getPosition();
+    const position2 = trackPathArr.slice(0, timeAxisState.activeIndex);
+    position2.push(position);
+    movePassedPolyline.setPath(position2);
+    map.setCenter(position, true);
+  });
+  // 监听移动结束事件，继续播放
+  moveMarker.on('moveend', () => {
+    if (timeAxisState.playing) {
+      createMarker();
+      playNextNode();
+    }
+  });
+};
+
+// 轨迹 开始/暂停
+const playOrPauseTrack = () => {
+  if (AMapType.includes(props.activeMap)) {
+    if (timeAxisState.playing) {
+      if (timeAxisState.activeIndex >= timeAxisState.data.length - 1) {
+        // 重新播放
+        timeAxisState.activeIndex = 0;
+        timeAxisState.playing = true;
+        createMarker();
+        movePassedPolyline.setPath([]);
+        nextTick(() => {
+          playNextNode();
+        });
+      } else if (isNewMarkerPause) {
+        playNextNode();
+      } else {
+        moveMarker.resumeMove();
+      }
+    } else {
+      moveMarker.pauseMove();
+    }
+    isNewMarkerPause = false;
+  }
+};
+// 轨迹开始播放
+const startPlay = () => {
+  timeAxisState.activeIndex = 0;
+  createMarker();
+  timeAxisState.playing = true;
+  playNextNode();
+};
+// 轨迹 上一步
+const prevPauseTime = () => {
+  if (timeAxisState.activeIndex <= 0) return;
+  // 更新索引
+  timeAxisState.playing = false;
+  timeAxisState.activeIndex -= 1;
+  moveMarker.stopMove();
+  createMarker();
+  movePassedPolyline.setPath(trackPathArr.slice(0, timeAxisState.activeIndex + 1));
+  isNewMarkerPause = true;
+};
+const nextPauseTime = () => {
+  if (timeAxisState.activeIndex <= 0) return;
+  // 更新索引
+  timeAxisState.playing = false;
+  timeAxisState.activeIndex += 1;
+  createMarker();
+  movePassedPolyline.setPath(trackPathArr.slice(0, timeAxisState.activeIndex + 1));
+  isNewMarkerPause = true;
+};
+// 轨迹播放下一个节点
+const playNextNode = () => {
+  if (timeAxisState.activeIndex >= timeAxisState.data.length - 1) {
+    timeAxisState.playing = false;
+    return;
+  }
+  // 更新索引
+  timeAxisState.activeIndex += 1;
+
+  // 移动到目标节点
+  moveMarker.moveTo(trackPathArr[timeAxisState.activeIndex], {
+    duration: timeAxisState.speed === 1 ? 2000 : 1000
+  });
+};
+//传入两个经纬度点得到车辆角度 设置车辆Marker角度
+const getAngle = (startPoint, endPoint) => {
+  if (!(startPoint && endPoint)) {
+    return 0;
+  }
+
+  let dRotateAngle = Math.atan2(
+    Math.abs(startPoint.lng - endPoint.lng),
+    Math.abs(startPoint.lat - endPoint.lat)
+  );
+  if (endPoint.lng >= startPoint.lng) {
+    if (endPoint.lat >= startPoint.lat) {
+    } else {
+      dRotateAngle = Math.PI - dRotateAngle;
+    }
+  } else {
+    if (endPoint.lat >= startPoint.lat) {
+      dRotateAngle = 2 * Math.PI - dRotateAngle;
+    } else {
+      dRotateAngle = Math.PI + dRotateAngle;
+    }
+  }
+  dRotateAngle = (dRotateAngle * 180) / Math.PI;
+  return dRotateAngle;
+};
+
 onMounted(() => {
   getInitTime();
 });
+
+defineExpose({ initDataToPlay });
 </script>
 
 <style lang="scss" scoped>

src/directive/common/drag.ts

@@ -1,6 +1,6 @@
 export default {
   mounted(el, binding) {
-    const { draggable, position = 'absolute', scaleX = 1, scaleY = 1 } = binding.value;
+    const { draggable, position = 'absolute', scaleX = 1, scaleY = 1, dom } = binding.value;
     if (!draggable) {
       // 如果拖拽功能被禁用，则不执行任何拖拽相关的逻辑
       return;
@@ -9,7 +9,7 @@ export default {
     el.style.position = position;
     el.style.cursor = 'move';
 
-    const dragDom = el;
+    const dragDom = !!dom ? dom : el;
 
     let disX = 0; // 鼠标按下时，鼠标与拖拽元素的左边距
     let disY = 0; // 鼠标按下时，鼠标与拖拽元素的上边距

src/hooks/AMap/useAMap.ts

@@ -398,7 +398,7 @@ export function useAMap(options) {
     }
   };
   let moveMarker, movePolyline, movePassedPolyline, timerId;
-  const trackPlayback = (lineArr) => {
+  const trackPlayback = (lineArr, speed = 1000) => {
     if (!lineArr || lineArr.length === 0) {
       return;
     }
@@ -408,7 +408,6 @@ export function useAMap(options) {
     movePolyline?.remove();
     movePassedPolyline?.remove();
     moveMarker?.remove();
-    let index = 0;
     const icon = new AMap.Icon({
       size: new AMap.Size(13, 26),
       image: carImg
@@ -453,11 +452,11 @@ export function useAMap(options) {
     // });
     moveMarker.moveAlong(lineArr, {
       // 每一段的时长
-      duration: 1000, //可根据实际采集时间间隔设置
+      duration: speed, //可根据实际采集时间间隔设置
       // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
       autoRotation: true
     });
-    return [movePolyline, movePassedPolyline, moveMarker];
+    return { movePolyline, movePassedPolyline, moveMarker };
   };
 
   const drawData = (data) => {

src/types/components.d.ts

@@ -28,8 +28,6 @@ declare module 'vue' {
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCheckboxButton: typeof import('element-plus/es')['ElCheckboxButton']
-    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
@@ -46,34 +44,23 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElStep: typeof import('element-plus/es')['ElStep']
-    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
-    ElTable: typeof import('element-plus/es')['ElTable']
-    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
-    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
-    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     ExcelEditor: typeof import('./../components/ExcelEditor/index.vue')['default']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
@@ -85,7 +72,6 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
-    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

src/utils/olMap/olMap.ts

@@ -30,7 +30,7 @@ import { getPointsCenter, mergeGeoJsonPolygons } from '@/utils/gisUtils';
 import { Cluster } from 'ol/source';
 import CircleStyle from 'ol/style/Circle';
 import Overlay from 'ol/Overlay';
-import { Draw, Select } from 'ol/interaction';
+import { DoubleClickZoom, DragPan, Draw, Select } from 'ol/interaction';
 import { click } from 'ol/events/condition';
 import Circle from 'ol/geom/Circle';
 import { deepClone, getRgba, hexToRgba, initDrag, rgbToRgba } from '@/utils';
@@ -93,6 +93,7 @@ export class olMap {
   private traceFeature;
   // 自定义绘制结束调用方法
   private drawEndMethod;
+  private selectedFeature;
 
   constructor(options) {
     this.options = options;
@@ -136,6 +137,7 @@ export class olMap {
     // 创建选择交互
     this.select = new Select({
       condition: click,
+      style: null,
       filter: (feature, layer) => {
         // 只有vectorLayer图层可选择
         return layer === this.vectorLayer;
@@ -150,20 +152,16 @@ export class olMap {
         const originalFeature = features[0];
         const size = features.length;
         if (size === 1) {
-          // 设置新的样式（更换图标）
-          selectedFeatures.setStyle(
-            new Style({
-              image: new Icon({
-                anchor: [0.5, 0.5],
-                scale: 0.146,
-                anchorXUnits: 'fraction',
-                anchorYUnits: 'pixels',
-                src: originalFeature.get('imageHover')
-              })
-            })
-          );
-          const extData = originalFeature.get('extData');
-          options.onMarkerClick(extData);
+          if (this.selectedFeature !== originalFeature) {
+            if (this.selectedFeature) {
+              this.selectedFeature.set('icon', this.selectedFeature.get('image'));
+            }
+            this.selectedFeature = originalFeature;
+            const icon = originalFeature.get('imageHover');
+            const extData = originalFeature.get('extData');
+            originalFeature.set('icon', icon);
+            options.onMarkerClick(extData);
+          }
         } else {
           // 聚合要素
           this.select.getFeatures().clear();
@@ -321,7 +319,8 @@ export class olMap {
       measureArea: 'Polygon',
       straightLine: 'LineString',
       marker: 'Point',
-      text: 'Point'
+      text: 'Point',
+      anyLine: 'AnyLine'
     };
     const data = getRgba(newOptions.color);
     let geometryFunction = null;
@@ -358,52 +357,56 @@ export class olMap {
           this.drawOptions.size = newOptions.size;
         }
         this.closeDraw();
-        // 创建绘制交互
-        let style = new Style({
-          stroke: new Stroke({
-            color: rgbToRgba(this.drawOptions.strokeColor, this.drawOptions.strokeOpacity),
-            width: this.drawOptions.strokeWeight
-          }),
-          fill: new Fill({
-            color: rgbToRgba(this.drawOptions.fillColor, this.drawOptions.fillOpacity)
-          })
-        });
-        this.drawTool = new Draw({
-          source: this.drawVector.getSource(),
-          type: typeList[newOptions.graphicsType],
-          geometryFunction: geometryFunction,
-          style: style
-        });
-        // 添加绘制交互到地图
-        this.map.addInteraction(this.drawTool);
-        // 监听绘制结束事件
-        this.drawTool.on('drawend', (event) => {
-          const feature = event.feature;
-          // 获取几何对象
-          if (newOptions.graphicsType !== 'marker') {
-            if (newOptions.graphicsType === 'measureArea') {
-              const geometry = feature.getGeometry();
-              const coordinates = geometry.getCoordinates();
-              const pathArr = coordinates[0];
-              const area = turf.area(turf.polygon([pathArr]));
-              style = new Style({
-                stroke: style.getStroke(),
-                fill: style.getFill(),
-                text: new Text({
-                  text: '区域面积' + area.toFixed(2) + '平方米',
-                  font: '14px Calibri,sans-serif',
-                  fill: new Fill({ color: '#000' }),
-                  stroke: new Stroke({
-                    color: '#fff',
-                    width: 3
-                  }),
-                  overflow: true
-                })
-              });
+        if (newOptions.graphicsType === 'anyLine') {
+          this.drawAnyLine();
+        } else {
+          // 创建绘制交互
+          let style = new Style({
+            stroke: new Stroke({
+              color: rgbToRgba(this.drawOptions.strokeColor, this.drawOptions.strokeOpacity),
+              width: this.drawOptions.strokeWeight
+            }),
+            fill: new Fill({
+              color: rgbToRgba(this.drawOptions.fillColor, this.drawOptions.fillOpacity)
+            })
+          });
+          this.drawTool = new Draw({
+            source: this.drawVector.getSource(),
+            type: typeList[newOptions.graphicsType],
+            geometryFunction: geometryFunction,
+            style: style
+          });
+          // 添加绘制交互到地图
+          this.map.addInteraction(this.drawTool);
+          // 监听绘制结束事件
+          this.drawTool.on('drawend', (event) => {
+            const feature = event.feature;
+            // 获取几何对象
+            if (newOptions.graphicsType !== 'marker') {
+              if (newOptions.graphicsType === 'measureArea') {
+                const geometry = feature.getGeometry();
+                const coordinates = geometry.getCoordinates();
+                const pathArr = coordinates[0];
+                const area = turf.area(turf.polygon([pathArr]));
+                style = new Style({
+                  stroke: style.getStroke(),
+                  fill: style.getFill(),
+                  text: new Text({
+                    text: '区域面积' + area.toFixed(2) + '平方米',
+                    font: '14px Calibri,sans-serif',
+                    fill: new Fill({ color: '#000' }),
+                    stroke: new Stroke({
+                      color: '#fff',
+                      width: 3
+                    }),
+                    overflow: true
+                  })
+                });
+              }
+              feature.setStyle(style);
             }
-            feature.setStyle(style);
-          }
-        });
+          });
+        }
       }
     }
     return this.drawOptions;
@@ -483,6 +486,74 @@ export class olMap {
     data.id = id;
     return { text, data };
   }
+  drawAnyLine() {
+    document.addEventListener('touchend', this.handleTouchEnd);
+    this.map.on('pointerdown', this.handleTouchStart);
+    this.map.on('pointermove', this.handleTouchMove.bind(null, this.options));
+    document.addEventListener('mouseup', this.handleTouchEnd.bind(null, this.options));
+  }
+  handleTouchStart(e) {
+    this.drawing = true;
+    const interactions = this.map.getInteractions();
+    interactions.forEach((interaction) => {
+      if (interaction instanceof DragPan || interaction instanceof DoubleClickZoom) {
+        interaction.setActive(false); // 修改为需要的值，true或false
+      }
+    });
+
+    this.path = [e.lnglat];
+    // if (this.anyLine) {
+    //   map.remove(anyLine);
+    // }
+  }
+  handleTouchMove(options, e) {
+    if (!this.drawing) return;
+    this.path.push(e.lnglat);
+    // if (anyLine) {
+    //   map.remove(anyLine);
+    // }
+    this.anyLine = new Feature({
+      geometry: new LineString(this.path) // path为坐标数组，如[[x1,y1], [x2,y2]]
+    });
+    const lineStyle = new Style({
+      stroke: new Stroke({
+        color: hexToRgba(options.strokeColor, options.strokeOpacity), // 合并颜色与透明度
+        width: options.strokeWeight,
+        lineJoin: 'round' // 线段连接处圆角
+      })
+    });
+    this.anyLine.setStyle(lineStyle);
+    //   new AMap.Polyline({
+    //   path: path,
+    //   strokeColor: options.strokeColor,
+    //   strokeOpacity: options.strokeOpacity,
+    //   strokeWeight: options.strokeWeight,
+    //   strokeStyle: options.strokeStyle,
+    //   lineJoin: 'round'
+    // });
+    this.drawVector.getSource().addFeature(this.anyLine);
+  }
+  handleTouchEnd(options) {
+    // drawing = false;
+    // map.setStatus({
+    //   showIndoorMap: true,
+    //   dragEnable: true,
+    //   keyboardEnable: true,
+    //   doubleClickZoom: true,
+    //   zoomEnable: true,
+    //   rotateEnable: true
+    // });
+    // map.off('touchstart', handleTouchStart);
+    // map.on('touchmove', handleTouchMove.bind(null, options));
+    // document.addEventListener('touchend', handleTouchEnd.bind(null, options));
+    // map.off('mousedown', handleTouchStart);
+    // map.off('mousemove', handleTouchMove);
+    // document.removeEventListener('mouseup', handleTouchEnd);
+    // if (!!drawEndMethod) {
+    //   drawEndMethod(options, anyLine);
+    // }
+    // anyLine = null;
+  }
   // 关闭绘制
   closeDraw() {
     if (!this.drawTool) return;

src/views/globalMap/RightMenu/KeyVehicles.vue

@@ -27,8 +27,8 @@
           <div class="td">{{ parseTime(item.gpsDate) }}</div>
           <div class="td" style="width: 120px; flex: unset">
             <div class="text" @click="handleConnect(index, item)">连线</div>
-            <div class="text" size="small" @click="handleCollaborate(index, item)">协同</div>
-            <div class="text" size="small" @click="handleTrack(item)">轨迹</div>
+            <div class="text" @click="handleCollaborate(index, item)">协同</div>
+            <div class="text" @click="handleTrack(item)">轨迹</div>
           </div>
         </div>
       </div>
@@ -39,9 +39,10 @@
 <script setup lang="ts">
 import { Search } from '@element-plus/icons-vue';
 import { getVehicleList, getVehicleTrajectory } from '@/api/globalMap/KeyVehicles';
+import { parseTime } from '@/utils/ruoyi';
 
 const AMapType = ['vectorgraph', 'satellite'];
-const trackPlayback = inject('trackPlayback');
+const initDataToPlay = inject('initDataToPlay');
 const props = defineProps({
   activeMap: String
 });
@@ -77,32 +78,24 @@ const handleCancel = () => {
 const handleConnect = () => {};
 const handleCollaborate = () => {};
 // 轨迹
-let obj = [];
+
 const handleTrack = (item) => {
   getVehicleTrajectory(item.vehicle_no).then((res) => {
     const trajectory = [];
     res.rows.forEach((item) => {
-      trajectory.push([item.lng, item.lat]);
+      trajectory.push({
+        time: !!item.gpsDate ? parseTime(item.gpsDate, '{h}:{i}') : '',
+        lnglat: [item.lng, item.lat]
+      });
     });
-    obj = trackPlayback(trajectory);
+    initDataToPlay({ type: 'track', data: trajectory });
+    // handleShowDialog(trajectory);
   });
 };
 //调用函数
 onMounted(() => {
   initData();
 });
-onUnmounted(() => {
-  if (AMapType.includes(props.activeMap)) {
-    obj.forEach((item) => {
-      item.remove();
-    });
-  } else {
-    const source = obj[0].getSource();
-    if (source) {
-      source.clear();
-    }
-  }
-});
 </script>
 
 <style lang="scss" scoped>

src/views/globalMap/RightMenu/OnlinePlotting/index.vue

@@ -613,7 +613,9 @@ const initDrawMethod = (options) => {
       // 发送
       sendWebSocket(data);
     };
-    mouseTool.on('drawend', onDraw);
+    if (!!mouseTool) {
+      mouseTool.on('drawend', onDraw);
+    }
   }
 };
 const handleEndDraw = (options, obj) => {

src/views/globalMap/data/mapData.ts

@@ -4316,9 +4316,14 @@ export const iconList = {
     size: [55, 60]
   },
   '42': {
-    image: getImageUrl('31_lakes_video.png'),
-    imageHover: getImageUrl('31_lakes_video_hover.png'),
+    image: getImageUrl('42_transportation_video.png'),
+    imageHover: getImageUrl('42_transportation_video_hover.png'),
     size: [40, 40]
+  },
+  '43': {
+    image: getImageUrl('43_vehicle.png'),
+    imageHover: getImageUrl('43_vehicle_hover.png'),
+    size: [40, 44]
   }
 };
 

src/views/globalMap/index.vue

@@ -5,9 +5,9 @@
       <YztMap
         v-else-if="['satellite2', 'satellite3', 'imageMap', 'imageMap2'].includes(activeMap)"
         ref="map2Ref"
+        v-model:showMask="showMask"
         :active-map="activeMap"
         :point-type="pointType"
-        v-model:showMask="showMask"
         @handle-show-video="handleShowVideo"
         @handle-show-warehouse="handleShowWarehouse"
         @handle-show-people="handleShowPeople"
@@ -15,12 +15,12 @@
       <Map
         v-else
         ref="mapRef"
+        v-model:showMask="showMask"
         :active-map="activeMap"
         :point-type="pointType"
-        v-model:showMask="showMask"
         @handle-show-video="handleShowVideo"
         @handle-show-warehouse="handleShowWarehouse"
-        @handleShowPeople="handleShowPeople"
+        @handle-show-people="handleShowPeople"
       />
       <!--左侧菜单-->
       <LeftMenu
@@ -34,13 +34,13 @@
       <!--更换地图类型-->
       <SwitchMapTool :active-map="activeMap" class="tool-box" @switch-map="switchMap" />
       <!--时间轴-->
-      <TimeAxis />
+      <TimeAxis ref="timeAxisRef" :active-map="activeMap" />
       <DrawTools v-if="showDrawTools" :active-map="activeMap" @handle-analysis-data="handleAnalysisData" />
       <NearbyVideos v-if="showNearbyVideos" v-model="showNearbyVideos" :location="location" />
       <GridPointRainfall v-if="showRainfall" v-model="showRainfall" :location="location" />
       <MaterialDetail v-if="showWarehouse" v-model="showWarehouse" :warehouse-data="warehouseData" />
       <CommunicationSupport v-if="communicationSupport.show" @close="handleHideCommunicationSupport" />
-      <EmergencyCrew v-if="showPeople" v-model="showPeople" :id="teamId" />
+      <EmergencyCrew v-if="showPeople" :id="teamId" v-model="showPeople" />
     </div>
   </div>
 </template>
@@ -71,6 +71,7 @@ let map;
 let mapRef = ref(null);
 let map2Ref = ref(null);
 let leftMenuRef = ref(null);
+let timeAxisRef = ref(null);
 let showMask = ref(true);
 //  vectorgraph satellite imageMap 废弃：logical satellite2 satellite3
 let activeMap = ref('satellite');
@@ -89,6 +90,7 @@ const switchMap = (key) => {
 };
 let pointType = ref<PointType[]>([]);
 let markerList = ref([]);
+let addMarkersTimer;
 const addMarkers = (item) => {
   const dom = YMapType.includes(activeMap.value) ? map2Ref.value : mapRef.value;
   if (dom) {
@@ -106,34 +108,55 @@ const addMarkers = (item) => {
       item.checked2 = true;
       pointType.value.push(item);
     }
-    let path = [];
+    const path = [];
     pointType.value.forEach((item) => {
       path.push(item.component);
     });
-    getPointInfo(path.toString()).then((res) => {
-      const data = res.data && res.data.list ? res.data?.list : [];
-      markerList.value = data;
-      data.forEach((item2) => {
-        // 获取图标
-        if (iconList[item2.dataType]) {
-          item2.icon = iconList[item2.dataType].image;
-          item2.image = iconList[item2.dataType].image;
-          item2.imageHover = iconList[item2.dataType].imageHover;
-          item2.size = iconList[item2.dataType].size;
-        } else {
-          item2.icon = iconList['common'].image;
-          item2.image = iconList['common'].image;
-          item2.imageHover = iconList['common'].imageHover;
-          item2.size = iconList['common'].size;
-        }
-        if (item2.materia_name) {
-          item2.name = item2.materia_name;
-        }
-        item2.parentId = item.component;
-        item2.lnglat = [item2.longitude, item2.latitude];
-      });
-      dom.addMarker(data);
+    if (!path.includes('43') && addMarkersTimer) {
+      clearInterval(addMarkersTimer);
+      addMarkersTimer = null;
+    }
+    addMarkersMethod();
+  }
+};
+const addMarkersMethod = () => {
+  const dom = ['satellite2', 'satellite3', 'imageMap', 'imageMap2'].includes(activeMap.value) ? map2Ref.value : mapRef.value;
+  const path = [];
+  pointType.value.forEach((item) => {
+    path.push(item.component);
+  });
+  getPointInfo(path.toString()).then((res) => {
+    const data = res.data && res.data.list ? res.data?.list : [];
+    markerList.value = data;
+    data.forEach((item2) => {
+      // 获取图标
+      if (iconList[item2.dataType]) {
+        item2.icon = iconList[item2.dataType].image;
+        item2.image = iconList[item2.dataType].image;
+        item2.imageHover = iconList[item2.dataType].imageHover;
+        item2.size = iconList[item2.dataType].size;
+      } else {
+        item2.icon = iconList['common'].image;
+        item2.image = iconList['common'].image;
+        item2.imageHover = iconList['common'].imageHover;
+        item2.size = iconList['common'].size;
+      }
+      if (item2.materia_name) {
+        item2.name = item2.materia_name;
+      }
+      if (item2.dataType === 43) {
+        item2.showName = true;
+      }
+      item2.lnglat = [item2.longitude, item2.latitude];
     });
+    dom?.addMarker(data);
+  });
+  if (addMarkersTimer) {
+    clearInterval(addMarkersTimer);
+    addMarkersTimer = null;
+  }
+  if (path.includes('43')) {
+    addMarkersTimer = setInterval(addMarkersMethod, 10 * 1000);
   }
 };
 // 跳转指定地点
@@ -170,7 +193,8 @@ const clickMenu = (item, dataList) => {
         '森林防火',
         '防灾救援',
         '救援队伍',
-        '交通局视频'
+        '交通局视频',
+        '重点车辆'
       ].includes(item.name)
     ) {
       rightMenuRef.value.updateMenu(checked, item);
@@ -366,6 +390,14 @@ const handleShowPeople = (data) => {
   teamId.value = data.id;
   showPeople.value = true;
 };
+
+// 传递数据给时间轴
+const initDataToPlay = (data) => {
+  if (!!tempMenu.value) {
+    timeAxisRef.value.initDataToPlay(data);
+  }
+};
+
 // onMounted(() => {
 //   mapRef.value.addEventListener('resize', handleResize);
 // })
@@ -382,6 +414,7 @@ provide('showDetail', showDetail);
 provide('getDrawTool', getDrawTool);
 provide('getMarkers', getMarkers);
 provide('getPlaceSearch', getPlaceSearch);
+provide('initDataToPlay', initDataToPlay);
 </script>
 
 <style lang="scss" scoped>