Merge remote-tracking branch 'origin/master'

src/components/Map/YztMap/index.vue

@@ -302,7 +302,7 @@ const filterTd = (obj, dataType) => {
     data.push(tempData);
   }
   if (data[data.length - 1].data && data[data.length - 1].data.length === 1 && data[data.length - 1].type === 'shortText') {
-    data[data.length - 1].data[1] = { label: '', value: '' };
+    data[data.length - 1].type = 'longText';
   }
   return data;
 };

src/components/Map/data.ts

@@ -102,5 +102,6 @@ export const titleList = {
   '32': '防溺水',
   '33': '森林防火',
   '34': '防灾救援',
-  '41': '救援队伍'
+  '41': '救援队伍',
+  'forestFireWarn': '森林火灾'
 };

src/components/Map/index.vue

@@ -5,12 +5,13 @@
 </template>
 
 <script setup lang="ts" name="Map">
-import { useAMap } from '@/hooks/AMap/useAMap';
-import { useDrawTool } from '@/hooks/AMap/useDrawTool';
-import { getDictLabel } from '@/utils/dict';
-import { pointDetailTemplate } from './mapData';
+import {useAMap} from '@/hooks/AMap/useAMap';
+import {useDrawTool} from '@/hooks/AMap/useDrawTool';
+import {getDictLabel} from '@/utils/dict';
+import {pointDetailTemplate} from './mapData';
 import {getPointInfoList} from "@/api/globalMap";
