粤政图 标注点击弹窗

package.json

@@ -21,7 +21,7 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@element-plus/icons-vue": "2.3.1",
     "@highlightjs/vue-plugin": "2.1.0",
-    "@turf/turf": "^7.1.0",
+    "@turf/turf": "^7.2.0",
     "@univerjs/core": "^0.4.1",
     "@univerjs/design": "^0.4.1",
     "@univerjs/docs": "^0.4.1",

src/components/Map/YztMap/index.vue

@@ -1,27 +1,40 @@
 <template>
   <div ref="containerRef" class="map-container">
-    <div ref="mapRef" id="YztMap" class="map-container" :style="{ width: width, height: height }"></div>
+    <div
+      ref="mapRef"
+      id="YztMap"
+      class="map-container"
+      :style="{
+        width: width,
+        height: height
+      }"
+    ></div>
     <rightTool :mapState="mapState" type="YztMap" :showMask="showMask" @changeShowMask="changeShowMask" />
   </div>
 </template>
 
 <script setup lang="ts">
 import 'ol/ol.css';
-import ScaleLine from 'ol/control/ScaleLine';
+import rightTool from '../rightTool.vue';
 import mmJson from '@/assets/json/mm2.json';
 import { olMap } from '@/utils/olMap/olMap';
 import { PointType } from '@/api/globalMap/type';
-import QuickZoom from '@/components/Map/quickZoom.vue';
+import { ScaleLine } from 'ol/control';
+import { getPointInfoList } from '@/api/globalMap';
+import { getDictLabel } from '@/utils/dict';
+import { methodList, titleList } from '../data';
+import { pointDetailTemplate } from '@/views/globalMap/data/mapData';
 
 interface Props {
   activeMap: string;
-  // 获取需要查询点的类型
-  pointType?: PointType[];
+  pointType: PointType[];
   showMask: boolean;
 }
 const containerScale = inject('containerScale');
 const props = withDefaults(defineProps<Props>(), {});
-const emits = defineEmits(['update:drawing', 'update:showMask', 'selectGraphics']);
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { point_type } = toRefs<any>(proxy?.useDict('point_type'));
+const emits = defineEmits(['update:drawing', 'update:showMask', 'selectGraphics', 'handleShowWarehouse', 'handleShowVideo', 'handleShowPeople']);
 
 const mapRef = ref(null);
 const mapState = reactive({
@@ -100,8 +113,8 @@ const init = () => {
       }
     },
     // 加载完成事件
-    onLoadCompleted: (yMap) => {
-      map = yMap;
+    onLoadCompleted: (YztMap) => {
+      map = YztMap;
       // initMouseTool(mapUtils);
       scale = new ScaleLine();
       map.addControl(scale);
@@ -112,13 +125,195 @@ const init = () => {
         mapUtils.createVecByJson2(mmJson, { strokeWeight: 2 });
       }
       handleResize();
+    },
+    onMarkerClick: (data) => {
+      // 多点位
+      if (data.type === '1') {
+        let path = [];
+        props.pointType.forEach((item) => {
+          path.push(item.component);
+        });
+        getPointInfoList({
+          option: path.toString(),
+          longitude: data.longitude.toString(),
+          latitude: data.latitude.toString()
+        }).then((res) => {
+          const data2 = res.data.list;
+          let content = document.createElement('div');
+          // content.style.cssText = 'transform: scale(' + containerScale().scaleX + ');';
+          content.className = 'point-info';
+          let content2 = '';
+          content2 += '<div class="title-box"><div class="gradient-text">多点位信息</div></div>';
+          content2 += '<div class="icon1"></div>';
+          content2 += '<div class="icon2"></div>';
+          content2 += '<div class="icon3"></div>';
+          content2 += '<div class="icon4"></div>';
+          content.innerHTML = content2;
+          let tableBox = document.createElement('div');
+          tableBox.className = 'table-box';
+          let table = document.createElement('div');
+          table.className = 'table';
+          table.innerHTML = '<div class="point-item"><div class="td3">主题</div><div class="td3">名称</div></div>';
+          data2.forEach((item) => {
+            item.longitude = data.longitude;
+            item.latitude = data.latitude;
+            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.addEventListener('click', () => {
+              handlePointDetails(item);
+            });
+            table.appendChild(div);
+          });
+          tableBox.appendChild(table);
+          content.appendChild(tableBox);
+          let closeBtn = document.createElement('div');
+          closeBtn.className = 'close';
+          closeBtn.onclick = () => mapUtils.hideInfo(true);
+          content.appendChild(closeBtn);
+          mapUtils.showInfo(content, [data.longitude, data.latitude], true);
+        });
+      } else {
+        handlePointDetails(data);
+      }
     }
   });
 };
