灾害地点

src/hooks/AMap/useAMap.ts

@@ -15,7 +15,7 @@ export function useAMap(options) {
   let layers = [];
   let defaultLayer;
   // 标绘图层
-  let plotLayers = {};
+  let plotLayers = [];
   // 标绘层级
   let activeLayerkey;
   // 初始化事件
@@ -324,7 +324,7 @@ export function useAMap(options) {
       }
     });
   };
-  const getContent = (icon: string, size: number[]) => {
+  const getContent = (icon: string, size: number[], name?: string, color?: string = '#000') => {
     const content =
       '<div style="display: flex;flex-direction: column;align-items: center;justify-content: center">' +
       '<div style="background: url(' +
@@ -334,7 +334,11 @@ export function useAMap(options) {
       'px;height: ' +
       size[1] +
       'px;cursor: pointer; background-size: cover"></div>' +
-      // '<div style="font-size: 36px;white-space: nowrap">'+ context.data[0].name +'</div>' +
+      '<div style="font-size: 16px;white-space: nowrap; font-weight: bold;color:' +
+      color +
+      '">' +
+      name +
+      '</div>' +
       '</div>';
     return content;
   };
@@ -350,7 +354,27 @@ export function useAMap(options) {
       addPoints = [];
     }
   };
-
+  let addressMarker;
+  // 设置灾害地点 单独图册
+  const setAddress = (data) => {
+    addressMarker = new AMap.Marker({
+      position: [data.longitude, data.latitude],
+      content: getContent(data.image, data.size, data.name),
+      anchor: 'bottom-center',
+      offset: new AMap.Pixel(0, 16),
+      map: map
+    });
+    if (!plotLayers['address']) {
+      plotLayers['address'] = new AMap.OverlayGroup({
+        zIndex: 10, // 设置图层层级
+        visible: true
+      });
+      map.add(plotLayers['address']);
+    } else {
+      plotLayers['address'].clearOverlays();
+    }
+    plotLayers['address'].addOverlay(addressMarker);
+  };
   // 显示信息框
   let infoWindow;
   const showInfo = (content, position, offsetY, isCustom) => {
@@ -772,6 +796,7 @@ export function useAMap(options) {
     creatMask2,
     removeMask2,
     trackPlayback,
-    drawData
+    drawData,
+    setAddress
   };
 }

src/store/modules/map.ts

@@ -48,6 +48,8 @@ export const useMapStore = defineStore('map', () => {
   });
   // 是否需要触发点击菜单
   const updateMenu = ref({});
+  // 需要更新灾害点坐标
+  const updateAddress = ref([]);
   // 设置地图加载完成状态
   const setMapLoaded = (loaded: boolean) => {
     mapLoaded.value = loaded;
@@ -177,8 +179,12 @@ export const useMapStore = defineStore('map', () => {
       menuData: []
     };
   };
+  const setUpdateAddress = (data) => {
+    updateAddress.value = data;
+  };
   // 跳转界面时 初始化所有数据
   const initData = () => {
+    mapState.center = [110.925175, 21.978955];
     activeMap.value = 'satellite';
     showMask.value = true;
     trackState.show = false;
@@ -205,6 +211,7 @@ export const useMapStore = defineStore('map', () => {
     activeMap,
     isAMap,
     updateMenu,
+    updateAddress,
     showMask,
     AMapType,
     YMapType,
@@ -222,7 +229,8 @@ export const useMapStore = defineStore('map', () => {
     setUpdateMenu,
     setPointParams,
     setPointOption,
-    handleCancelAllChecked
+    handleCancelAllChecked,
+    setUpdateAddress
   };
 });
 

src/utils/olMap/olMap.ts

@@ -100,6 +100,9 @@ export class olMap {
   private path;
   private anyLine;
   private scale;
+  // 标绘图层
+  private plotLayers = [];
+  private addressMarker;
 
   constructor(options) {
     this.options = options;
@@ -156,7 +159,7 @@ export class olMap {
       const feature = event.selected[0]; // 获取被选中的要素集合
       const extData = feature.get('extData');
       if (!!feature) {
-       if(['1', '2'].includes(extData.type)) {
+       if (['1', '2'].includes(extData.type)) {
           // 多点位 单点
           if (this.selectedFeature !== feature) {
             if (this.selectedFeature) {
@@ -701,7 +704,7 @@ export class olMap {
     this.vectorLayer.setSource(clusterSource);
   }
   addMarker2(obj) {
-    this.clearMarker2();
+    this.clearMarker2('point2');
     Object.keys(obj).forEach((key: string) => {
       const data = obj[key];
       if (data.type === '3') {
@@ -793,9 +796,41 @@ export class olMap {
     if (!this.vectorLayer) return;
     this.vectorLayer.getSource().clear();
   }
-  clearMarker2() {
-    if (!this.vectorLayer) return;
-    this.vectorLayer.getSource().clear();
+  clearMarker2(name) {
+    // 新增图层
+    if (!this.plotLayers[name]) {
+      this.plotLayers[name] = new VectorLayer({
+        source: new VectorSource({
+          features: []
+        })
+      });
+      this.map.addLayer(this.plotLayers[name]);
+    } else {
+      this.vectorLayer.getSource().clear();
+    }
+  }
+  // 设置灾害地点 单独图册
+  setAddress(data) {
+    this.clearMarker2('address');
+    this.addressMarker = new Feature({
+      // 必须是数字类型，字符串不识别
+      geometry: new Point([Number(data.longitude), Number(data.latitude)]),
+      name: data.name,
+      pointer: true,
+      extData: data
+    });
+    this.addressMarker.setStyle(
+      new Style({
+        image: new Icon({
+          src: data.image,
+          scale: [0.288, 0.288],
+          anchor: [0.5, 0.5],
+          anchorXUnits: 'fraction',
+          anchorYUnits: 'fraction'
+        })
+      })
+    );
+    this.plotLayers['address'].getSource().addFeature(this.addressMarker);
   }
   showInfo(content, position, offsetY, isCustom) {
     this.hideInfo();

src/views/emergencyCommandMap/LeftSection/index.vue

@@ -111,7 +111,7 @@
       @update:event-title="updateEventTitle"
     />
     <Communication />
-    <PositionMap v-if="showPositionMap" v-model:visible="showPositionMap" :id="eventId" @confirm="fetchEventDetail" />
+    <PositionMap v-if="showPositionMap" v-model:visible="showPositionMap" :id="eventId" @confirm="updateForm" />
   </div>
 </template>
 <script lang="ts" setup name="LeftSection">
@@ -121,9 +121,12 @@ import Communication from './Communication.vue';
 import CloseCommand from './CloseCommand.vue';
 import AssociatedEvent from './AssociatedEvent.vue';
 import PositionMap from '@/views/routineCommandMap/PositionMap.vue';
+import gcoord from 'gcoord';
+import useMapStore from '@/store/modules/map';
 
 const proxy = getCurrentInstance()?.proxy;
 const { mm_event_level } = toRefs<any>(proxy?.useDict('mm_event_level'));
+const mapStore = useMapStore();
 const route = useRoute();
 
 const eventId = ref('');
@@ -226,8 +229,10 @@ function getWindDirection(angle) {
   const index = Math.floor(((angle + 11.25) % 360) / 22.5);
   return directions[index];
 }
-
-const fetchEventDetail = () => {
+const updateForm = () => {
+  fetchEventDetail('1');
+};
+const fetchEventDetail = (flag) => {
   const id = eventId.value;
   if (id) {
     // 如果有 id，则正常获取事件详情
@@ -237,6 +242,10 @@ const fetchEventDetail = () => {
       closeCommandState.flag = eventData.value.del_flag === '0';
       // 初始化响应时间
       updateTime();
+      if (flag === '1') {
+        const lnglat = gcoord.transform([res.data.longitude, res.data.latitude], gcoord.GCJ02, gcoord.WGS84);
+        mapStore.setUpdateAddress(lnglat);
+      }
     });
   }
 };

src/views/globalMap/index.vue

@@ -62,11 +62,13 @@ import GridPointRainfall from './RightMenu/GridPointRainfall.vue';
 import EmergencyCrew from './RightMenu/EmergencyCrew.vue';
 import useMapStore from '@/store/modules/map';
 import { getVehicleTrajectory } from '@/api/globalMap/KeyVehicles';
-import { iconList } from './data/mapData';
+import { getImageUrl, iconList } from './data/mapData';
 import { debounce, deepClone } from '@/utils';
 import { parseTime } from '@/utils/ruoyi';
 import { getPointInfo2 } from '@/api/videoMonitor';
 import { toLonLat } from 'ol/proj';
+import { getEventDetail } from '@/api/duty/eventing';
+import gcoord from 'gcoord';
 
 //dom元素
 const rightMenuRef = ref(null);
@@ -74,7 +76,8 @@ const mapRef = ref(null);
 const map2Ref = ref(null);
 const leftMenuRef = ref(null);
 const timeAxisRef = ref(null);
-
+const route = useRoute();
+const eventId = ref('');
 // 地图
 let map: any = {};
 // 地图类
@@ -456,12 +459,44 @@ watch(
       if (!!map && Object.keys(map).length !== 0) {
         map.on('moveend', mapMoveEnd);
       }
+      if (eventId.value) {
+        getEventDetail({ event_id: eventId.value }).then((res) => {
+          const lnglat = gcoord.transform([res.data.longitude, res.data.latitude], gcoord.GCJ02, gcoord.WGS84);
+          const newMap = mapStore.isAMap ? map : map.getView();
+          newMap.setCenter(lnglat);
+          mapUtils.setAddress({
+            longitude: lnglat[0],
+            latitude: lnglat[1],
+            image: getImageUrl('address.png'),
+            imageHover: getImageUrl('address_hover.png'),
+            size: [45, 48],
+            name: '灾害地点'
+          });
+        });
+      }
     }
   },
   {
     immediate: true
   }
 );
+watch(
+  () => mapStore.updateAddress,
+  (lnglat) => {
+    if (lnglat && lnglat.length == 2) {
+      const newMap = mapStore.isAMap ? map : map.getView();
+      debugger
+      mapUtils.setAddress({
+        longitude: lnglat[0],
+        latitude: lnglat[1],
+        image: getImageUrl('address.png'),
+        imageHover: getImageUrl('address_hover.png'),
+        size: [45, 48],
+        name: '灾害地点'
+      });
+    }
+  }
+);
 // 监听视频打点
 watch(
   () => mapStore.pointParams,
@@ -488,8 +523,10 @@ watch(
     deep: true
   }
 );
+
 onMounted(() => {
   mapStore.initData();
+  eventId.value = route.query.event_id;
 });
 onBeforeUnmount(() => {
   if (!!map) {

src/views/routineCommandMap/PositionMap.vue

@@ -80,9 +80,8 @@
       </div>
     </el-form>
     <div ref="containerRef" class="map_box">
-      <div id="positionMap">
         <div
-          id="map"
+          id="positionMap"
           class="map"
           :style="{
             width: width,
@@ -90,8 +89,7 @@
             transform: 'scale(' + inverseScale.inverseScaleX + ', ' + inverseScale.inverseScaleY + ')',
             transformOrigin: '0 0'
           }"
-        ></div>
-      </div>
+        />
     </div>
   </Dialog>
 </template>
@@ -167,7 +165,7 @@ let form = ref({
 });
 let geocoder = {};
 let width = ref('100%');
-let height = ref('100%');
+let height = ref('500px');
 watch(
   () => props.visible,
   (n) => {
@@ -282,7 +280,7 @@ const initMap = () => {
     plugins: ['AMap.PlaceSearch', 'AMap.ContextMenu', 'AMap.PolygonEditor', 'AMap.Geocoder'] // 插件列表
   }).then((res) => {
     AMap = res;
-    map = new AMap.Map('map', {
+    map = new AMap.Map('positionMap', {
       viewMode: '3D', //是否为3D地图模式
       center: position,
       zoom: 15