Update script.js

script.js

@@ -547,51 +547,6 @@ function setupPredictionMode(map) {
     }
 }
 
-// === 新增：绘制 AI 模型的 3x3 空间感知网格 ===
-// function updatePredictionGrid(map, centerLng, centerLat) {
-//     const features = [];
-//     const step = 0.002; // 与后端 Python 的 offset = 0.002 对齐
-//     const gridSize = 3;
-//     const offset = Math.floor(gridSize / 2);
-
-//     for (let i = 0; i < gridSize; i++) {
-//         for (let j = 0; j < gridSize; j++) {
-//             // 精确还原 Python 中切片的中心坐标
-//             const cLng = centerLng + (j - offset) * step;
-//             const cLat = centerLat - (i - offset) * step;
-//             const w = step / 2;
-
-//             features.push({
-//                 'type': 'Feature',
-//                 'geometry': {
-//                     'type': 'Polygon',
-//                     'coordinates': [[
-//                         [cLng - w, cLat - w], [cLng + w, cLat - w],
-//                         [cLng + w, cLat + w], [cLng - w, cLat + w],
-//                         [cLng - w, cLat - w]
-//                     ]]
-//                 }
-//             });
-//         }
-//     }
-
-//     const geojson = { 'type': 'FeatureCollection', 'features': features };
-
-//     if (map.getSource('pred-grid-source')) {
-//         map.getSource('pred-grid-source').setData(geojson);
-//     } else {
-//         map.addSource('pred-grid-source', { type: 'geojson', data: geojson });
-//         map.addLayer({
-//             'id': 'pred-grid-fill', 'type': 'fill', 'source': 'pred-grid-source',
-//             'paint': { 'fill-color': '#f39c12', 'fill-opacity': 0.1 }
-//         });
-//         map.addLayer({
-//             'id': 'pred-grid-line', 'type': 'line', 'source': 'pred-grid-source',
-//             'paint': { 'line-color': '#f39c12', 'line-width': 2, 'line-dasharray': [2, 2] }
-//         });
-//     }
-// }
-
 // Dynamic 3x3 grid matching the 256px satellite patch bounds
 function updatePredictionGrid(map, centerLng, centerLat) {
     const features = [];
@@ -765,7 +720,6 @@ function setupFilterMenu(map, statsColor) {
     const menu = document.getElementById('filter-menu');
     if (!btn || !menu) return;
 
-    // Define stability levels based on Standard Deviation thresholds
     const levels = [
         { label: "Level 5: Highly Unstable", color: "#e84393", filter: ['>=', 'load_std', statsColor.t4] },
         { label: "Level 4: Volatile",        color: "#fd79a8", filter: ['all', ['>=', 'load_std', statsColor.t3], ['<', 'load_std', statsColor.t4]] },
@@ -775,24 +729,38 @@ function setupFilterMenu(map, statsColor) {
     ];
 
     menu.innerHTML = ''; 
-    levels.forEach((lvl) => {
+    levels.forEach((lvl, index) => {
         const item = document.createElement('div');
         item.className = 'filter-item';
         item.innerHTML = `<div class="color-box" style="background:${lvl.color}; box-shadow: 0 0 5px ${lvl.color};"></div><span>${lvl.label}</span>`;
+        
+        // Muti Select
         item.onclick = (e) => {
             e.stopPropagation(); 
-            if (item.classList.contains('selected')) {
-                item.classList.remove('selected'); 
-                applyFilter(map, null); 
+            item.classList.toggle('selected');
+            const activeFilters = [];
+            const allItems = menu.querySelectorAll('.filter-item');
+            allItems.forEach((el, i) => {
+                if (el.classList.contains('selected')) {
+                    activeFilters.push(levels[i].filter);
+                }
+            });
+            if (activeFilters.length === 0) {
+                applyFilter(map, null);
             } else {
-                document.querySelectorAll('.filter-item').forEach(el => el.classList.remove('selected'));
-                item.classList.add('selected'); 
-                applyFilter(map, lvl.filter);
+                const combinedFilter = ['any', ...activeFilters];
+                applyFilter(map, combinedFilter);
             }
         };
         menu.appendChild(item);
     });
 
+    btn.onclick = (e) => { e.stopPropagation(); menu.classList.toggle('active'); };
+    document.addEventListener('click', (e) => { 
+        if (!menu.contains(e.target) && !btn.contains(e.target)) menu.classList.remove('active'); 
+    });
+}
+
     // Toggle menu visibility
     btn.onclick = (e) => { e.stopPropagation(); menu.classList.toggle('active'); };
     document.addEventListener('click', (e) => { if (!menu.contains(e.target) && !btn.contains(e.target)) menu.classList.remove('active'); });