+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.style.cssText = 'transform: scale(' + containerScale().scaleX + ');';
+      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);
+      } else if (data.dataType === 41) {
+        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('handleShowPeople', 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">';
+      const newData = filterTd(res.rows[0], 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>';
+        } 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 = () => mapUtils.hideInfo(true);
+      div.appendChild(closeBtn);
+      mapUtils.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];
+    if (!!keyLabel) {
+      if (i === 2) {
+        i = 0;
+      }
+      const value = !!obj[key] ? obj[key] : '';
+      if (value && value.length > 8) {
+        if (i === 0) {
+          data.push({ type: 'longText', data: [{ label: keyLabel, value: value }] });
+          i = 0;
+        } else {
+          tempData = { type: 'longText', data: [{ label: keyLabel, value: value }] };
+        }
+      } else {
+        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);
+          tempData = {};
+          i = 0;
+        }
+      }
+    }
+  }
+  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].data[1] = { label: '', value: '' };
+  }
+  return data;
+};
 const addMarker = (points) => {
   mapUtils.addMarker(points);
 };
-
 const clearMarker = () => {
   mapUtils.clearMarker();
 };
@@ -132,6 +327,15 @@ const handleResize = () => {
   height.value = containerHeight + 'px';
   map.updateSize();
 };
+const getMap = () => {
+  return map;
+};
+const getScale = () => {
+  return scale;
+};
+const getMapUtils = () => {
+  return mapUtils;
+};
 // 加载事件
 onMounted(() => {
   init();
@@ -141,18 +345,14 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('resize', handleResize);
 });
-const getMap = () => {
-  return map;
-};
-const getScale = () => {
-  return scale;
-};
+provide('getMapUtils', getMapUtils);
 provide('getMap', getMap);
 provide('getScale', getScale);
-defineExpose({ addMarker, clearMarker });
+defineExpose({ getMapUtils, addMarker, clearMarker });
 </script>
 
 <style scoped>
