feat: 更新地图

templates/index.html

@@ -469,28 +469,48 @@
                 source: clusterSource,
                 style: function(feature) {
                     const size = feature.get('features').length;
+                    const zoom = map.getView().getZoom();
+
+                    // 低缩放：强制聚合显示（不显示单点详细标签）
+                    if (zoom < CLUSTER_THRESHOLD) {
+                        if (size > 1) {
+                            return new ol.style.Style({
+                                image: new ol.style.Circle({
+                                    radius: 16,
+                                    fill: new ol.style.Fill({ color: '#007bff' }),
+                                    stroke: new ol.style.Stroke({ color: '#fff', width: 2 })
+                                }),
+                                text: new ol.style.Text({
+                                    text: String(size),
+                                    fill: new ol.style.Fill({ color: '#fff' }),
+                                    font: 'bold 12px Arial'
+                                })
+                            });
+                        }
+                        // size === 1 时，仅显示小点，不显示文本
+                        return new ol.style.Style({
+                            image: new ol.style.Circle({
+                                radius: 4,
+                                fill: new ol.style.Fill({ color: '#6c757d' }),
+                                stroke: new ol.style.Stroke({ color: '#fff', width: 1 })
+                            })
+                        });
+                    }
+
+                    // 高缩放：显示单点详情；若仍为聚合，继续显示聚合圈
                     if (size === 1) {
-                        // 单个站点样式
                         return createStationStyle(feature.get('features')[0]);
                     }
-                    // 集群样式
                     return new ol.style.Style({
                         image: new ol.style.Circle({
-                            radius: 15,
-                            fill: new ol.style.Fill({
-                                color: '#007bff'
-                            }),
-                            stroke: new ol.style.Stroke({
-                                color: '#fff',
-                                width: 2
-                            })
+                            radius: 14,
+                            fill: new ol.style.Fill({ color: '#007bff' }),
+                            stroke: new ol.style.Stroke({ color: '#fff', width: 2 })
                         }),
                         text: new ol.style.Text({
-                            text: size.toString(),
-                            fill: new ol.style.Fill({
-                                color: '#fff'
-                            }),
-                            font: '12px Arial'
+                            text: String(size),
+                            fill: new ol.style.Fill({ color: '#fff' }),
+                            font: 'bold 12px Arial'
                         })
                     });
                 }
@@ -513,10 +533,15 @@
                 })
             });
 
+            // 初始化时根据当前缩放设置集群距离
+            updateClusterDistance(map.getView().getZoom());
+
             // 监听缩放事件
             map.getView().on('change:resolution', function() {
                 const zoom = map.getView().getZoom();
                 updateClusterDistance(zoom);
+                // 强制样式刷新以应用显示/隐藏规则
+                clusterLayer.changed();
             });
 
             // 添加点击事件
@@ -588,7 +613,9 @@
 
         // 更新集群距离
         function updateClusterDistance(zoom) {
-            const distance = zoom < CLUSTER_THRESHOLD ? 40 : 0;
+            // 动态调整聚合距离，让低缩放更容易聚合
+            let distance;
+            if (zoom < 6) distance = 100; else if (zoom < 8) distance = 70; else if (zoom < 11) distance = 40; else distance = 0;
             clusterSource.setDistance(distance);
         }
 
@@ -597,10 +624,9 @@
             const isOnline = new Date(feature.get('lastUpdate')) > new Date(Date.now() - 5*60*1000);
             const labelText = [
                 `十进制ID: ${feature.get('decimalId') || '未知'}`,
-                `十六进制ID: ${feature.get('stationId').split('-')[1] || '未知'}`,
-                `名称: ${feature.get('name') || '未知'}`,
+                `北斗设备ID: ${feature.get('name') || '未知'}`,
                 `位置: ${feature.get('location') || '未知'}`
-            ].join('\n');
+            ].join('|');
 
             return new ol.style.Style({
                 image: new ol.style.Circle({
@@ -845,12 +871,13 @@
             });
         }
 
-        // 显示数据表格
+        // 显示数据表格（按时间倒序）
         function displayTable(data) {
             const tbody = document.getElementById('tableBody');
             tbody.innerHTML = '';
 
-            data.forEach(item => {
+            const rows = [...data].reverse();
+            rows.forEach(item => {
                 const row = document.createElement('tr');
                 row.innerHTML = `
                     <td>${item.date_time}</td>