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: 简化重启脚本
This commit is contained in:
rayd1o
@@ -3,12 +3,13 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>3D球形地图 - 海底电缆系统</title>
|
||||
<title>智能星球计划 - 现实层宇宙全息感知</title>
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "https://esm.sh/three@0.128.0",
|
||||
"simplex-noise": "https://esm.sh/simplex-noise@4.0.1"
|
||||
"simplex-noise": "https://esm.sh/simplex-noise@4.0.1",
|
||||
"satellite.js": "https://esm.sh/satellite.js@5.0.0"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -20,58 +21,40 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="zoom-toolbar">
|
||||
<button id="zoom-out" class="zoom-btn">−</button>
|
||||
<span id="zoom-value" class="zoom-percent">100%</span>
|
||||
<button id="zoom-in" class="zoom-btn">+</button>
|
||||
<input type="range" id="zoom-slider" min="0.5" max="5" step="0.01" value="1">
|
||||
</div>
|
||||
|
||||
<div id="info-panel">
|
||||
<h1>全球海底电缆系统</h1>
|
||||
<div class="subtitle">3D地形球形地图可视化 | 高分辨率卫星图</div>
|
||||
<div class="zoom-controls">
|
||||
<div style="width: 100%;">
|
||||
<h3 style="color:#4db8ff; margin-bottom:10px; font-size:1.1rem;">缩放控制</h3>
|
||||
<div class="zoom-buttons">
|
||||
<button id="zoom-in">放大</button>
|
||||
<button id="zoom-out">缩小</button>
|
||||
<button id="zoom-reset">重置</button>
|
||||
</div>
|
||||
<div class="slider-container" style="margin-top: 10px;">
|
||||
<div class="slider-label">
|
||||
<span>缩放级别:</span>
|
||||
<span id="zoom-value">1.0x</span>
|
||||
</div>
|
||||
<input type="range" id="zoom-slider" min="0.5" max="5" step="0.1" value="1">
|
||||
</div>
|
||||
<h1>智能星球计划</h1>
|
||||
<div class="subtitle">现实层宇宙全息感知系统 | 卫星 · 海底光缆 · 算力基础设施</div>
|
||||
|
||||
<div id="info-card" class="info-card" style="display: none;">
|
||||
<div class="info-card-header">
|
||||
<span class="info-card-icon" id="info-card-icon">🛰️</span>
|
||||
<h3 id="info-card-title">详情</h3>
|
||||
</div>
|
||||
<div id="info-card-content"></div>
|
||||
</div>
|
||||
<div id="cable-details" class="cable-info">
|
||||
<h3 id="cable-name">点击电缆查看详情</h3>
|
||||
<div class="cable-property">
|
||||
<span class="property-label">所有者:</span>
|
||||
<span id="cable-owner" class="property-value">-</span>
|
||||
</div>
|
||||
<div class="cable-property">
|
||||
<span class="property-label">状态:</span>
|
||||
<span id="cable-status" class="property-value">-</span>
|
||||
</div>
|
||||
<div class="cable-property">
|
||||
<span class="property-label">长度:</span>
|
||||
<span id="cable-length" class="property-value">-</span>
|
||||
</div>
|
||||
<div class="cable-property">
|
||||
<span class="property-label">经纬度:</span>
|
||||
<span id="cable-coords" class="property-value">-</span>
|
||||
</div>
|
||||
<div class="cable-property">
|
||||
<span class="property-label">投入使用时间:</span>
|
||||
<span id="cable-rfs" class="property-value">-</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<button id="rotate-toggle">暂停旋转</button>
|
||||
<button id="reset-view">重置视图</button>
|
||||
<button id="toggle-terrain">显示地形</button>
|
||||
<button id="reload-data">重新加载数据</button>
|
||||
</div>
|
||||
|
||||
<div id="error-message" class="error-message"></div>
|
||||
</div>
|
||||
|
||||
<div id="control-toolbar">
|
||||
<div class="toolbar-items">
|
||||
<button id="rotate-toggle" class="toolbar-btn" title="自动旋转">🔄<span class="tooltip">自动旋转</span></button>
|
||||
<button id="reset-view" class="toolbar-btn" title="重置视图">🎯<span class="tooltip">重置视图</span></button>
|
||||
<button id="toggle-terrain" class="toolbar-btn" title="显示/隐藏地形">⛰️<span class="tooltip">显示/隐藏地形</span></button>
|
||||
<button id="toggle-satellites" class="toolbar-btn" title="显示/隐藏卫星">🛰️<span class="tooltip">显示/隐藏卫星</span></button>
|
||||
<button id="toggle-trails" class="toolbar-btn" title="显示/隐藏轨迹">✨<span class="tooltip">显示/隐藏轨迹</span></button>
|
||||
<button id="reload-data" class="toolbar-btn" title="重新加载数据">🔃<span class="tooltip">重新加载数据</span></button>
|
||||
</div>
|
||||
<button id="toolbar-toggle" class="toolbar-btn" title="展开/收起工具栏"><span class="toggle-circle"></span></button>
|
||||
</div>
|
||||
|
||||
<div id="coordinates-display">
|
||||
<h3 style="color:#4db8ff; margin-bottom:8px; font-size:1.1rem;">坐标信息</h3>
|
||||
<div class="coord-item">
|
||||
@@ -124,6 +107,10 @@
|
||||
<span class="stats-label">地形:</span>
|
||||
<span class="stats-value" id="terrain-status">开启</span>
|
||||
</div>
|
||||
<div class="stats-item">
|
||||
<span class="stats-label">卫星:</span>
|
||||
<span class="stats-value" id="satellite-count">0 颗</span>
|
||||
</div>
|
||||
<div class="stats-item">
|
||||
<span class="stats-label">视角距离:</span>
|
||||
<span class="stats-value" id="camera-distance">300 km</span>
|
||||
|
||||
Reference in New Issue
Block a user