Files
planet/frontend/public/earth/js/ui.js
rayd1o c82e1d5a04 fix: 修复3D地球坐标映射多个严重bug
## Bug修复详情

### 1. 致命错误:球面距离计算 (calculateDistance)
- 问题:使用勾股定理计算经纬度距离,在球体表面完全错误
- 修复:改用Haversine公式计算球面大圆距离
- 影响:赤道1度=111km,极地1度=19km,原计算误差巨大

### 2. 经度范围规范化 (vector3ToLatLon)
- 问题:Math.atan2返回[-180°,180°],转换后可能超出标准范围
- 修复:添加while循环规范化到[-180, 180]区间
- 影响:避免本初子午线附近返回360°的异常值

### 3. 屏幕坐标转换支持非全屏 (screenToEarthCoords)
- 问题:假设Canvas永远全屏,非全屏时点击偏移严重
- 修复:新增domElement参数,使用getBoundingClientRect()计算相对坐标
- 影响:嵌入式3D地球组件也能精准拾取

### 4. 地球旋转时经纬度映射错误
- 问题:Raycaster返回世界坐标,未考虑地球自转
- 修复:使用earth.worldToLocal()转换到本地坐标空间
- 影响:地球旋转时经纬度显示正确跟随

## 新增功能

- CelesTrak卫星数据采集器
- Space-Track卫星数据采集器
- 卫星可视化模块(500颗,实时SGP4轨道计算)
- 海底光缆悬停显示info-card
- 统一info-card组件
- 工具栏按钮(Stellarium风格)
- 缩放控制(百分比显示)
- Docker volume映射(代码热更新)

## 文件变更

- utils.js: 坐标转换核心逻辑修复
- satellites.js: 新增卫星可视化
- cables.js: 悬停交互支持
- main.js: 悬停/锁定逻辑
- controls.js: 工具栏UI
- info-card.js: 统一卡片组件
- docker-compose.yml: volume映射
- restart.sh: 简化重启脚本
2026-03-17 04:10:24 +08:00

81 lines
2.9 KiB
JavaScript

// ui.js - UI update functions
// Show status message
export function showStatusMessage(message, type = 'info') {
const statusEl = document.getElementById('status-message');
statusEl.textContent = message;
statusEl.className = `status-message ${type}`;
statusEl.style.display = 'block';
setTimeout(() => {
statusEl.style.display = 'none';
}, 3000);
}
// Update coordinates display
export function updateCoordinatesDisplay(lat, lon, alt = 0) {
document.getElementById('longitude-value').textContent = lon.toFixed(2) + '°';
document.getElementById('latitude-value').textContent = lat.toFixed(2) + '°';
document.getElementById('mouse-coords').textContent =
`鼠标: ${lat.toFixed(2)}°, ${lon.toFixed(2)}°`;
}
// Update zoom display
export function updateZoomDisplay(zoomLevel, distance) {
const percent = Math.round(zoomLevel * 100);
document.getElementById('zoom-value').textContent = percent + '%';
document.getElementById('zoom-level').textContent = '缩放: ' + percent + '%';
document.getElementById('zoom-slider').value = zoomLevel;
document.getElementById('camera-distance').textContent = distance + ' km';
}
// Update cable details
export function updateCableDetails(cable) {
document.getElementById('cable-name').textContent = cable.name || 'Unknown';
document.getElementById('cable-owner').textContent = cable.owner || '-';
document.getElementById('cable-status').textContent = cable.status || '-';
document.getElementById('cable-length').textContent = cable.length || '-';
document.getElementById('cable-coords').textContent = cable.coords || '-';
document.getElementById('cable-rfs').textContent = cable.rfs || '-';
}
// Update earth stats
export function updateEarthStats(stats) {
document.getElementById('cable-count').textContent = stats.cableCount || 0;
document.getElementById('landing-point-count').textContent = stats.landingPointCount || 0;
document.getElementById('terrain-status').textContent = stats.terrainOn ? '开启' : '关闭';
document.getElementById('texture-quality').textContent = stats.textureQuality || '8K 卫星图';
}
// Show/hide loading
export function setLoading(loading) {
const loadingEl = document.getElementById('loading');
loadingEl.style.display = loading ? 'block' : 'none';
}
// Show tooltip
export function showTooltip(x, y, content) {
const tooltip = document.getElementById('tooltip');
tooltip.innerHTML = content;
tooltip.style.left = x + 'px';
tooltip.style.top = y + 'px';
tooltip.style.display = 'block';
}
// Hide tooltip
export function hideTooltip() {
document.getElementById('tooltip').style.display = 'none';
}
// Show error message
export function showError(message) {
const errorEl = document.getElementById('error-message');
errorEl.textContent = message;
errorEl.style.display = 'block';
}
// Hide error message
export function hideError() {
document.getElementById('error-message').style.display = 'none';
}