[Feat 0000] 首页地图的GeoJSON图层样式进行更新，支持预警等级分级和高亮功能

src/api/sys/map.ts

@@ -0,0 +1,18 @@
+import { defHttp } from '/@/utils/http/axios';
+import { omitBy, isNil } from 'lodash-es';
+
+enum Api {
+  list = '/province/mineData/getMineData',
+  getGoafAlarmLevel = '/province/homeData/getGoafAlarmLevel',
+}
+/**
+ * 列表接口
+ * @param params
+ */
+export function list(params: any): Promise<{ records: any[] }> {
+  return defHttp.post({ url: Api.list, params: omitBy(params, isNil) }, { joinParamsToUrl: true });
+}
+
+export function getGoafAlarmLevel(params: any): Promise<any> {
+  return defHttp.post({ url: Api.getGoafAlarmLevel, params: omitBy(params, isNil) }, { joinParamsToUrl: true });
+}

src/layouts/default/feature/SimpleMap.vue

@@ -57,9 +57,7 @@
   });
 
   onUnmounted(() => {
-    if (map) {
-      map.remove();
-    }
+    map && map.remove();
   });
 
   // 初始化地图
@@ -97,10 +95,67 @@
   async function initGeoJSON() {
     const response = await fetch('/js/shanxi.geo.json');
     const ShanXiGeoJSON = await response.json();
-    L.geoJSON(ShanXiGeoJSON, {
-      style: function () {
-        return { color: '#ff9100' };
-      },
+
+    const getFeatureStyle = (feature) => {
+      const getFeatureColor = (feature) => {
+        const gb = feature.properties.gb;
+
+        const map = {
+          1566101: '#14baff',
+          1566102: '#14baff',
+          1566103: '#ffff12',
+          1566104: '#ffff12',
+          1566105: '#ffab12',
+          1566106: '#ffab12',
+          1566107: '#fe1414',
+        };
+
+        for (const key in map) {
+          if (gb && gb.startsWith(key)) {
+            return map[key];
+          }
+        }
+
+        return '#14baff';
+      };
+
+      return {
+        fillColor: getFeatureColor(feature),
+        fillOpacity: 0.2,
+        weight: 2,
+        opacity: 1,
+        color: '#ff9100',
+      };
+    };
+
+    const getFeatureEventHandlers = (feature, layer) => {
+      const highlightFeature = (e) => {
+        // console.log('debug sss', e);
+        // if (feature.properties && feature.properties.name === '陕西省') return;
+        const layer = e.target;
+
+        layer.setStyle({
+          weight: 2,
+          fillOpacity: 0.6,
+        });
+
+        layer.bringToFront();
+      };
+
+      const resetHighlight = (e) => {
+        geoJSON.resetStyle(e.target);
+      };
+
+      layer.on({
+        mouseover: highlightFeature,
+        mouseout: resetHighlight,
+        // click: zoomToFeature,
+      });
+    };
+
+    const geoJSON = L.geoJSON(ShanXiGeoJSON, {
+      style: getFeatureStyle,
+      onEachFeature: getFeatureEventHandlers,
     }).addTo(map);
   }