-import { methodList, titleList } from './data';
+import {methodList, titleList} from './data';
+
 interface EventDetails {
   'event_id': String;
   'event_title': String;
@@ -24,16 +25,17 @@ interface EventDetails {
   'latitude': String;
   'longitude': String
 }
+
 interface Props {
   activeMap: string;
   pointType: [];
-  eventDetails: EventDetails;
+  eventDetails?: EventDetails;
   zoom?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {});
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { point_type } = toRefs<any>(proxy?.useDict('point_type'));
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
+const {point_type} = toRefs<any>(proxy?.useDict('point_type'));
 
 const emits = defineEmits(['onLoadCompleted', 'selectGraphics', 'unSelectGraphics', 'showTextEditBox', 'onDrawCompleted', 'handleShowVideo', 'handleShowWarehouse']);
 
@@ -70,7 +72,7 @@ const mapUtils = useAMap({
     } else {
       map.removeLayer();
     }
-    drawTool.initMouseTool({ container: 'aMap', map, AMap });
+    drawTool.initMouseTool({container: 'aMap', map, AMap});
     handleResize();
     emits('onLoadCompleted')
   },
@@ -107,7 +109,7 @@ const mapUtils = useAMap({
           const div = document.createElement('div');
           div.className = 'point-item point-item-hover';
           div.innerHTML =
-            '<div class="td4">' + getDictLabel(point_type.value, item.dataType.toString()) + '</div><div class="td4">' + item.name + '</div>';
+              '<div class="td4">' + getDictLabel(point_type.value, item.dataType.toString()) + '</div><div class="td4">' + item.name + '</div>';
           div.addEventListener('click', () => {
             handlePointDetails(item);
           });
@@ -140,86 +142,116 @@ const {
   handleHover,
   creatMask,
   trackPlayback
-} = { ...mapUtils };
+} = {...mapUtils};
 const handlePointDetails = (data) => {
-  let method = methodList[data.dataType];
-  let title = !!titleList[data.dataType] ? titleList[data.dataType] : '信息';
-  if (!method) return;
-  method(data.id).then((res) => {
-    if (!!pointDetailTemplate[data.dataType]) {
-      let div = document.createElement('div');
-      div.className = 'point-info';
-      let titleDom = document.createElement('div');
-      titleDom.className = 'title-box';
-      titleDom.innerHTML = '<div class="gradient-text">' + title + '</div></div>';
-      div.appendChild(titleDom);
-      if (data.dataType === 2) {
-        let btnBox = document.createElement('div');
-        let btn = document.createElement('div');
-        btnBox.className = 'flex';
-        btn.className = 'btn';
-        btn.innerHTML = '<div class="video-icon"></div><div>物资详情</div>';
-        btn.onclick = () => {
-          emits('handleShowWarehouse', data);
-        };
-        btnBox.appendChild(btn);
-        div.appendChild(btnBox);
-      } else if (data.dataType === 4) {
-        let btnBox = document.createElement('div');
-        let btn = document.createElement('div');
-        btnBox.className = 'flex';
-        btn.className = 'btn';
-        btn.innerHTML = '<div class="video-icon"></div><div>附近视频</div>';
-        btn.onclick = () => {
-          emits('handleShowVideo', data);
-        };
-        btnBox.appendChild(btn);
-        div.appendChild(btnBox);
+  const method = methodList[data.dataType];
+  if (!!method) {
+    // 请求接口获取详情
+    method(data.id).then((res) => {
+      if (!!pointDetailTemplate[data.dataType]) {
+        createInfo(data, res);
       }
-      let icon1 = document.createElement('div');
-      icon1.className = 'icon1';
-      let icon2 = document.createElement('div');
-      icon2.className = 'icon2';
-      let icon3 = document.createElement('div');
-      icon3.className = 'icon3';
-      let icon4 = document.createElement('div');
-      icon4.className = 'icon4';
-      div.appendChild(icon1);
-      div.appendChild(icon2);
-      div.appendChild(icon3);
-      div.appendChild(icon4);
-      let table = document.createElement('div');
-      table.className = 'table-box';
-      let content = '';
-      content += '<div class="table">';
-      const newData = filterTd(res.rows[0], data.dataType);
-      newData.forEach((item) => {
-        content += '<div class="point-item2">';
-        content += '<div class="td1">' + item.data[0].label + '</div><div class="td2">' + item.data[0].value + '</div>';
+    });
+  } else if (!!pointDetailTemplate[data.detailType]) {
+    // 直接用现有数据展示
+    createInfo(data)
+  }
+};
+const createInfo = (data, res) => {
+  let dataType = '';
+  if (!!titleList[data.dataType]) {
+    dataType = data.dataType;
+  } else if (!!titleList[data.detailType]) {
+    dataType = data.detailType;
+  }
+  let title = titleList[dataType] ? titleList[dataType] :  '信息';
+  let div = document.createElement('div');
+  div.className = 'point-info';
+  let titleDom = document.createElement('div');
+  titleDom.className = 'title-box';
+  titleDom.innerHTML = '<div class="gradient-text">' + title + '</div></div>';
+  div.appendChild(titleDom);
+  if (data.dataType === 2) {
+    let btnBox = document.createElement('div');
+    let btn = document.createElement('div');
+    btnBox.className = 'flex';
+    btn.className = 'btn';
+    btn.innerHTML = '<div class="video-icon"></div><div>物资详情</div>';
+    btn.onclick = () => {
+      emits('handleShowWarehouse', data);
+    };
+    btnBox.appendChild(btn);
+    div.appendChild(btnBox);
+  } else if (data.dataType === 4) {
+    let btnBox = document.createElement('div');
+    let btn = document.createElement('div');
+    btnBox.className = 'flex';
+    btn.className = 'btn';
+    btn.innerHTML = '<div class="video-icon"></div><div>附近视频</div>';
+    btn.onclick = () => {
+      emits('handleShowVideo', data);
+    };
+    btnBox.appendChild(btn);
+    div.appendChild(btnBox);
+  }
+  let icon1 = document.createElement('div');
+  icon1.className = 'icon1';
+  let icon2 = document.createElement('div');
+  icon2.className = 'icon2';
+  let icon3 = document.createElement('div');
+  icon3.className = 'icon3';
+  let icon4 = document.createElement('div');
+  icon4.className = 'icon4';
+  div.appendChild(icon1);
+  div.appendChild(icon2);
+  div.appendChild(icon3);
+  div.appendChild(icon4);
+  let table = document.createElement('div');
+  table.className = 'table-box';
+  let content = '';
+  content += '<div class="table">';
+  let newData = [];
+  if (res) {
+    newData = filterTd(res.rows[0], dataType);
+  } else {
+    newData = filterTd(data, dataType);
+  }
+  newData.forEach((item) => {
+    if (item.type === 'shortText') {
+      content += '<div class="tr">';
+      item.data.forEach((item2) => {
+        content += '<div class="point-item">';
+        content += '<div class="td1">' + item2.label + '</div><div class="td2">' + item2.value + '</div>';
         content += '</div>';
       });
       content += '</div>';
-      table.innerHTML = content;
-      div.appendChild(table);
-      let closeBtn = document.createElement('div');
-      closeBtn.className = 'close';
-      closeBtn.onclick = hideInfo;
-      div.appendChild(closeBtn);
-      showInfo(div, [data.longitude, data.latitude], true);
+    } else {
+      content += '<div class="point-item2">';
+      content += '<div class="td1">' + item.data[0].label + '</div><div class="td2">' + item.data[0].value + '</div>';
+      content += '</div>';
     }
   });
-};
+  content += '</div>';
+  table.innerHTML = content;
+  div.appendChild(table);
+  let closeBtn = document.createElement('div');
+  closeBtn.className = 'close';
+  closeBtn.onclick = hideInfo;
+  div.appendChild(closeBtn);
+  showInfo(div, [data.longitude, data.latitude], true);
+}
 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;
       }
-      const value = !!obj[key] ? obj[key] : '';
+      const value = !!obj && !!obj[key] ? obj[key] : '';
       if (value && value.length > 8) {
         if (i === 0) {
           data.push({ type: 'longText', data: [{ label: keyLabel, value: value }] });
@@ -228,7 +260,11 @@ const filterTd = (obj, dataType) => {
           tempData = { type: 'longText', data: [{ label: keyLabel, value: value }] };
         }
       } else {
-        data[data.length - 1].data.push({ label: keyLabel, value: value });
+        if (i === 0) {
+          data.push({ type: 'shortText', data: [{ label: keyLabel, value: value }] });
+        } else {
+          data[data.length - 1].data.push({ label: keyLabel, value: value });
+        }
         i++;
         if (!!tempData && JSON.stringify(tempData) !== '{}') {
           data.push(tempData);
@@ -237,18 +273,21 @@ const filterTd = (obj, dataType) => {
         }
       }
     }
-  }
+  })
   if (!!tempData && JSON.stringify(tempData) !== '{}') {
     data.push(tempData);
   }
+  if (data[data.length - 1].data && data[data.length - 1].data.length === 1 && data[data.length - 1].type === 'shortText') {
+    data[data.length - 1].type = 'longText';
+  }
   return data;
 };
 // 监听地图类型变化
 watch(
-  () => props.activeMap,
-  () => {
-    switchMap(props.activeMap);
-  }
+    () => props.activeMap,
+    () => {
+      switchMap(props.activeMap);
+    }
 );
 
 watch(() => props.eventDetails, () => {
@@ -265,7 +304,17 @@ const getMapUtils = () => {
 const getDrawTool = () => {
   return mapUtils.getDrawTool();
 };
-defineExpose({ getDrawTool, getMapUtils, addMarker, addSearchMarker, getMarkers, clearMarker, getMap, drawTool, handleHover });
+defineExpose({
+  getDrawTool,
+  getMapUtils,
+  addMarker,
+  addSearchMarker,
+  getMarkers,
+  clearMarker,
+  getMap,
+  drawTool,
+  handleHover
+});
 const handleResize = () => {
   map.resize();
 };
@@ -280,12 +329,14 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 @import 'map.scss';
+
 .map-container2 {
   width: 100%;
   height: 100%;
   position: relative;
   overflow: hidden;
 }
+
 .map-container {
   width: 100%;
   height: 100%;
@@ -294,11 +345,21 @@ onUnmounted(() => {
   :deep(.amap-copyright) {
     display: none !important;
   }
+
   :deep(.amap-marker-label) {
     border: 1px solid #474747;
     background-color: rgba(255, 255, 255, 0.65);
     padding: 3px 8px;
     border-radius: 4px;
   }
+  :deep(.amap-info-content) {
+    padding: 0;
+  }
+  :deep(.amap-info-close) {
+    display: none;
+  }
+  :deep(.amap-info-sharp) {
+    display: none;
+  }
 }
 </style>

src/components/Map/map.scss

@@ -1,6 +1,6 @@
 :deep(.point-info) {
   border: 1px solid #2a81fc;
-  padding: 5px 12px 12px;
+  padding: 2px 15px 15px;
   width: 350px;
   font-size: 14px;
   display: flex;
@@ -9,7 +9,7 @@
   color: #d5dde3;
   position: relative;
   .table-box {
-    max-height: 400px;
+    max-height: 175px;
     overflow-y: auto;
     width: 100%;
     &::-webkit-scrollbar {
@@ -42,36 +42,40 @@
     width: 100%;
   }
   .td1 {
+    width: 67px;
+  }
+  .td1, .td3 {
     background-color: #1a326e;
     padding: 8px 5px;
     color: #c6d1e6;
     border-bottom: 1px solid #3d66ae;
     border-left: 1px solid #3d66ae;
   }
-  .td2 {
+  .td2, .td4 {
     padding: 8px 5px;
     border-bottom: 1px solid #3d66ae;
     border-left: 1px solid #3d66ae;
   }
-  .td1, .td2 {
+  .td2, .td3, .td4 {
     flex: 1;
   }
   .close {
     position: absolute;
     top: 10px;
-    right: 30px;
-    width: 30px;
-    height: 30px;
-    background: url('@/assets/images/close.png') no-repeat;
+    right: 20px;
+    width: 10px;
+    height: 10px;
+    background: url('@/assets/images/close2.png') no-repeat;
     background-size: 100% 100%;
     cursor: pointer;
   }
   .title-box {
     width: 100%;
-    height: 45px;
+    height: 25px;
     position: relative;
     background: url('@/assets/images/line.png') no-repeat bottom left;
-    background-size:14px 6px;
+    background-size: 14px 6px;
+    margin-bottom: 5px;
     &::before {
       content: "";
       width: 280px;
@@ -79,8 +83,8 @@
       background-image: linear-gradient(to right, rgba(0, 191, 252, 0.35) 0, rgba(0, 191, 252, 0) 100%);
       display: block;
       position: absolute;
-      left: 90px;
-      bottom: 15px;
+      left: 16px;
+      bottom: 2.5px;
     }
   }
   .gradient-text {
@@ -88,11 +92,12 @@
   }
   .icon1, .icon2, .icon3, .icon4 {
     position: absolute;
-    top: 10px;
-    left: 10px;
-    width: 12px;
-    height: 12px;
+    top: 5px;
+    left: 5px;
+    width: 6px;
+    height: 6px;
     background: url('@/assets/images/inputIcon1.png') no-repeat;
+    background-size: 100% 100%;
   }
   .icon2 {
     left: unset;

src/components/Map/mapData.ts

@@ -854,5 +854,15 @@ export const pointDetailTemplate = {
     description: '描述',
     longitude: '经度',
     latitude: '纬度'
+  },
+  'forestFireWarn': {
+    name: '地址',
+    time1: '热点上报时间',
+    data2: '反馈类型',
+    time2: '反馈时间',
+    data1: '亮温强度',
+    longitude: '经度',
+    latitude: '纬度',
+    address: '详细地址'
   }
 };

src/hooks/AMap/useAMap.ts

@@ -3,9 +3,10 @@ import { nanoid } from 'nanoid';
 import { deepClone, initDrag } from '@/utils';
 import { mergeGeoJsonPolygons, wgs_gcj_encrypts } from '@/utils/gisUtils';
 import carImg from '@/assets/images/car.png';
+import { iconList } from '@/components/Map/mapData';
 
 export function useAMap(options) {
-  let AMap, map, nowLayer, labelsLayer, scale, cluster;
+  let AMap, map, scale, cluster;
   const markers = {
     point: []
   };
@@ -13,6 +14,12 @@ export function useAMap(options) {
   let addPoints = [];
   let layers = [];
   let defaultLayer;
+  // 标绘图层
+  const plotLayers = [];
+  // 标绘层级
+  let activeLayerkey;
+  // 显示信息框
+  let infoWindow;
   // 初始化事件
   const initMap = (options) => {
     window._AMapSecurityConfig = {
@@ -23,7 +30,19 @@ export function useAMap(options) {
       version: !!options.version ? options.version : '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
       plugins: options.plugins
           ? options.plugins
-          : ['AMap.Scale', 'AMap.RangingTool', 'AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.MarkerCluster', 'AMap.DistrictSearch', 'AMap.MoveAnimation', 'AMap.Driving', 'AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.GeoJSON']
+          : [
+            'AMap.Scale',
+            'AMap.RangingTool',
+            'AMap.MouseTool',
+            'AMap.PolygonEditor',
+            'AMap.MarkerCluster',
+            'AMap.DistrictSearch',
+            'AMap.MoveAnimation',
+            'AMap.Driving',
+            'AMap.Geocoder',
+            'AMap.PlaceSearch',
+            'AMap.GeoJSON'
+          ]
     }).then((res) => {
       AMap = res;
       defaultLayer = AMap.createDefaultLayer();
@@ -115,6 +134,13 @@ export function useAMap(options) {
   const addSearchMarker = (item) => {
     map.setZoom(18);
     map.setCenter(item.lnglat);
+    // 获取到上一次的搜索标记并移除
+    const index = addPoints.findIndex((m) => {
+      return m.dataType === 'search';
+    });
+    if (index > -1) {
+      addPoints.splice(index, 1);
+    }
     addMarker([item], true);
     clickMarker = item;
     options.onMarkerClick(item);
@@ -122,9 +148,11 @@ export function useAMap(options) {
   // 添加多个点
   const addMarker = (points, notClean?: boolean) => {
     if (!notClean) {
-      clearMarker('point');
+      addPoints = points;
+    } else {
+      addPoints.push(...points);
     }
-    addPoints = points;
+    clearMarker('point');
     const count = points.length;
     const _renderClusterMarker = function (context) {
       // 聚合中点个数
@@ -191,7 +219,7 @@ export function useAMap(options) {
     };
     cluster = new AMap.MarkerCluster(
         map, //地图实例
-        points, //海量点数据，数据中需包含经纬度信息字段 lnglat
+        addPoints, //海量点数据，数据中需包含经纬度信息字段 lnglat
         {
           gridSize: 30, //数据聚合计算时网格的像素大小
           renderClusterMarker: _renderClusterMarker, //上述步骤的自定义聚合点样式
@@ -202,56 +230,175 @@ export function useAMap(options) {
       markers['point'].push(item);
     });
   };
-
+  // 添加多个点2 后台做点聚合
+  const addMarker2 = (obj) => {
+    // 新增图层
+    if (!plotLayers['points2']) {
+      plotLayers['points2'] = new AMap.OverlayGroup({
+        zIndex: 10, // 设置图层层级
+        visible: true
+      });
+      map.add(plotLayers['points2']);
+    } else {
+      plotLayers['points2'].clearOverlays();
+      addPoints = [];
+    }
+    let hideInfoFlag = true;
+    Object.keys(obj).forEach((key: string) => {
+      const data = obj[key];
+      if (clickMarker) {
+        const extData = clickMarker.getExtData();
+        if (data.id === extData.id && data.dataType === extData.dataType) {
+          hideInfoFlag = false;
+          data.isHover = true;
+        }
+      }
+      if (data.type === '3') {
+        // 聚合点
+        const div = document.createElement('div');
+        div.style.backgroundColor = 'rgba(78,179,211,.5)';
+        const size = Math.round(25 + Math.pow(1 / 5, 1 / 5) * 20);
+        div.style.width = div.style.height = size + 'px';
+        div.style.border = 'solid 1px rgba(78,179,211,1)';
+        div.style.borderRadius = size / 2 + 'px';
+        div.innerHTML = data.count;
+        div.style.lineHeight = size + 'px';
+        div.style.color = '#ffffff';
+        div.style.fontSize = '12px';
+        div.style.textAlign = 'center';
+        const marker = new AMap.Marker({
+          position: [data.longitude, data.latitude],
+          content: div,
+          anchor: 'center',
+          offset: new AMap.Pixel(0, 0),
+          map: map
+        });
+        marker.setContent(div);
+        marker.on('click', (e) => {
+          const bounds = e.target.getBounds();
+          map.setZoomAndCenter(map.getZoom() + 1, bounds.getCenter());
+        });
+        plotLayers['points2'].addOverlay(marker);
+        addPoints.push(data);
+      } else {
+        // 单个点
+        const iconConfig = iconList[data.dataType] || iconList.common;
+        data.image = iconConfig.image;
+        data.imageHover = iconConfig.imageHover;
+        data.size = iconConfig.size;
+        if (data.materia_name) {
+          data.name = data.materia_name;
+        }
+        if (data.dataType === 43) {
+          data.showName = true;
+        }
+        if (!data.id) {
+          data.id = nanoid(8);
+        }
+        data.lnglat = [data.longitude, data.latitude];
+        const marker = new AMap.Marker({
+          position: [data.longitude, data.latitude],
+          content: getContent(data.isHover ? data.imageHover : data.image, data.size),
+          anchor: 'bottom-center',
+          offset: new AMap.Pixel(0, 0),
+          map: map
+        });
+        marker.setExtData(data);
+        marker.on('click', function (e) {
+          const extData = e.target.getExtData();
+          let index = 0;
+          let index2 = 0;
+          for (let i = 0; i < addPoints.length; i++) {
+            if (addPoints[i].id === extData.id) {
+              marker.setContent(getContent(data.imageHover, data.size));
+              index++;
+            } else if (!!clickMarker) {
+              const extData2 = clickMarker.getExtData();
+              if (addPoints[i].id === extData2.id) {
+                clickMarker.setContent(getContent(extData2.image, extData2.size));
+                index2++;
+              }
+            }
+            if ((!!clickMarker && index === 1 && index2 === 1) || (!clickMarker && index === 1)) {
+              break;
+            }
+          }
+          clickMarker = e.target;
+          options.onMarkerClick(extData);
+        });
+        plotLayers['points2'].addOverlay(marker);
+        addPoints.push(data);
+        if (data.isHover) {
+          clickMarker = marker;
+          options.onMarkerClick(data);
+        }
+      }
+    });
+    if (hideInfoFlag) {
+      clickMarker = null;
+      hideInfo();
+    }
+  };
+  const getContent = (icon: string, size: number[], name?: string, color?: string = '#000') => {
+    let content =
+        '<div style="display: flex;flex-direction: column;align-items: center;justify-content: center;cursor: pointer">' +
+        '<div style="background: url(' +
+        icon +
+        ') no-repeat; width: ' +
+        size[0] +
+        'px;height: ' +
+        size[1] +
+        'px;cursor: pointer; background-size: cover"></div>';
+    if (!!name) {
+      content += '<div style="font-size: 16px;white-space: nowrap; font-weight: bold;color:' + color + '">' + name + '</div>';
+    }
+    content += '</div>';
+    return content;
+  };
   // 清除所有标加
   const clearMarker = (id) => {
     if (!cluster || !markers[id]) return;
     cluster.setMap(null);
     markers[id] = [];
   };
-
-  const handleHover = (extData, dataType) => {
-    map.setZoom(18);
-    map.setCenter([extData.lng, extData.lat]);
-    setTimeout(() => {
-      let index = 0;
-      let index2 = 0;
-      let data = {};
-      for (let i = 0; i < addPoints.length; i++) {
-        if (addPoints[i].id === extData.id.toString() && addPoints[i].dataType === dataType) {
-          addPoints[i].icon = addPoints[i].imageHover;
-          index++;
-          data = addPoints[i];
-        } else if (!!clickMarker) {
-          const extData2 = clickMarker.getExtData ? clickMarker.getExtData() : clickMarker;
-          if (addPoints[i].id === extData2.id) {
-            addPoints[i].icon = addPoints[i].image;
-            index2++;
-          }
-        }
-        if ((!!clickMarker && index === 1 && index2 === 1) || (!clickMarker && index === 1)) {
-          break;
-        }
-      }
-      addMarker(addPoints);
-      options.onMarkerClick(data);
-    }, 2000);
+  const clearMarker2 = (id) => {
+    if (!!plotLayers['points2']) {
+      plotLayers['points2'].clearOverlays();
+      addPoints = [];
+    }
+    clickMarker = null;
+    hideInfo();
   };
-
-  const getMarkers = () => {
-    return markers;
+  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, isCustom) => {
+  const showInfo = (content, position, offsetY, isCustom) => {
     hideInfo();
     // 实例化InfoWindow
     infoWindow = new AMap.InfoWindow({
       // 完全自定义
       isCustom: isCustom,
       autoMove: false,
-      offset: new AMap.Pixel(0, -20) // 信息窗体的偏移量
+      offset: new AMap.Pixel(0, offsetY ? offsetY : 0) // 信息窗体的偏移量
       // 可以根据需要设置其他InfoWindow的属性
     });
     const lnglat = new AMap.LngLat(position[0], position[1]);
@@ -264,7 +411,7 @@ export function useAMap(options) {
     infoWindow.on('mouseout', () => map.setStatus({ zoomEnable: true }));
   };
 
-  const hideInfo = (e) => {
+  const hideInfo = (e?: any) => {
     map.setStatus({ zoomEnable: true });
     if (!!infoWindow) {
       infoWindow.close();
@@ -273,8 +420,9 @@ export function useAMap(options) {
         for (let i = 0; i < addPoints.length; i++) {
           if (addPoints[i].id === extData.id) {
             addPoints[i].icon = addPoints[i].image;
+            clickMarker.setContent(getContent(addPoints[i].icon, addPoints[i].size));
             clickMarker = null;
-            addMarker(addPoints);
+            // addMarker(addPoints);
             break;
           }
         }
@@ -650,18 +798,19 @@ export function useAMap(options) {
     getMap,
     switchMap,
     addMarker,
+    addMarker2,
     addSearchMarker,
     clearMarker,
-    getMarkers,
+    clearMarker2,
     getScale,
     showInfo,
     hideInfo,
-    handleHover,
     creatMask,
     removeMask,
     creatMask2,
     removeMask2,
     trackPlayback,
-    drawData
+    drawData,
+    setAddress
   };
 }

src/router/routes.ts

@@ -117,7 +117,6 @@ export const constantRoutes: Array<RouteRecordRaw> = [
       noCache: true
     }
   },
-  ,
   {
     path: "/rainfallMonitoringView",
     name: "RainfallMonitoringView",

src/utils/olMap/olMap.ts

@@ -18,16 +18,14 @@ import WMTSCapabilities from 'ol/format/WMTSCapabilities';
 import { Fill, Stroke } from 'ol/style';
 import proj4 from 'proj4';
 import { register } from 'ol/proj/proj4';
-import { defaults } from 'ol/control';
+import { defaults, ScaleLine } from 'ol/control';
 import Vector from 'ol/layer/Vector';
 import SourceVector from 'ol/source/Vector';
 import GeoJSON from 'ol/format/GeoJSON';
-import { fromLonLat } from 'ol/proj';
 import axios from 'axios';
 import { fromExtent } from 'ol/geom/Polygon';
 import { LinearRing, LineString, Polygon } from 'ol/geom';
 import { Graticule } from 'ol/layer';
-import { getPointsCenter, mergeGeoJsonPolygons } from '@/utils/gisUtils';
 import { Cluster } from 'ol/source';
 import CircleStyle from 'ol/style/Circle';
 import Overlay from 'ol/Overlay';
@@ -40,6 +38,8 @@ import * as turf from '@turf/turf';
 import { nanoid } from 'nanoid';
 import carImg from '@/assets/images/car.png';
 import { globalHeaders } from '@/utils/request';
+import { iconList } from '@/views/globalMap/data/mapData';
+import gdJson from '@/assets/json/gd.json';
 
 const tk = 'a8df87f1695d224d2679aa805c1268d9';
 const commonUrl = import.meta.env.VITE_APP_BASE_API2 + 'api/oneShare/proxyHandler/gd/';
@@ -79,7 +79,6 @@ export class olMap {
     icon: '',
     iconName: ''
   };
-  private plot;
   private drawVector;
   private drawTool;
   private vectorLayer;
@@ -87,6 +86,7 @@ export class olMap {
   private maskLayer;
   private maskLayer2;
   // 显示信息框
+  private clickMarker;
   private infoWindow;
   private select;
   // 车辆轨迹
@@ -95,10 +95,14 @@ export class olMap {
   private traceFeature;
   // 自定义绘制结束调用方法
   private drawEndMethod;
-  private selectedFeature;
   private drawing;
   private path;
   private anyLine;
+  private scale;
+  // 标绘图层
+  private plotLayers = {};
+  private addressMarker;
+  private addPoints = [];
 
   constructor(options) {
     this.options = options;
@@ -119,7 +123,8 @@ export class olMap {
     });
     // 初始化比例尺
     if (options.showScale) {
-      // this.map.addControl(new AMap.Scale());
+      this.scale = new ScaleLine();
+      this.map.addControl(this.scale);
     }
     if (options.drawTool?.use) {
       this.initMouseTool(options.drawTool);
@@ -144,44 +149,53 @@ export class olMap {
       condition: click,
       style: null,
       filter: (feature, layer) => {
-        // 只有vectorLayer图层可选择
-        return layer === this.vectorLayer;
+        // 检查当前图层是否在 plotLayers 中
+        return Object.values(this.plotLayers).includes(layer);
       }
     });
     this.map.addInteraction(this.select);
     // 监听Select交互的select事件
     this.select.on('select', (event) => {
-      const selectedFeatures = event.selected[0]; // 获取被选中的要素集合
-      const features = selectedFeatures.get('features');
-      if (selectedFeatures && !!features) {
-        const originalFeature = features[0];
-        const size = features.length;
-        if (size === 1) {
-          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);
+      const feature = event.selected[0]; // 获取被选中的要素集合
+      const extData = feature.get('extData');
+      if (!!feature) {
+        if (this.clickMarker) {
+          const selectData = this.clickMarker.get('extData');
+          this.clickMarker.setStyle(
+              new Style({
+                image: new Icon({
+                  src: selectData.image,
+                  scale: selectData.scale,
+                  anchor: [0.5, 0.5],
+                  anchorXUnits: 'fraction',
+                  anchorYUnits: 'fraction'
+                })
+              })
+          );
+        }
+        if (['1', '2'].includes(extData.type)) {
+          // 多点位 单点
+          if (this.clickMarker !== feature) {
+            this.clickMarker = feature;
+            feature.setStyle(
+                new Style({
+                  image: new Icon({
+                    src: extData.imageHover,
+                    scale: extData.scale,
+                    anchor: [0.5, 0.5],
+                    anchorXUnits: 'fraction',
+                    anchorYUnits: 'fraction'
+                  })
+                })
+            );
             options.onMarkerClick(extData);
           }
-        } else {
+        } else if (extData.type === '3') {
           // 聚合要素
-          this.select.getFeatures().clear();
+          // this.select.getFeatures().clear();
           const currentZoom = this.map.getView().getZoom();
           this.map.getView().setZoom(currentZoom + 1);
-          const points = [];
-          features.forEach((feature) => {
-            const geometry = feature.getGeometry(); // 获取要素的几何对象
-            const type = geometry.getType(); // 获取几何类型
-            if (type === 'Point') {
-              points.push(geometry.getCoordinates());
-            }
-          });
-          const newFeature = getPointsCenter(points);
-          this.map.getView().setCenter(newFeature.geometry.coordinates);
+          this.map.getView().setCenter([Number(extData.longitude), Number(extData.latitude)]);
           event.selected = [];
         }
       }
@@ -191,7 +205,11 @@ export class olMap {
     // 添加新的图层
     if (Array.isArray(options.id)) {
       for (const layer of options.id) {
-        await this.formatXml(layer);
+        if (layer.layerType === 'JSON') {
+          await this.createJsonLayer(layer);
+        } else {
+          await this.formatXml(layer);
+        }
       }
     } else if (options.id === 'tianditu') {
       await this.formatXml2();
@@ -202,7 +220,8 @@ export class olMap {
     this.vectorLayer = new VectorLayer({
       source: new VectorSource({
         features: []
-      })
+      }),
+      zIndex: options.zIndex ? options.zIndex : 100
     });
     this.map.addLayer(this.vectorLayer);
     if (typeof this.options.onLoadCompleted === 'function') {
@@ -235,28 +254,40 @@ export class olMap {
   }
   formatXml(options) {
     const xml = new WMTSCapabilities();
-    return this.getCapabilities(options.code).then((res) => {
-      const geoJson = xml.read(res.data);
-      const data = geoJson.Contents.Layer[0];
-      const layerParam = {
-        layerName: data.Abstract,
-        styleName: data.Identifier,
-        tilematrixset: data.TileMatrixSetLink[0].TileMatrixSet,
-        format: data.Format[0]
-      };
-      this.createWmsLayer(options, layerParam);
+    return this.getCapabilities(options.code, options.layerType).then((res) => {
+      if (options.layerType === 'WMTS') {
+        const geoJson = xml.read(res.data);
+        const data = geoJson.Contents.Layer[0];
+        const layerParam = {
+          layerName: data.Abstract,
+          styleName: data.Identifier,
+          tilematrixset: data.TileMatrixSetLink[0].TileMatrixSet,
+          format: data.Format[0]
+        };
+        this.createWmtsLayer(options, layerParam);
+      } else if (options.layerType === 'WFS') {
+        const parser = new DOMParser();
+        const xmlDoc = parser.parseFromString(res.data, 'text/xml');
+        const featureType = xmlDoc.getElementsByTagName('FeatureType')[0];
+        const layerParam = {
+          layerName: featureType.getElementsByTagName('Title')[0].textContent,
+          typeName: featureType.getElementsByTagName('Name')[0].textContent,
+          srsName: featureType.getElementsByTagName('SRS')[0].textContent
+        };
+        this.createWfsLayer(options, layerParam);
+      }
     });
   }
 
   // 请求接口获取地图信息
-  getCapabilities(code) {
-    return axios.get(commonUrl + code + '?SERVICE=WMTS&REQUEST=GetCapabilities', {
+  getCapabilities(code, service) {
+    return axios.get(commonUrl + code + '?SERVICE=' + service + '&REQUEST=GetCapabilities', {
       headers: globalHeaders()
     });
   }
 
-  // 请求地图图片加载图层
-  createWmsLayer(options, layerParam) {
+  // 请求WMTS地图图片加载图层
+  createWmtsLayer(options, layerParam) {
     const source = new WMTS({
       url: commonUrl + options.code,
       crossOrigin: 'Anonymous',
@@ -305,7 +336,50 @@ export class olMap {
     layer.set('id', options.code);
     this.map.addLayer(layer);
   }
+  //
+  createWfsLayer(options, layerParam) {
+    const source = new VectorSource({
+      format: new GeoJSON(),
+      url: `${commonUrl}${options.code}?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&typeName=流域:GEO_BAS_POLYGON&outputFormat=application/json& srsName=EPSG:4490`
+    });
+
+    const vectorLayer = new VectorLayer({
+      source: source,
+      style: new Style({
+        fill: new Fill({
+          color: 'rgba(255, 255, 255, 0.6)'
+        }),
+        stroke: new Stroke({
+          color: '#319FD3',
+          width: 1
+        })
+      })
+    });
 
+    this.map.addLayer(vectorLayer);
+  }
+  // 加载json图层
+  createJsonLayer(layer) {
+    return new Promise((resolve, reject) => {
+      const geojsonParser = new GeoJSON();
+      console.log(this.map.getView().getProjection());
+      const features = geojsonParser.readFeatures(gdJson, {
+        dataProjection: 'EPSG:4326',
+        featureProjection: this.map.getView().getProjection()
+      });
+      const jsonLayer = new VectorLayer({
+        source: new VectorSource({ features }),
+        style: new Style({
+          // 必须设置样式才能显示
+          fill: new Fill({ color: '#ffffff' }),
+          stroke: new Stroke({ color: 'rgba(0,0,0, 1)', width: 1 })
+        }),
+        zIndex: layer.zIndex ? layer.zIndex : -99
+      });
+      this.map.addLayer(jsonLayer);
+      resolve({});
+    });
+  }
   // 初始化绘画工具
   initMouseTool(options) {
     this.drawOptions = {
@@ -659,6 +733,32 @@ export class olMap {
     }
     return style;
   }
+  // 添加搜索的标记的
+  addSearchMarker(item) {
+    const view = this.map.getView();
+    view.setZoom(18);
+    view.setCenter([Number(item.longitude), Number(item.latitude)]);
+    // 获取到上一次的搜索标记并移除
+    const index = this.markers.findIndex((m) => {
+      return m.dataType === 'search';
+    });
+    if (index > -1) {
+      this.markers.splice(index, 1);
+    }
+    if (!this.plotLayers['search']) {
+      this.plotLayers['search'] = new VectorLayer({
+        source: new VectorSource({
+          features: []
+        })
+      });
+      this.map.addLayer(this.plotLayers['search']);
+    } else {
+      this.plotLayers['search'].getSource().clear();
+    }
+    this.addMarker2({ 'search': item });
+    this.clickMarker = item;
+    this.options.onMarkerClick(item);
+  }
   addMarker(points) {
     this.clearMarker();
     const vectorSource = new VectorSource({
@@ -699,19 +799,161 @@ export class olMap {
     this.vectorLayer.setStyle(this.clusterStyle);
     this.vectorLayer.setSource(clusterSource);
   }
+  addMarker2(obj) {
+    this.clearMarker2('point');
+    if (!!this.plotLayers['point']) {
+      this.markers = [];
+    }
+    let hideInfoFlag = true;
+    Object.keys(obj).forEach((key: string) => {
+      const data = obj[key];
+      const name = key === 'search' ? 'search' : 'point';
+      if (this.clickMarker) {
+        const extData = this.clickMarker.get('extData');
+        if (data.id === extData.id && data.dataType === extData.dataType) {
+          hideInfoFlag = false;
+          data.isHover = true;
+        }
+      }
+      if (data.type === '3') {
+        // 聚合点
+        const outerCircle = new CircleStyle({
+          radius: 20,
+          fill: new Fill({
+            color: 'rgba(79, 176, 206, 0.5)'
+          }),
+          stroke: new Stroke({
+            color: 'rgba(79, 176, 206, 1)'
+          })
+        });
+        const feature = new Feature({
+          // 必须是数字类型，字符串不识别
+          geometry: new Point([Number(data.longitude), Number(data.latitude)]),
+          name: data.name,
+          pointer: true,
+          extData: data
+        });
+
+        feature.setStyle(
+            new Style({
+              image: outerCircle,
+              text: new Text({
+                text: data.count.toString(),
+                font: '14px sans-serif',
+                fill: new Fill({
+                  color: '#ffff'
+                })
+              })
+            })
+        );
+        this.plotLayers[name].getSource().addFeature(feature);
+        this.markers.push(data);
+      } else {
+        // 单个点
+        const iconConfig = iconList[data.dataType] || (name === 'search' ? iconList.common2 : iconList.common);
+        data.image = iconConfig.image;
+        data.imageHover = iconConfig.imageHover;
+        data.size = iconConfig.size;
+        if (data.materia_name) {
+          data.name = data.materia_name;
+        }
+        if (data.dataType === 43) {
+          data.showName = true;
+        }
+        if (!data.id) {
+          data.id = nanoid(8);
+        }
+        data.lnglat = [data.longitude, data.latitude];
+        const feature = new Feature({
+          // 必须是数字类型，字符串不识别
+          geometry: new Point([Number(data.longitude), Number(data.latitude)]),
+          name: data.name,
+          pointer: true,
+          extData: data
+        });
+        // 设置自定义属性
+        const img = new Image();
+        img.onload = () => {
+          // 图片加载完成后，可以访问其 width 和 height 属性
+          const scale = data.size[0] ? data.size[0] / img.width : 1;
+          data.scale = scale;
+          feature.set('extData', data);
+          feature.setStyle(
+              new Style({
+                image: new Icon({
+                  src: data.isHover ? data.imageHover : data.image,
+                  scale: scale,
+                  anchor: [0.5, 0.5],
+                  anchorXUnits: 'fraction',
+                  anchorYUnits: 'fraction'
+                })
+              })
+          );
+          this.plotLayers[name].getSource().addFeature(feature);
+          if (data.isHover) {
+            this.clickMarker = feature;
+            this.options.onMarkerClick(data);
+          }
+        };
+        img.src = data.image; // 设置图片的 URL，触发加载
+        this.markers.push(data);
+      }
+    });
+    if (hideInfoFlag) {
+      this.clickMarker = null;
+      this.hideInfo(true);
+    }
+  }
   // 清除所有标加
   clearMarker() {
     if (!this.vectorLayer) return;
     this.vectorLayer.getSource().clear();
   }
-
-  showInfo(content, position, isCustom) {
+  clearMarker2(name) {
+    // 新增图层
+    if (!this.plotLayers[name]) {
+      this.plotLayers[name] = new VectorLayer({
+        source: new VectorSource({
+          features: []
+        })
+      });
+      this.map.addLayer(this.plotLayers[name]);
+    } else {
+      this.plotLayers[name].getSource().clear();
+      // this.clickMarker = null;
+      // this.hideInfo();
+    }
+  }
+  // 设置灾害地点 单独图册
+  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();
     if (!this.infoWindow) {
       this.infoWindow = new Overlay({
         element: content,
         positioning: 'bottom-center', // 你可以根据需要调整定位方式
-        offset: [0, -10] // 偏移量，用于调整覆盖层相对于要素的位置
+        offset: [0, offsetY ? offsetY : 0] // 偏移量，用于调整覆盖层相对于要素的位置
       });
     }
     this.infoWindow.setPosition(position);
@@ -722,8 +964,20 @@ export class olMap {
   hideInfo(flag?: boolean) {
     this.map.removeOverlay(this.infoWindow);
     this.infoWindow = null;
-    if (!!flag && this.select) {
-      this.select.getFeatures().clear();
+    if (!!flag && this.clickMarker) {
+      const selectData = this.clickMarker.get('extData');
+      this.clickMarker.setStyle(
+          new Style({
+            image: new Icon({
+              src: selectData.image,
+              scale: selectData.scale,
+              anchor: [0.5, 0.5],
+              anchorXUnits: 'fraction',
+              anchorYUnits: 'fraction'
+            })
+          })
+      );
+      this.clickMarker = null;
     }
   }
   /**
@@ -1227,6 +1481,9 @@ export class olMap {
   getMap() {
     return this.map;
   }
+  getScale() {
+    return this.scale;
+  }
   getMouseTool() {
     return this.drawTool;
   }

src/views/disasterRiskMonitor/forestFireWarn.vue

@@ -4,7 +4,6 @@
       <Map
         ref="mapRef"
         active-map="satellite"
-        :event-details="eventDetails"
         @onLoadCompleted="initData"
       />
       <div class="legend-box">
@@ -109,7 +108,6 @@
 </template>
 
 <script lang="ts" setup name="forestFireWarn">
-import { onMounted, reactive, ref } from "vue";
 let mapRef = ref();
 const queryParams = reactive({
   type: "1",
@@ -119,8 +117,6 @@ let dateState = reactive({
   nowDate: [],
   selectDate: []
 });
-let pointType = ref([]);
-let eventDetails = ref({});
 let forestFireData = ref({
   total: 0,
   dataList: []
@@ -164,7 +160,8 @@ const initData = () => {
         latitude: "21.69", // 观珠镇纬度
         address: "281省道附近",
         data2: "林火",
-        dataType: "3"
+        iconType: "3",
+        detailType: "forestFireWarn",
       },
       {
         name: "茂名市-高州市-石鼓镇",
@@ -175,7 +172,8 @@ const initData = () => {
         latitude: "21.82", // 石鼓镇纬度
         address: "高州市石鼓镇石鼓公园",
         data2: "非林火",
-        dataType: "2"
+        iconType: "2",
+        detailType: "forestFireWarn"
       },
       {
         name: "茂名市-信宜市-池洞镇",
@@ -186,7 +184,8 @@ const initData = () => {
         latitude: "22.43", // 池洞镇纬度
         address: "广海路37号附近",
         data2: "林火",
-        dataType: "3"
+        iconType: "3",
+        detailType: "forestFireWarn"
       },
       {
         name: "茂名市-茂南区-袂花镇",
@@ -197,7 +196,8 @@ const initData = () => {
         latitude: "21.58", // 袂花镇纬度
         address: "袂花镇茂名市第六中学",
         data2: "已灭林火",
-        dataType: "4"
+        iconType: "4",
+        detailType: "forestFireWarn"
       },
       {
         name: "茂名市-电白区-麻岗镇",
@@ -208,7 +208,8 @@ const initData = () => {
         latitude: "21.53", // 麻岗镇纬度
         address: "麻岗镇温泉中路",
         data2: "已灭林火",
-        dataType: "4"
+        iconType: "4",
+        detailType: "forestFireWarn"
       },
       {
         name: "茂名市-高州市-谢鸡镇",
@@ -219,7 +220,8 @@ const initData = () => {
         latitude: "21.92", // 谢鸡镇纬度
         address: "谢鸡镇府前路1号",
         data2: "未反馈",
-        dataType: "1"
+        iconType: "1",
+        detailType: "forestFireWarn"
       },
       {
         name: "茂名市-信宜市-丁堡镇",
@@ -230,7 +232,8 @@ const initData = () => {
         latitude: "22.30", // 丁堡镇纬度
         address: "丁堡旧街1号",
         data2: "已灭林火",
-        dataType: "4"
+        iconType: "4",
+        detailType: "forestFireWarn"
       },
       {
         name: "茂名市-茂南区-金塘镇",
@@ -241,7 +244,8 @@ const initData = () => {
         latitude: "21.75", // 金塘镇纬度
         address: "人民二路2号",
         data2: "非林火",
-        dataType: "3"
+        iconType: "3",
+        detailType: "forestFireWarn"
       },
       {
         name: "茂名市-电白区-林头镇",
@@ -252,7 +256,8 @@ const initData = () => {
         latitude: "21.66", // 林头镇纬度
         address: "林头镇s281西街和北街交叉口",
         data2: "非林火",
-        dataType: "3"
+        iconType: "3",
+        detailType: "forestFireWarn"
       },
       {
         name: "茂名市-茂南区-羊角镇",
@@ -263,19 +268,20 @@ const initData = () => {
         latitude: "21.67", // 羊角镇纬度
         address: "羊正街12号附近",
         data2: "已灭林火",
-        dataType: "4"
+        iconType: "4",
+        detailType: "forestFireWarn"
       }
     ]
   };
   data.dataList.forEach(item => {
     const icon =
-      item.dataType && !!iconList[item.dataType].image
-        ? iconList[item.dataType].image
+      item.iconType && !!iconList[item.iconType].image
+        ? iconList[item.iconType].image
         : "";
     item.icon = icon;
     item.image = icon;
     item.imageHover = icon;
-    item.size = iconList[item.dataType].size;
+    item.size = iconList[item.iconType].size;
     item.lnglat = [item.longitude, item.latitude];
   });
   forestFireData.value = data;