[Wip 0000] 首页地图数据结构重写

src/api/sys/map.ts

@@ -1,4 +1,5 @@
 import { useMineDepartmentStore } from '/@/store/modules/mine';
+import { findNode } from '/@/utils/helper/treeHelper';
 import { defHttp } from '/@/utils/http/axios';
 import { omitBy, isNil } from 'lodash-es';
 
@@ -15,49 +16,32 @@ export function getMarkers(params: any): Promise<any> {
 
   return defHttp.post({ url: Api.list, params: omitBy(params, isNil) }, { joinParamsToUrl: true }).then(({ records }) => {
     return mineStore.getDepartTree.reduce((array: any[], root) => {
-      const children = records.filter((e) => e.managementId === root.rawid);
-
+      // return array;
+      const children = records.filter((e) => {
+        return Boolean(
+          findNode([root], (node) => node.rawid === e.parentId, {
+            children: 'childDepart',
+          })
+        );
+      });
       if (!children.length) return array;
 
-      const gbMap = new Map([
-        // 西安
-        ['', '1566101'],
-        // 铜川
-        ['', '1566102'],
-        // 宝鸡
-        ['', '1566103'],
-        // 咸阳
-        ['', '1566104'],
-        // 渭南
-        ['', '1566105'],
-        // 延安
-        ['', '1566106'],
-        // 汉中
-        ['', '1566107'],
-        // 执法一处 - 榆林
-        ['223', '1566108'],
-        // 安康
-        ['', '1566109'],
-        // 商洛
-        ['', '1566111'],
-      ]);
-
-      const { latitude, longitude, areaId } = children[0];
+      const { latitude, longitude } = children[0];
 
       const ele = {
+        id: root.rawid,
         name: root.departName,
         radius: 10,
         managementName: root.departName,
         mineCode: children.map((c) => c.mineCode).join(','),
         lat: latitude,
         lng: longitude,
-        gb: gbMap.get(areaId),
         children: children.map((e) => {
           return {
             ...e,
+            rootId: root.rawid,
             lat: e.latitude,
             lng: e.longitude,
-            gb: gbMap.get(e.areaId),
           };
         }),
       };

src/layouts/default/feature/SimpleMap.vue

@@ -10,8 +10,8 @@
   import L from 'leaflet';
   import 'leaflet/dist/leaflet.css';
   import { Button } from 'ant-design-vue';
-  import { getGoafAlarmLevel, getMarkers } from '/@/api/sys/map';
-  import { DEFAULT_LAYER_ID, regionColorMap, tileLayerConfigs, generatePopupContent, getRootMarkerIcon } from './simpleMap.data';
+  import { getMarkers } from '/@/api/sys/map';
+  import { DEFAULT_LAYER_ID, regionColorMap, tileLayerConfigs, generatePopupContent, getRootMarkerIcon, GEOJSON_LAYER_ID } from './simpleMap.data';
   import { useAppStore } from '/@/store/modules/app';
   import { isEmpty } from '/@/utils/is';
   import { useRoute } from 'vue-router';
@@ -30,26 +30,27 @@
   // 图层组 Map（基于所有区域编码初始化）
   const layerMap = new Map<string, L.LayerGroup>([
     [DEFAULT_LAYER_ID, L.featureGroup()],
-    // 西安
-    ['1566101', L.featureGroup()],
-    // 铜川
-    ['1566102', L.featureGroup()],
-    // 宝鸡
-    ['1566103', L.featureGroup()],
-    // 咸阳
-    ['1566104', L.featureGroup()],
-    // 渭南
-    ['1566105', L.featureGroup()],
-    // 延安
-    ['1566106', L.featureGroup()],
-    // 汉中
-    ['1566107', L.featureGroup()],
-    // 榆林
-    ['1566108', L.featureGroup()],
-    // 安康
-    ['1566109', L.featureGroup()],
-    // 商洛
-    ['1566111', L.featureGroup()],
+    [GEOJSON_LAYER_ID, L.featureGroup()],
+    // // 西安
+    // ['1566101', L.featureGroup()],
+    // // 铜川
+    // ['1566102', L.featureGroup()],
+    // // 宝鸡
+    // ['1566103', L.featureGroup()],
+    // // 咸阳
+    // ['1566104', L.featureGroup()],
+    // // 渭南
+    // ['1566105', L.featureGroup()],
+    // // 延安
+    // ['1566106', L.featureGroup()],
+    // // 汉中
+    // ['1566107', L.featureGroup()],
+    // // 榆林
+    // ['1566108', L.featureGroup()],
+    // // 安康
+    // ['1566109', L.featureGroup()],
+    // // 商洛
+    // ['1566111', L.featureGroup()],
   ]);
 
   onMounted(async () => {
@@ -93,57 +94,61 @@
     const response = await fetch('/js/shanxi.geo.json');
     const ShanXiGeoJSON = await response.json();
 
-    layerMap.forEach((group, code) => {
-      const features = ShanXiGeoJSON.features.filter((feature: any) => {
-        if (code === DEFAULT_LAYER_ID) return true;
-        return feature.properties.gb.startsWith(code);
-      });
-
-      const geoJsonLayer = L.geoJSON(features, {
-        style(feature) {
-          const gb = feature.properties.gb.slice(0, -2);
-          return {
-            fillColor: regionColorMap[gb] || '#14baff',
-            fillOpacity: 0.2,
-            weight: 2,
-            opacity: 1,
-            color: '#ff9100',
-          };
-        },
-        onEachFeature(_, layer) {
-          layer.on({
-            mouseover: (e) => {
-              e.target.setStyle({ weight: 2, fillOpacity: 0.6 });
-              e.target.bringToFront();
-            },
-            mouseout: (e) => {
-              geoJsonLayer.resetStyle(e.target);
-            },
-          });
-        },
-      });
-
-      geoJsonLayer.addTo(group);
+    const geoJsonLayer = L.geoJSON(ShanXiGeoJSON, {
+      style(feature) {
+        const gb = feature.properties.gb.slice(0, -2);
+        return {
+          fillColor: regionColorMap[gb] || '#14baff',
+          fillOpacity: 0.2,
+          weight: 2,
+          opacity: 1,
+          color: '#ff9100',
+        };
+      },
+      onEachFeature(_, layer) {
+        layer.on({
+          mouseover: (e) => {
+            e.target.setStyle({ weight: 2, fillOpacity: 0.6 });
+            e.target.bringToFront();
+          },
+          mouseout: (e) => {
+            geoJsonLayer.resetStyle(e.target);
+          },
+        });
+      },
     });
+
+    map.addLayer(geoJsonLayer);
+    // geoJsonLayer.addTo(layerMap.get(GEOJSON_LAYER_ID));
+    // layerMap.forEach((group, code) => {
+    //   const features = ShanXiGeoJSON.features.filter((feature: any) => {
+    //     if (code === DEFAULT_LAYER_ID) return true;
+    //     return feature.properties.gb.startsWith(code);
+    //   });
+    // });
   }
 
   /** 初始化所有标记点 */
   async function initMarkers() {
-    const records = await getMarkers({ pageNo: 0, paseSize: 9999 });
-    const promises: Promise<void>[] = [];
+    const records = await getMarkers({ pageNo: 0, pageSize: 9999 });
 
-    records.forEach((item) => {
+    records.forEach((item, index) => {
+      if (!layerMap.has(item.id)) {
+        layerMap.set(item.id, L.featureGroup());
+      }
       // 创建根标记点
-      const iconConfig = getRootMarkerIcon(40, item.children.length, regionColorMap[item.gb]);
+      const iconConfig = getRootMarkerIcon(40, item.children.length, Object.values(regionColorMap)[index]);
+
       const marker = L.marker([item.lat, item.lng], {
         icon: L.divIcon(iconConfig),
         riseOnHover: true,
       }).on('click', () => {
         layerMap.forEach((group, code) => {
           map?.removeLayer(group);
-          if (code === item.gb) {
-            map?.addLayer(group);
-            map?.flyToBounds(group.getBounds());
+          if (code === item.id) {
+            // map?.addLayer(group);
+            // map?.flyToBounds(group.getBounds());
+            map?.flyToBounds(layerMap.get(item.id).getBounds());
           }
         });
         appStore.setSimpleMapParams({ mineCode: item.mineCode });
@@ -152,20 +157,15 @@
 
       // 创建子标记点
       if (!item.children.length) return;
+
       item.children.forEach((child: any) => {
-        promises.push(
-          getGoafAlarmLevel({ mineCode: child.mineCode }).then((result) => {
-            const popupContent = generatePopupContent(result);
-            const childMarker = L.marker([child.lat, child.lng], { riseOnHover: false }).bindPopup(popupContent);
-            if (layerMap.has(child.gb)) {
-              childMarker.addTo(layerMap.get(child.gb)!);
-            }
-          })
-        );
+        const popupContent = generatePopupContent(child);
+        const childMarker = L.marker([child.lat, child.lng]).bindPopup(popupContent);
+        if (layerMap.has(child.rootId)) {
+          childMarker.addTo(layerMap.get(child.rootId)!);
+        }
       });
     });
-
-    await Promise.all(promises);
   }
 
   /** 重置视图到默认图层 */

src/layouts/default/feature/simpleMap.data.ts

@@ -3,6 +3,7 @@ import { StatusColorEnum } from '/@/enums/jeecgEnum';
 
 // 默认图层ID
 export const DEFAULT_LAYER_ID = 'default';
+export const GEOJSON_LAYER_ID = 'GEO';
 
 // 区域颜色映射（包含所有需要用到的编码）
 export const regionColorMap: Record<string, string> = {