轨迹优化

src/components/Map/YztMap/index.vue

@@ -31,7 +31,7 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { point_type } = toRefs<any>(proxy?.useDict('point_type'));
 const appStore = useAppStore();
 const mapStore = useMapStore();
-const emits = defineEmits(['handleShowWarehouse', 'handleShowVideo', 'handleShowPeople', 'resize']);
+const emits = defineEmits(['handleShowWarehouse', 'handleShowVideo', 'handleShowPeople', 'closeDetailDialog', 'resize']);
 
 const mapRef = ref(null);
 const containerRef = ref();
@@ -118,7 +118,12 @@ const init = () => {
       // let drawTool = new DrawTool({ mapUtils, map });
       handleResize();
     },
-    onMarkerClick: (data) => {
+    onMarkerClick: (data, flag) => {
+      let title = titleList[data.dataType];
+      if (flag && !!title) {
+        data.title = title;
+        emits('closeDetailDialog', data);
+      }
       // 多点位
       if (data.type === '1') {
         getPointInfoList2({
@@ -162,7 +167,10 @@ const init = () => {
           content.appendChild(tableBox);
           let closeBtn = document.createElement('div');
           closeBtn.className = 'close';
-          closeBtn.onclick = () => mapUtils.hideInfo(true);
+          closeBtn.onclick = () => {
+            mapUtils.hideInfo(true);
+            emits('closeDetailDialog', data);
+          };
           content.appendChild(closeBtn);
           mapUtils.showInfo(content, [data.longitude, data.latitude], -data.scale * data.size[1], true);
         });
@@ -255,7 +263,10 @@ const handlePointDetails = (data) => {
       div.appendChild(table);
       let closeBtn = document.createElement('div');
       closeBtn.className = 'close';
-      closeBtn.onclick = () => mapUtils.hideInfo(true);
+      closeBtn.onclick = () => {
+        mapUtils.hideInfo(true);
+        emits('closeDetailDialog', data);
+      };
       div.appendChild(closeBtn);
       mapUtils.showInfo(div, [data.longitude, data.latitude], -data.scale * data.size[1], true);
     } else if (data.dataType === 'video') {

src/components/Map/index.vue

@@ -32,7 +32,7 @@ const { point_type } = toRefs<any>(proxy?.useDict('point_type'));
 const appStore = useAppStore();
 const mapStore = useMapStore();
 
-const emits = defineEmits(['handleShowVideo', 'handleShowWarehouse', 'handleShowPeople', 'handleShowVideoDetail', 'resize']);
+const emits = defineEmits(['handleShowVideo', 'handleShowWarehouse', 'handleShowPeople', 'handleShowVideoDetail', 'closeDetailDialog', 'resize']);
 const containerRef = ref();
 const width = ref('100%');
 const height = ref('100%');
@@ -70,7 +70,12 @@ const mapUtils = useAMap({
     drawTool.initMouseTool({ map, AMap });
     handleResize();
   },
-  onMarkerClick: (data) => {
+  onMarkerClick: (data, flag) => {
+    let title = titleList[data.dataType];
+    if (flag && !!title) {
+      data.title = title;
+      emits('closeDetailDialog', data);
+    }
     // 多点位
     if (data.type === '1') {
       getPointInfoList2({
@@ -117,7 +122,10 @@ const mapUtils = useAMap({
         content.appendChild(tableBox);
         let closeBtn = document.createElement('div');
         closeBtn.className = 'close';
-        closeBtn.onclick = hideInfo;
+        closeBtn.onclick = () => {
+          hideInfo(true);
+          emits('closeDetailDialog', data);
+        };
         content.appendChild(closeBtn);
         showInfo(content, [data.longitude, data.latitude], -data.size[1], true);
       });
@@ -212,7 +220,10 @@ const handlePointDetails = (data) => {
       div.appendChild(table);
       let closeBtn = document.createElement('div');
       closeBtn.className = 'close';
-      closeBtn.onclick = hideInfo;
+      closeBtn.onclick = () => {
+        hideInfo(true);
+        emits('closeDetailDialog', data);
+      };
       div.appendChild(closeBtn);
       showInfo(div, [data.longitude, data.latitude], -data.size[1], true);
     } else if (data.dataType === 'video') {

src/components/TimeAxis/index.vue

@@ -68,6 +68,7 @@ let isNewMarkerPause = false;
 let trackPathArr = [];
 const timelineItems = ref([]);
 const timeAxisState = reactive({
+  id: '',
   expand: false,
   type: '',
   format: 'YYYY-MM-DD HH:mm',
@@ -136,12 +137,15 @@ const changeSpeed = () => {
 };
 
 let activeName = ref('');
+let isDetail = ref(false);
 // 外部数据传入，开始播放
-const initDataToPlay = (obj) => {
+const initDataToPlay = (obj, flag) => {
   activeName.value = obj.name;
+  timeAxisState.id = obj.id;
   timeAxisState.type = obj.type;
   originalData = obj.data;
   timeAxisState.data = obj.data;
+  isDetail.value = !!flag;
   trackPathArr = [];
   timeAxisState.data.forEach((item) => {
     trackPathArr.push(item.lnglat);
@@ -537,13 +541,27 @@ const clearObj = () => {
     }
   }
 };
-const clearData = (name) => {
-  if (activeName.value !== name) return;
+const clearData = (name, flag) => {
+  if ((!flag && activeName.value !== name) || (flag && flag != isDetail.value)) return;
   activeName.value = '';
+  isDetail.value = false;
+  timeAxisState.id = '';
   timeAxisState.playing = false;
   timeAxisState.data = [];
   clearObj();
 };
+// 切换地图，清空
+watch(
+  () => mapStore.isAMap,
+  () => {
+    activeName.value = '';
+    isDetail.value = false;
+    timeAxisState.id = '';
+    timeAxisState.playing = false;
+    timeAxisState.data = [];
+    clearObj();
+  }
+);
 onMounted(() => {
   getInitTime();
 });

src/hooks/AMap/useAMap.ts

@@ -143,7 +143,7 @@ export function useAMap(options) {
     }
     addMarker([item], true);
     clickMarker = item;
-    options.onMarkerClick(item);
+    options.onMarkerClick(item, true);
   };
   // 添加多个点
   const addMarker = (points, notClean?: boolean) => {
@@ -324,7 +324,7 @@ export function useAMap(options) {
             }
           }
           clickMarker = e.target;
-          options.onMarkerClick(extData);
+          options.onMarkerClick(extData, true);
         });
         plotLayers['points2'].addOverlay(marker);
         addPoints.push(data);
@@ -411,11 +411,11 @@ export function useAMap(options) {
     infoWindow.on('mouseout', () => map.setStatus({ zoomEnable: true }));
   };
 
-  const hideInfo = (e?: any) => {
+  const hideInfo = (flag?: any) => {
     map.setStatus({ zoomEnable: true });
     if (!!infoWindow) {
       infoWindow.close();
-      if (!!clickMarker && e) {
+      if (!!clickMarker && flag) {
         const extData = clickMarker.getExtData ? clickMarker.getExtData() : clickMarker;
         for (let i = 0; i < addPoints.length; i++) {
           if (addPoints[i].id === extData.id) {

src/utils/olMap/olMap.ts

@@ -188,7 +188,7 @@ export class olMap {
                 })
               })
             );
-            options.onMarkerClick(extData);
+            options.onMarkerClick(extData, true);
           }
         } else if (extData.type === '3') {
           // 聚合要素
@@ -781,7 +781,7 @@ export class olMap {
     }
     this.addMarker2({ 'search': item });
     this.clickMarker = item;
-    this.options.onMarkerClick(item);
+    this.options.onMarkerClick(item, true);
   }
   addMarker(points) {
     this.clearMarker();

src/views/globalMap/index.vue

@@ -9,6 +9,7 @@
         @handle-show-warehouse="handleShowWarehouse"
         @handle-show-people="handleShowPeople"
         @handle-show-track="handleShowTrack"
+        @close-detail-dialog="handleCloseDetailDialog"
         @resize="mapMoveEnd"
       />
       <YztMap
@@ -19,6 +20,7 @@
         @handle-show-warehouse="handleShowWarehouse"
         @handle-show-people="handleShowPeople"
         @handle-show-track="handleShowTrack"
+        @close-detail-dialog="handleCloseDetailDialog"
         @resize="mapMoveEnd"
       />
       <!--左侧菜单-->
@@ -210,7 +212,7 @@ const addMarkersMethod = debounce(
       }
       mapUtils.addMarker2(data);
     });
-    if (!mapStore.pointParams.option.includes('43') && addMarkersTimer) {
+    if (addMarkersTimer) {
       clearInterval(addMarkersTimer);
       addMarkersTimer = null;
     }
@@ -279,6 +281,10 @@ const clickMenu = (item, dataList) => {
   if (['手机工作台', '重点车辆', '移动指挥车', '机动无人机', '卫星电话'].includes(item.name) && !item.checked) {
     timeAxisRef.value.clearData(item.name);
   }
+  if (item.component == '43' && !item.checked && !mapStore.pointParams.option.includes('43') && addMarkersTimer) {
+    clearInterval(addMarkersTimer);
+    addMarkersTimer = null;
+  }
 };
 const handleHideCommunicationSupport = () => {
   communicationSupport.show = false;
@@ -467,16 +473,20 @@ const handleShowTrack = (data) => {
           lnglat: [item.lng, item.lat]
         });
       });
-      initDataToPlay({ type: 'track', data: trajectory });
+      initDataToPlay({ id: data.id, type: 'track', data: trajectory, name: data.title }, true);
     }
   });
 };
 // 传递数据给时间轴
-const initDataToPlay = (data) => {
+const initDataToPlay = (data, isDetail?: boolean) => {
   if (!!timeAxisRef.value) {
-    timeAxisRef.value.initDataToPlay(data);
+    timeAxisRef.value.initDataToPlay(data, isDetail);
   }
 };
+// 点位详情弹窗关闭后
+const handleCloseDetailDialog = (data) => {
+  timeAxisRef.value.clearData(data.title, true);
+};
 const mapMoveEnd = () => {
   if (!mapStore.pointParams.dict_value && !mapStore.pointParams.option) return;
   addMarkersMethod();
@@ -538,7 +548,7 @@ watch(
       rightMenuRef.value.updateMenu('1', mapStore.updateMenu);
       mapStore.setUpdateMenu({});
     }
-    addMarkersMethod();
+    addMarkersMethod(true);
   },
   {
     deep: true