220 lines
8.9 KiB
HTML
220 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>智能星球计划 - 现实层宇宙全息感知</title>
|
||
<script type="importmap">
|
||
{
|
||
"imports": {
|
||
"three": "https://esm.sh/three@0.128.0",
|
||
"simplex-noise": "https://esm.sh/simplex-noise@4.0.1",
|
||
"satellite.js": "https://esm.sh/satellite.js@5.0.0"
|
||
}
|
||
}
|
||
</script>
|
||
<link rel="stylesheet" href="css/base.css">
|
||
<link rel="stylesheet" href="css/info-panel.css">
|
||
<link rel="stylesheet" href="css/coordinates-display.css">
|
||
<link rel="stylesheet" href="css/legend.css">
|
||
<link rel="stylesheet" href="css/earth-stats.css">
|
||
</head>
|
||
<body>
|
||
<div id="container">
|
||
<div id="info-panel">
|
||
<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="error-message" class="error-message"></div>
|
||
</div>
|
||
|
||
<div id="right-toolbar-group">
|
||
<div id="zoom-toolbar">
|
||
<button id="reset-view" class="zoom-btn" title="重置视角">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<circle cx="12" cy="12" r="5"></circle>
|
||
<path d="M12 3v4"></path>
|
||
<path d="M12 17v4"></path>
|
||
<path d="M3 12h4"></path>
|
||
<path d="M17 12h4"></path>
|
||
<circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"></circle>
|
||
</svg>
|
||
<span class="tooltip">重置视角</span>
|
||
</button>
|
||
<button id="zoom-in" class="zoom-btn" title="放大">+<span class="tooltip">放大</span></button>
|
||
<span id="zoom-value" class="zoom-percent" title="重置缩放到100%">100%<span class="tooltip">重置缩放到100%</span></span>
|
||
<button id="zoom-out" class="zoom-btn" title="缩小">−<span class="tooltip">缩小</span></button>
|
||
</div>
|
||
|
||
<div id="control-toolbar">
|
||
<div class="toolbar-items">
|
||
<button id="rotate-toggle" class="toolbar-btn" title="自动旋转">
|
||
<span class="icon rotate-icon icon-pause" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24">
|
||
<path d="M9 6v12"></path>
|
||
<path d="M15 6v12"></path>
|
||
</svg>
|
||
</span>
|
||
<span class="icon rotate-icon icon-play" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24">
|
||
<path d="M8 6.5v11l9-5.5z" fill="currentColor" stroke="none"></path>
|
||
</svg>
|
||
</span>
|
||
<span class="tooltip">自动旋转</span>
|
||
</button>
|
||
<button id="toggle-cables" class="toolbar-btn active" title="显示/隐藏线缆">
|
||
<span class="icon" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24">
|
||
<circle cx="12" cy="12" r="6.5"></circle>
|
||
<path d="M5.8 12h12.4"></path>
|
||
<path d="M12 5.8a8.5 8.5 0 0 1 0 12.4"></path>
|
||
<path d="M8 16c2-1.8 6-1.8 8 0"></path>
|
||
</svg>
|
||
</span>
|
||
<span class="tooltip">隐藏线缆</span>
|
||
</button>
|
||
<button id="toggle-terrain" class="toolbar-btn" title="显示/隐藏地形">
|
||
<span class="icon" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24">
|
||
<path d="M3 18h18"></path>
|
||
<path d="M4.5 18l5-7 3 4 3.5-6 3.5 9"></path>
|
||
<path d="M11 18l2-3 1.5 2"></path>
|
||
</svg>
|
||
</span>
|
||
<span class="tooltip">显示/隐藏地形</span>
|
||
</button>
|
||
<button id="toggle-satellites" class="toolbar-btn" title="显示/隐藏卫星">
|
||
<span class="icon" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24">
|
||
<rect x="10" y="10" width="4" height="4" rx="0.8"></rect>
|
||
<rect x="4" y="9" width="4" height="6" rx="0.8"></rect>
|
||
<rect x="16" y="9" width="4" height="6" rx="0.8"></rect>
|
||
<path d="M8 12h2"></path>
|
||
<path d="M14 12h2"></path>
|
||
<path d="M12 8V6"></path>
|
||
<path d="M11 6h2"></path>
|
||
<path d="M12 14v4"></path>
|
||
<path d="M10 18h4"></path>
|
||
</svg>
|
||
</span>
|
||
<span class="tooltip">显示卫星</span>
|
||
</button>
|
||
<button id="toggle-trails" class="toolbar-btn active" title="显示/隐藏轨迹">
|
||
<span class="icon" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24">
|
||
<path d="M5 17h7"></path>
|
||
<path d="M7 13.5h8"></path>
|
||
<path d="M10 10h6"></path>
|
||
<circle cx="17.5" cy="8.5" r="2.2" fill="currentColor" stroke="none"></circle>
|
||
<path d="M15.8 10.2l2.8-2.8"></path>
|
||
</svg>
|
||
</span>
|
||
<span class="tooltip">隐藏轨迹</span>
|
||
</button>
|
||
<button id="reload-data" class="toolbar-btn" title="重新加载数据">
|
||
<span class="icon" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24">
|
||
<path d="M20 5v5h-5"></path>
|
||
<path d="M20 10a8 8 0 1 0 2 5"></path>
|
||
</svg>
|
||
</span>
|
||
<span class="tooltip">重新加载数据</span>
|
||
</button>
|
||
</div>
|
||
<button id="toolbar-toggle" class="toolbar-btn" title="展开/收起工具栏">
|
||
<span class="toggle-arrow" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24">
|
||
<path d="M15 6l-6 6 6 6"></path>
|
||
</svg>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="coordinates-display">
|
||
<h3 style="color:#4db8ff; margin-bottom:8px; font-size:1.1rem;">坐标信息</h3>
|
||
<div class="coord-item">
|
||
<span class="coord-label">经度:</span>
|
||
<span id="longitude-value" class="coord-value">0.00°</span>
|
||
</div>
|
||
<div class="coord-item">
|
||
<span class="coord-label">纬度:</span>
|
||
<span id="latitude-value" class="coord-value">0.00°</span>
|
||
</div>
|
||
<div id="zoom-level">缩放: 1.0x</div>
|
||
<div class="mouse-coords" id="mouse-coords">鼠标位置: 无</div>
|
||
</div>
|
||
|
||
<div id="legend">
|
||
<h3 style="color:#4db8ff; margin-bottom:10px; font-size:1.1rem;">图例</h3>
|
||
<div class="legend-item">
|
||
<div class="legend-color" style="background-color: #ff4444;"></div>
|
||
<span>Americas II</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-color" style="background-color: #44ff44;"></div>
|
||
<span>AU Aleutian A</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-color" style="background-color: #4444ff;"></div>
|
||
<span>AU Aleutian B</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-color" style="background-color: #ffff44;"></div>
|
||
<span>其他电缆</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="earth-stats">
|
||
<h3 style="color:#4db8ff; margin-bottom:10px; font-size:1.1rem;">地球信息</h3>
|
||
<div class="stats-item">
|
||
<span class="stats-label">电缆系统:</span>
|
||
<span class="stats-value" id="cable-count">0个</span>
|
||
</div>
|
||
<div class="stats-item">
|
||
<span class="stats-label">状态:</span>
|
||
<span class="stats-value" id="cable-status-summary">-</span>
|
||
</div>
|
||
<div class="stats-item">
|
||
<span class="stats-label">登陆点:</span>
|
||
<span class="stats-value" id="landing-point-count">0个</span>
|
||
</div>
|
||
<div class="stats-item">
|
||
<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>
|
||
</div>
|
||
<div class="stats-item">
|
||
<span class="stats-label">纹理质量:</span>
|
||
<span class="stats-value" id="texture-quality">8K 卫星图</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="loading">
|
||
<div id="loading-spinner"></div>
|
||
<div id="loading-title">正在初始化全球态势数据...</div>
|
||
<div id="loading-subtitle" style="font-size:0.9rem; margin-top:10px; color:#aaa;">同步卫星、海底光缆与登陆点数据</div>
|
||
</div>
|
||
<div id="status-message" class="status-message" style="display: none;"></div>
|
||
<div id="tooltip" class="tooltip"></div>
|
||
</div>
|
||
|
||
<script type="module" src="js/main.js"></script>
|
||
</body>
|
||
</html>
|