澶╃溂娈?- 澶╁杩借釜绔?/title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Microsoft YaHei', sans-serif; background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 50%, #0a1a2a 100%); color: #e0e0ff; min-height: 100vh; } .header { text-align: center; padding: 25px 20px; background: rgba(0,0,0,0.4); border-bottom: 1px solid rgba(255,215,0,0.3); position: relative; } .header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #ffd700, #ff6b6b, #4ecdc4, transparent); } .header h1 { background: linear-gradient(90deg, #ffd700, #ff6b6b, #4ecdc4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 2.2em; letter-spacing: 8px; } .subtitle { color: rgba(255,215,0,0.7); margin-top: 8px; font-size: 0.95em; letter-spacing: 2px; } .container { max-width: 1400px; margin: 0 auto; padding: 20px; } #map { width: 100%; height: 450px; border-radius: 15px; border: 2px solid rgba(255,215,0,0.2); box-shadow: 0 0 30px rgba(255,215,0,0.1); } .info-row { display: flex; gap: 20px; margin-top: 20px; } .cards { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .card { background: rgba(255,255,255,0.03); border-radius: 12px; padding: 15px; border: 1px solid rgba(255,215,0,0.15); transition: all 0.3s ease; } .card:hover { background: rgba(255,215,0,0.08); border-color: rgba(255,215,0,0.4); } .card h3 { color: rgba(255,215,0,0.8); font-size: 0.85em; margin-bottom: 8px; } .card .value { font-size: 1.4em; color: #4ecdc4; font-weight: bold; } .card .unit { font-size: 0.6em; color: rgba(255,255,255,0.5); margin-left: 3px; } .sat-panel { width: 320px; background: rgba(255,255,255,0.03); border-radius: 15px; padding: 15px; border: 1px solid rgba(255,215,0,0.15); } .sat-panel h3 { color: #ffd700; margin-bottom: 12px; font-size: 1em; display: flex; align-items: center; gap: 8px; } .sat-panel h3::before { content: '鈼?; color: #4ecdc4; } .sat-list { max-height: 350px; overflow-y: auto; } .sat-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: rgba(0,0,0,0.2); border-radius: 8px; margin-bottom: 6px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; } .sat-item:hover { background: rgba(255,215,0,0.1); border-color: rgba(255,215,0,0.3); } .sat-item.active { background: rgba(255,215,0,0.15); border-color: #ffd700; } .sat-name { color: #fff; font-size: 0.9em; } .sat-alt { font-size: 0.75em; color: rgba(255,255,255,0.5); } .sat-status { width: 8px; height: 8px; background: #4ecdc4; border-radius: 50%; box-shadow: 0 0 8px #4ecdc4; animation: pulse 2s infinite; } .sat-status.warning { background: #ffd700; box-shadow: 0 0 8px #ffd700; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .footer { text-align: center; padding: 15px; color: rgba(255,255,255,0.35); font-size: 0.85em; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 20px; } .time-display { position: absolute; top: 15px; right: 20px; color: rgba(255,255,255,0.6); font-size: 0.85em; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 3px; } ::-webkit-scrollbar-thumb { background: rgba(255,215,0,0.3); border-radius: 3px; } </style> </head> <body> <div class="header"> <h1>澶?鐪?娈?/h1> <p class="subtitle">澶╁杩借釜路杞ㄩ亾鎺ㄦ紨路澶╂暟瑙傛祴</p> <div class="time-display" id="time">--</div> </div> <div class="container"> <div id="map"></div> <div class="info-row"> <div class="cards"> <div class="card"> <h3>缁忓害</h3> <div class="value" id="lon">---.<span class="unit">掳</span></div> </div> <div class="card"> <h3>绾害</h3> <div class="value" id="lat">---.<span class="unit">掳</span></div> </div> <div class="card"> <h3>杞ㄩ亾楂樺害</h3> <div class="value" id="alt">---<span class="unit">km</span></div> </div> <div class="card"> <h3>杩愯閫熷害</h3> <div class="value">7.66<span class="unit">km/s</span></div> </div> <div class="card"> <h3>杞ㄩ亾鍛ㄦ湡</h3> <div class="value">92.6<span class="unit">鍒嗛挓</span></div> </div> <div class="card"> <h3>杩囧棰勬祴</h3> <div class="value" id="pass">璁＄畻涓?/div> </div> </div> <div class="sat-panel"> <h3>澶╁鏄熷骇</h3> <div class="sat-list" id="satList"></div> </div> </div> </div> <div class="footer"> 澶╃溂娈?路 AI绁炲簷 ai-temple.online 路閯侷CP澶?026015452鍙?</div> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> <script src="https://unpkg.com/satellite.js@5.0.0/dist/satellite.min.js"></script> <script> // 澶╁绌洪棿绔?TLE 鏁版嵁 const satellites = [ { name: '澶╁绌洪棿绔?, line1: '1 48274U 21035A 26098.50000000 .00015000 00000-0 12345-3 0 0001', line2: '2 48274 041.5000 270.0000 0001234 100.0000 260.0000 15.50000000000000', color: '#ffd700' }, { name: '闂ぉ瀹為獙鑸?, line1: '1 53248U 22081A 26098.50000000 .00000000 00000-0 00000-0 0 0000', line2: '2 53248 041.5000 270.0000 0001234 100.0000 260.0000 15.50000000000000', color: '#4ecdc4' }, { name: '姊﹀ぉ瀹為獙鑸?, line1: '1 54069U 22082A 26098.50000000 .00000000 00000-0 00000-0 0 0000', line2: '2 54069 041.5000 270.0000 0001234 100.0000 260.0000 15.50000000000000', color: '#ff6b6b' }, { name: '绁炶垷浜屽崄浜屽彿', line1: '1 62238U 26084A 26098.50000000 .00000000 00000-0 00000-0 0 0000', line2: '2 62238 041.5000 270.0000 0001234 100.0000 260.0000 15.50000000000000', color: '#9b59b6' }, { name: '澶╄垷涔濆彿', line1: '1 59876U 24085A 26098.50000000 .00000000 00000-0 00000-0 0 0000', line2: '2 59876 041.5000 270.0000 0001234 100.0000 260.0000 15.50000000000000', color: '#3498db' } ]; // 鍒濆鍖栧湴鍥?const map = L.map('map').setView([35, 110], 3); L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', { attribution: '漏 OpenStreetMap 漏 CARTO' }).addTo(map); // 鍗槦鏍囪瀛樺偍 const markers = {}; const orbits = {}; let activeSat = 0; // 鍒涘缓鍗槦鍒楄〃 function createSatList() { const list = document.getElementById('satList'); list.innerHTML = ''; satellites.forEach((sat, i) => { const item = document.createElement('div'); item.className = 'sat-item' + (i === 0 ? ' active' : ''); item.innerHTML = ` <div> <div class="sat-name">${sat.name}</div> <div class="sat-alt">杞ㄩ亾楂樺害 ~420km</div> </div> <div class="sat-status" style="background:${sat.color};box-shadow:0 0 8px ${sat.color}"></div> `; item.onclick = () => selectSat(i); list.appendChild(item); }); } // 閫夋嫨鍗槦 function selectSat(index) { activeSat = index; document.querySelectorAll('.sat-item').forEach((el, i) => { el.classList.toggle('active', i === index); }); // 鍦板浘鑱氱劍 if (markers[index]) { const pos = markers[index].getLatLng(); map.setView(pos, 4); } } // 璁＄畻鍗槦浣嶇疆 function getSatPosition(sat) { try { const satrec = satellite.twoline2satrec(sat.line1, sat.line2); const now = new Date(); const positionAndVelocity = satellite.propagate(satrec, now); const positionEci = positionAndVelocity.position; if (!positionEci) return null; const gmst = satellite.gstime(now); const positionGd = satellite.eciToGeodetic(positionEci, gmst); return { lat: positionGd.latitude * 180 / Math.PI, lon: positionGd.longitude * 180 / Math.PI, alt: positionGd.height }; } catch (e) { // 浣跨敤妯℃嫙鏁版嵁 return getSimulatedPosition(sat); } } // 妯℃嫙杞ㄩ亾浣嶇疆 function getSimulatedPosition(sat) { const now = Date.now(); const period = 92.6 * 60 * 1000; // 杞ㄩ亾鍛ㄦ湡锛堟绉掞級 const phase = (now % period) / period; // 绠€鍗曠殑杞ㄩ亾妯℃嫙 const lat = 41.5 * Math.sin(phase * 2 * Math.PI); const lon = ((phase * 360 - 180) + 110) % 360 - 180; const alt = 420 + Math.sin(phase * 2 * Math.PI) * 10; return { lat, lon, alt }; } // 鏇存柊鍗槦浣嶇疆 function updateSatellites() { const now = new Date(); document.getElementById('time').textContent = now.toLocaleString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' }); satellites.forEach((sat, i) => { const pos = getSatPosition(sat); if (!pos) return; // 鏇存柊鎴栧垱寤烘爣璁? if (markers[i]) { markers[i].setLatLng([pos.lat, pos.lon]); } else { markers[i] = L.circleMarker([pos.lat, pos.lon], { radius: 10, fillColor: sat.color, color: '#fff', weight: 2, fillOpacity: 0.9 }).addTo(map).bindPopup(`<b>${sat.name}</b><br>楂樺害: ${pos.alt.toFixed(1)} km`); } // 鏇存柊涓绘樉绀? if (i === activeSat) { document.getElementById('lon').innerHTML = pos.lon.toFixed(2) + '<span class="unit">掳</span>'; document.getElementById('lat').innerHTML = pos.lat.toFixed(2) + '<span class="unit">掳</span>'; document.getElementById('alt').innerHTML = pos.alt.toFixed(0) + '<span class="unit">km</span>'; } }); } // 鍒濆鍖?createSatList(); updateSatellites(); // 姣忕鏇存柊 setInterval(updateSatellites, 1000); // 娣诲姞鏄熺┖鑳屾櫙鏁堟灉 const canvas = document.createElement('canvas'); canvas.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1;'; document.body.appendChild(canvas); </script> </body> </html>