diff --git a/templates/index.html b/templates/index.html index b79251d..06a9219 100644 --- a/templates/index.html +++ b/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 = ` ${item.date_time}