fix: update marker position

src/components/MarkerMap/constants.ts

@@ -31,17 +31,21 @@ export const WARNING_INCIDENT = [
   {
     name: '宿迁学院',
     location: '118.296459,33.929648',
+    id: '1',
   },
   {
     location: '118.504329,33.903868',
+    id: '2',
     name: '宿迁市大兴派出所',
   },
   {
     location: '118.291631,33.884288',
+    id: '3',
     name: '明珠派出所',
   },
   {
     location: '118.790799,33.705629',
+    id: '4',
     name: '来安派出所',
   },
 ];
@@ -49,31 +53,38 @@ export const WARNING_INCIDENT = [
 export const PENDING_INCIDENT = [
   {
     location: '118.288721,33.951047',
+    id: '1',
     name: '宿迁宝龙城市广场',
   },
   {
     location: '118.285469,33.950549',
+    id: '2',
     name: '用世水韵城',
   },
   {
     location: '118.290689,33.952558',
+    id: '3',
     name: '金鹰天地广场(宿迁店)',
   },
   {
     location: '118.300139,33.955468',
+    id: '4',
     name: '苏宁广场',
   },
   {
     location: '118.300149,33.953758',
     name: '宿迁人民商场',
+    id: '5',
   },
   {
     location: '118.262051,33.956094',
     name: '鑫鑫奶站',
+    id: '6',
   },
   {
     location: '118.27269,33.97476',
     name: '恒茂商业广场',
+    id: '7',
   },
 ];
 export const EMERGENCY_VEHICLES = [
@@ -108,42 +119,55 @@ export const EMERGENCY_VEHICLES = [
 ];
 export const PENDING_DISPOSAL_INCIDENT = [
   {
+    id: '1',
     name: '宿迁市中心血站',
     location: '118.273349,33.954288',
   },
   {
+    id: '2',
     name: '早点中心',
     location: '118.296279,33.962388',
   },
   {
+    id: '3',
+
     name: '宿迁市体育运动中心',
     location: '118.266809,33.953318',
   },
   {
+    id: '4',
+
     name: '宿迁市体育运动中心',
     location: '118.268309,33.953778',
   },
   {
+    id: '5',
+
     name: '宿迁市奥体中心',
     location: '118.290087,34.004411',
   },
   {
+    id: '6',
     name: '中心大酒店',
     location: '118.245129,33.938378',
   },
   {
+    id: '7',
     name: '中心庄',
     location: '118.752399,34.118339',
   },
   {
+    id: '8',
     name: '中心桥',
     location: '118.404649,33.415169',
   },
   {
+    id: '9',
     name: '国贸中心',
     location: '118.270089,33.895378',
   },
   {
+    id: '10',
     name: '泗洪县中心医院',
     location: '118.243579,33.460968',
   },

src/components/MarkerMap/index.tsx

@@ -7,7 +7,7 @@ import {
   watch,
   computed,
 } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import isString from 'lodash/isString';
 import useMarkerStore, { MarkerType } from '@/store/useMarkerStore';
 import MapView from '../MapView';
@@ -38,6 +38,8 @@ import {
   GET_WAREHOUSE_DIALOG_HTML,
   renderElement,
 } from './dialog';
+import { IncidentItemDetail } from '@/api/incident';
+import { useIncidentStore } from '@/store';
 
 const MARKER_MAP_TYPES = [
   // '待派发事件',
@@ -80,6 +82,7 @@ export default defineComponent({
       type: Array as PropType<string[]>,
       default: MARKER_MAP_TYPES,
     },
+    marker: Object as PropType<IncidentItemDetail | undefined | null>,
     readonly: Boolean,
   },
   setup(props, ctx) {
@@ -95,7 +98,9 @@ export default defineComponent({
     });
 
     const store = useMarkerStore();
+    const incidentStore = useIncidentStore();
     const router = useRouter();
+    const route = useRoute();
 
     const actionTypes = computed<ActionType[]>(() => [
       {
@@ -142,7 +147,7 @@ export default defineComponent({
       },
     ]);
 
-    const getMarkerPopupHTML = (type: MarkerMapType) => {
+    const getMarkerPopupHTML = (type: MarkerMapType, marker?: MarkerType) => {
       switch (type) {
         case '应急事件':
         // case '待派发事件':
@@ -153,7 +158,16 @@ export default defineComponent({
               name: '事件名称',
               addr: 'su qian',
             },
-            () => router.push('/incidentDetail'),
+            () => {
+              router.push(`/incidentDetail?id=${marker?.id}`);
+              handleRemoveAllMarkers();
+              handleAddMarkers(
+                '应急事件',
+                [{ location: marker?.location, name: '中心庄' }],
+                icon_map_dpf,
+              );
+              state.markers[0].marker.togglePopup();
+            },
           );
         case '应急仓库':
           return GET_WAREHOUSE_DIALOG_HTML({
@@ -240,7 +254,7 @@ export default defineComponent({
             offset: [10, 25],
             maxWidth: 'max-content',
             // autoPan: true,
-          }).setDOMContent(getMarkerPopupHTML(type));
+          }).setDOMContent(getMarkerPopupHTML(type, i));
           return {
             location: i.location,
             popup,
@@ -278,13 +292,13 @@ export default defineComponent({
       }, []);
 
       const leftTopBounds: number[][] = new window.minemap.LngLat(...leftTop)
-        .toBounds(10000)
+        .toBounds(5000)
         .toArray();
 
       const rightBottomBounds: number[][] = new window.minemap.LngLat(
         ...rightBottom,
       )
-        .toBounds(10000)
+        .toBounds(5000)
         .toArray();
 
       state.map.fitBounds([
@@ -318,6 +332,14 @@ export default defineComponent({
 
       handleFitBounds();
     };
+    const handleRemoveAllMarkers = () => {
+      state.markers.forEach((m) => {
+        m.marker.remove();
+        m.popup.remove();
+      });
+      state.markers = [];
+      state.positions = [];
+    };
     onMounted(() => {
       window.minemap.util.getJSON(
         'https://minedata.cn/service/solu/style/id/12878',
@@ -373,7 +395,60 @@ export default defineComponent({
         state.trafficStatus = false;
         updateTrafficLayerVisibility('none');
       });
+
+      if (!route.query.id) return;
+      // 如果存在id
+      handleAddMarkers(
+        '应急事件',
+        [{ location: '118.752399,34.118339', name: '中心庄' }],
+        icon_map_dpf,
+      );
+
+      state.markers[0].marker.togglePopup();
     });
+
+    watch(
+      () => route.query.id,
+      (next) => {
+        if (!next) {
+          handleRemoveAllMarkers();
+          if (state.types.includes('应急事件')) {
+            state.types.forEach((next) => {
+              actionTypes.value.forEach((item) => {
+                if (next === item.type) {
+                  state.hasTypes.push(item.type);
+                  item.action();
+                }
+              });
+            });
+          } else {
+            state.map?.flyTo({
+              center: [118.29564, 33.97441],
+              zoom: 14,
+              bearing: 10,
+              pitch: 30,
+              duration: 2000,
+            });
+          }
+        }
+      },
+    );
+
+    watch(
+      () => props.marker?.baseInfo?.locations,
+      (next) => {
+        if (next && !state.positions.includes(next)) {
+          handleRemoveAllMarkers();
+          handleAddMarkers(
+            '应急事件',
+            [{ location: '118.288721,33.951047', name: '中心庄' }],
+            icon_map_dpf,
+          );
+          state.markers[0].marker.togglePopup();
+        }
+      },
+    );
+
     watch(
       () => state.types,
       (next) => {