+@import '../map.scss';
 .map-container {
   width: 100%;
   height: 100%;

src/components/Map/data.ts

@@ -0,0 +1,106 @@
+import {
+  getEmergencyExpertDetails,
+  getEmergencyShelterTypeDetails,
+  getGasolinestationDetails,
+  getHospitalDetails,
+  getMiningcompanyDetails,
+  getWarehouseDetails,
+  getChemicalcompanyDetails,
+  getSchoolDetails,
+  getWaterloggedRoadsDetails,
+  getShipRealtilmePositionDetails,
+  getUAVDetails,
+  getRainbowDetails,
+  getTouristAttractionDetails,
+  getConstructionSitesDetails,
+  getYardSitesDetails,
+  getStationInfoDetails,
+  getMajorHazardSourceDetails,
+  getBuildingProjectDetails,
+  getChemicalWarehouseDetails,
+  getMiningOperationsDetails,
+  getEmergencyTransportResourcesDetails,
+  getEmergencyDisasterInfoOfficerDetails,
+  getMidmapDzzhDetails,
+  getVehicleDetails,
+  getMDPUnitDetails,
+  getWaterList,
+  getVideoDrowning,
+  getVideoForestFire,
+  getVideoDisasterPrevention
+} from '@/api/globalMap/spatialAnalysis';
+import { getRescueTeamsInfo } from '@/api/globalMap/rescueTeam';
+
+export const methodList = {
+  '1': getEmergencyExpertDetails,
+  '2': getWarehouseDetails,
+  '3': getEmergencyShelterTypeDetails,
+  '4': getWaterloggedRoadsDetails,
+  '5': getSchoolDetails,
+  '6': getHospitalDetails,
+  '7': getGasolinestationDetails,
+  '8': getMiningcompanyDetails,
+  // '9': getChemicalcompanyDetails,
+  '10': getShipRealtilmePositionDetails,
+  '11': getChemicalcompanyDetails,
+  '12': getChemicalcompanyDetails,
+  '13': getChemicalcompanyDetails,
+  '14': getChemicalcompanyDetails,
+  '15': getUAVDetails,
+  '16': getRainbowDetails,
+  '17': getMidmapDzzhDetails,
+  '18': getMiningOperationsDetails,
+  '20': getMDPUnitDetails,
+  '21': getBuildingProjectDetails,
+  '22': getChemicalWarehouseDetails,
+  '23': getMajorHazardSourceDetails,
+  '24': getStationInfoDetails,
+  '25': getYardSitesDetails,
+  '26': getTouristAttractionDetails,
+  '27': getConstructionSitesDetails,
+  '28': getEmergencyTransportResourcesDetails,
+  '29': getEmergencyDisasterInfoOfficerDetails,
+  '30': getVehicleDetails,
+  '31': getWaterList,
+  '32': getVideoDrowning,
+  '33': getVideoForestFire,
+  '34': getVideoDisasterPrevention,
+  '41': getRescueTeamsInfo
+};
+export const titleList = {
+  '1': '专家信息',
+  '2': '物资与装备仓库信息',
+  '3': '避难所信息',
+  '4': '易涝点信息',
+  '5': '学校信息',
+  '6': '医院信息',
+  '7': '加油站信息',
+  '8': '非煤矿山企业信息',
+  '9': '危化企业信息',
+  '10': '船舶动态信息',
+  '11': '危险化学品经营企业信息',
+  '12': '危险化学品生产企业信息',
+  '13': '危险化学品使用企业(使用许可)信息',
+  '14': '化工企业(不发使用许可)信息',
+  '15': '无人机信息',
+  '16': '雨窝点',
+  '17': '地质灾害隐患点',
+  '18': '矿山施工',
+  '19': '工矿商贸',
+  '20': '气象灾害防御重点单位',
+  '21': '建筑工程',
+  '22': '储罐信息',
+  '23': '重大危险源',
+  '24': '客运站',
+  '25': '堆场',
+  '26': '旅游场所',
+  '27': '在建工地',
+  '28': '运输资源',
+  '29': '灾害信息员',
+  '30': '重点车辆信息',
+  '31': '江湖河库',
+  '32': '防溺水',
+  '33': '森林防火',
+  '34': '防灾救援',
+  '41': '救援队伍'
+};

src/components/Map/index.vue

@@ -13,39 +13,9 @@ import { useDrawTool } from '@/hooks/AMap/useDrawTool';
 import { getPointInfoList } from '@/api/globalMap';
 import { getDictLabel } from '@/utils/dict';
 import { PointType } from '@/api/globalMap/type';
-import {
-  getEmergencyExpertDetails,
-  getEmergencyShelterTypeDetails,
-  getGasolinestationDetails,
-  getHospitalDetails,
-  getMiningcompanyDetails,
-  getWarehouseDetails,
-  getChemicalcompanyDetails,
-  getSchoolDetails,
-  getWaterloggedRoadsDetails,
-  getShipRealtilmePositionDetails,
-  getUAVDetails,
-  getRainbowDetails,
-  getTouristAttractionDetails,
-  getConstructionSitesDetails,
-  getYardSitesDetails,
-  getStationInfoDetails,
-  getMajorHazardSourceDetails,
-  getBuildingProjectDetails,
-  getChemicalWarehouseDetails,
-  getMiningOperationsDetails,
-  getEmergencyTransportResourcesDetails,
-  getEmergencyDisasterInfoOfficerDetails,
-  getMidmapDzzhDetails,
-  getVehicleDetails,
-  getVideoDrowning,
-  getVideoForestFire,
-  getVideoDisasterPrevention
-} from '@/api/globalMap/spatialAnalysis';
+import { methodList, titleList } from './data';
 import { pointDetailTemplate } from '@/views/globalMap/data/mapData';
 import useAppStore from '@/store/modules/app';
-import { getWaterList } from '@/api/globalMap/reservoir';
-import { getRescueTeamsInfo } from '@/api/globalMap/rescueTeam';
 import mmJson from '@/assets/json/mm2.json';
 interface Props {
   activeMap: string;
@@ -194,78 +164,6 @@ const {
   trackPlayback
 } = { ...mapUtils };
 const handlePointDetails = (data) => {
-  let methodList = {
-    '1': getEmergencyExpertDetails,
-    '2': getWarehouseDetails,
-    '3': getEmergencyShelterTypeDetails,
-    '4': getWaterloggedRoadsDetails,
-    '5': getSchoolDetails,
-    '6': getHospitalDetails,
-    '7': getGasolinestationDetails,
-    '8': getMiningcompanyDetails,
-    // '9': getChemicalcompanyDetails,
-    '10': getShipRealtilmePositionDetails,
-    '11': getChemicalcompanyDetails,
-    '12': getChemicalcompanyDetails,
-    '13': getChemicalcompanyDetails,
-    '14': getChemicalcompanyDetails,
-    '15': getUAVDetails,
-    '16': getRainbowDetails,
-    '17': getMidmapDzzhDetails,
-    '18': getMiningOperationsDetails,
-    '21': getBuildingProjectDetails,
-    '22': getChemicalWarehouseDetails,
-    '23': getMajorHazardSourceDetails,
-    '24': getStationInfoDetails,
-    '25': getYardSitesDetails,
-    '26': getTouristAttractionDetails,
-    '27': getConstructionSitesDetails,
-    '28': getEmergencyTransportResourcesDetails,
-    '29': getEmergencyDisasterInfoOfficerDetails,
-    '30': getVehicleDetails,
-    '31': getWaterList,
-    '32': getVideoDrowning,
-    '33': getVideoForestFire,
-    '34': getVideoDisasterPrevention,
-    '41': getRescueTeamsInfo
-  };
-  let titleList = {
-    '1': '专家信息',
-    '2': '物资与装备仓库信息',
-    '3': '避难所信息',
-    '4': '易涝点信息',
-    '5': '学校信息',
-    '6': '医院信息',
-    '7': '加油站信息',
-    '8': '非煤矿山企业信息',
-    '9': '危化企业信息',
-    '10': '船舶动态信息',
-    '11': '危险化学品经营企业信息',
-    '12': '危险化学品生产企业信息',
-    '13': '危险化学品使用企业(使用许可)信息',
-    '14': '化工企业(不发使用许可)信息',
-    '15': '无人机信息',
-    '16': '雨窝点',
-    '17': '地质灾害隐患点',
-    '18': '矿山施工',
-    '19': '工矿商贸',
-    '20': '气象灾害防御重点单位',
-    '21': '建筑工程',
-    '22': '储罐信息',
-    '23': '重大危险源',
-    '24': '客运站',
-    '25': '堆场',
-    '26': '旅游场所',
-    '27': '在建工地',
-    '28': '运输资源',
-    '29': '灾害信息员',
-    '30': '重点车辆信息',
-    '31': '江湖河库',
-    '32': '防溺水',
-    '33': '森林防火',
-    '34': '防灾救援',
-    '41': '救援队伍'
-  };
   let method = methodList[data.dataType];
   let title = !!titleList[data.dataType] ? titleList[data.dataType] : '信息';
   if (!method) return;

src/utils/gisUtils.ts

@@ -181,3 +181,9 @@ export const mergeGeoJsonPolygons = (geoJsonData) => {
   }
   return merged;
 };
+
+// 获取多个坐标点的中心
+export const getPointsCenter = (points) => {
+  const features = turf.points(points);
+  return turf.center(features);
+}

src/utils/olMap/olMap.ts

@@ -72,6 +72,7 @@ export class olMap {
   private maskLayer2;
   // 显示信息框
   private infoWindow;
+  private select;
 
   constructor(options) {
     this.options = options;
@@ -113,16 +114,21 @@ export class olMap {
     });
 
     // 创建选择交互
-    const select = new Select({
-      condition: click
+    this.select = new Select({
+      condition: click,
+      filter: (feature, layer) => {
+        // 只有vectorLayer图层可选择
+        return layer === this.vectorLayer;
+      }
     });
-    this.map.addInteraction(select);
+    this.map.addInteraction(this.select);
     // 监听Select交互的select事件
-    select.on('select', (event) => {
+    this.select.on('select', (event) => {
       const selectedFeatures = event.selected[0]; // 获取被选中的要素集合
-      if (selectedFeatures) {
-        const originalFeature = selectedFeatures.get('features')[0];
-        const size = selectedFeatures.get('features').length;
+      const features = selectedFeatures.get('features');
+      if (selectedFeatures && !!features) {
+        const originalFeature = features[0];
+        const size = features.length;
         if (size === 1) {
           // 设置新的样式（更换图标）
           selectedFeatures.setStyle(
@@ -136,12 +142,14 @@ export class olMap {
               })
             })
           );
+          const extData = originalFeature.get('extData');
+          options.onMarkerClick(extData);
         } else {
           // 聚合要素
           const currentZoom = this.map.getView().getZoom();
           this.map.getView().setZoom(currentZoom + 1);
           const points = [];
-          selectedFeatures.get('features').forEach(feature => {
+          features.forEach((feature) => {
             const geometry = feature.getGeometry(); // 获取要素的几何对象
             const type = geometry.getType(); // 获取几何类型
             if (type === 'Point') {
@@ -150,7 +158,10 @@ export class olMap {
           });
           const newFeature = getPointsCenter(points);
           this.map.getView().setCenter(newFeature.geometry.coordinates);
+          event.selected = [];
         }
+      } else {
+
       }
     });
   }
@@ -359,11 +370,10 @@ export class olMap {
         geometry: new Point([Number(point.longitude), Number(point.latitude)]),
         name: point.name,
         icon: point.icon,
-        image: point.image,
         imageHover: point.imageHover,
         size: point.size,
         pointer: true,
-        type: 'point'
+        extData: point
       });
       // 设置自定义属性
       feature.set('pointer', true);
@@ -420,8 +430,12 @@ export class olMap {
     this.map.addOverlay(this.infoWindow);
   }
 
-  hideInfo(e?: any) {
-
+  hideInfo(flag) {
+    this.map.removeOverlay(this.infoWindow);
+    this.infoWindow = null;
+    if (!!flag && this.select) {
+      this.select.clear();
+    }
   }
   /**
    *
@@ -462,6 +476,7 @@ export class olMap {
   }
   createVecByJson2(json, options) {
     if (!!this.maskLayer2) {
+      // this.map.addLayer(this.maskLayer);
       this.map.addLayer(this.maskLayer2);
     } else {
       this.maskLayer2 = new VectorLayer({
@@ -477,7 +492,7 @@ export class olMap {
         })
       });
       this.map.addLayer(this.maskLayer2);
-      // const layer = new VectorLayer({
+      // this.maskLayer = new VectorLayer({
       //   source: new VectorSource(),
       //   style: new Style({
       //     fill: new Fill({
@@ -507,9 +522,8 @@ export class olMap {
       // const convertFt = new Feature({
       //   geometry: polygonRing
       // });
-      // layer.getSource().addFeature(convertFt);
-      // this.maskLayerArr2.push(layer);
-      // this.map.addLayer(layer);
+      // this.maskLayer.getSource().addFeature(convertFt);
+      // this.map.addLayer(this.maskLayer);
       // 边界部分
       json.features.forEach((feature) => {
         if (feature.geometry.type === 'Polygon') {
@@ -596,6 +610,12 @@ export class olMap {
     }
   }
   removeMask3(isHide) {
+    if (this.maskLayer) {
+      this.map.removeLayer(this.maskLayer);
+      if (!isHide) {
+        this.maskLayer = [];
+      }
+    }
     if (this.maskLayer2) {
       this.map.removeLayer(this.maskLayer2);
       if (!isHide) {
@@ -662,4 +682,3 @@ export class olMap {
     return this.map;
   }
 }
-

src/views/globalMap/data/mapData.ts

@@ -4969,5 +4969,3 @@ export const pointDetailTemplate = {
     latitude: '纬度'
   }
 };
-
-export const creatDetailTemplate = (data, type) => {};

src/views/globalMap/index.vue

@@ -8,6 +8,9 @@
         :active-map="activeMap"
         :point-type="pointType"
         v-model:showMask="showMask"
+        @handle-show-video="handleShowVideo"
+        @handle-show-warehouse="handleShowWarehouse"
+        @handle-show-people="handleShowPeople"
       />
       <Map
         v-else