The user wants a 3D satellite map of South Korea. The request is in Chinese: "生成韩国卫星地图3d" = "Generate a 3D satellite map of South Korea." This should be a single HTML file (since the answer will be rendered in an iframe in a browser, it needs to be fully self-contained HTML including all scripts and links). I should use Leaflet (from CDN) with a satellite tile layer (Esri World Imagery) and add 3D tilt/rotation via CSS transform, or use a proper 3D approach. Options: 1. Leaflet + Esri World Imagery satellite tiles + CSS 3D transform on the map container to achieve a tilted 3D view. Add a custom camera control (rotation slider, tilt slider, zoom). This is a common technique that produces a convincing "3D satellite" view. 2. CesiumJS — full 3D globe, works with imagery providers. Cesium is heavy but available via CDN (cesium.io). However, Cesium's default imagery requires an ion token for Bing; Esri World Imagery is freely usable without a token: `https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}` works in Cesium too via UrlTemplateImageryProvider. But Cesium's assets (widgets, workers, fonts) require serving from a CDN with the proper path — can be used via `CESIUM_BASE_URL = 'https://cesium.com/downloads/cesiumjs/releases/1.115/Build/'`. This usually works. But there's a risk it doesn't render if the CDN is blocked. Leaflet + Esri is much more reliable. Actually, Cesium gives real 3D with terrain — that's the most impressive "3D satellite map." But reliability matters. Let me think: Cesium from a CDN (unpkg or cesium.com). I can set CESIUM_BASE_URL. CesiumJS works from a script tag on unpkg: `https://unpkg.com/cesium@1.115/Build/Cesium/Cesium.js` with `window.CESIUM_BASE_URL = 'https://unpkg.com/cesium@1.115/Build/Cesium/'`. This generally works fine in browsers. Terrain: World Terrain requires an ion token. Without a token you can use an ellipsoid — the map will be flat but tilted in 3D. You can enable the free "OSM Buildings" 3D Tiles for urban buildings (a Cesium ion quickstart token is needed — no, does OSM Buildings require a Cesium ion access token? Actually Cesium.sampleDataCreates a tileset that requires an ion token). Without a token, you'd get a flat tilted satellite globe, which is still impressive (Earth curving off the horizon!). The curvature of Earth is really the wow factor. Tilted Leaflet can fake 3D, but a real globe is better. But risk: does the user's network have access to unpkg/cesium CDN? The iframe rendering environment — probably has internet access (Esri tiles need it too). Both need internet. Let's go with Cesium as the core and… hmm, but if Cesium fails to load the page is blank. I could add a fallback: if `window.Cesium` is undefined after a timeout, show an error or fallback to a Leaflet version. That's a lot of work but doable. Alternatively, go with Leaflet + Esri + CSS 3D tilt + rotation + custom 3D-feel controls — very reliable, and I can control the design well. Many "3D satellite map" demos do this. I can add: - Tilt slider (perspective rotation X) - Rotation slider (Z rotation) - Zoom - Compass - Fly-to buttons for major cities (Seoul, Busan, Jeju, Incheon…) - Crosshair coordinates display (latitude/longitude in real time) - Grid/scanline overlay for a techy vibe - Day/night? Esri has a World Imagery with hillshade: `https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/composite/tile/{z}/{y}/{x}` and "World_Imagery_2D". Also hillshade: `World_Topo_Map`… actually there's "World Shaded Relief" tile layer: `https://server.arcgisonline.com/ArcGIS/rest/services/Elevation/World_Elevation_Base/MapServer/tile/{z}/{y}/{x}`? There's also an "HillShade" layer: `https://server.arcgisonline.com/ArcGIS/rest/services/Elevation/HillShade/MapServer/tile/{z}/{y}/{x}` — yes, this exists (World Hillshade). Combining hillshade under satellite imagery gives relief, and combined with 3D tilt it looks more 3D-like. Also Esri's "World_Imagery_Cache"… let's use the standard composite. Actually, there's an even better one: `https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}` (max zoom ~19) with `maxZoom: 19`. Add an optional hillshade overlay tile layer with a blend mode. CesiumJS decision: the most impressive, reliable-looking 3D satellite map of South Korea is Cesium with a camera tilted over the Korean peninsula. Let's weigh reliability: unpkg Cesium 1.104+ works. Cesium worker files are loaded from the base URL. There have been CORS issues, but it generally works. Fonts load from the widget's css. I've seen it work in sandboxed iframes? If the iframe is sandboxed without allow-scripts, nothing works anyway. Let's assume scripts are allowed. Hybrid approach: load Cesium; if it fails (timeout, or tile error), dynamically inject a Leaflet fallback. This doubles the complexity but maximizes both quality and robustness. Hmm. Let me consider what the best single solution is. The user asked in Chinese: "生成韩国卫星地图3d" — generate a 3D satellite map of South Korea. A polished single HTML deliverable. I think the Cesium globe gives a true 3D experience: you can rotate the Earth, see the Korean peninsula in satellite imagery, tilt, zoom to cities, see the sea, coastline, Jeju Island. Plus I can add nice UI: - Top-left: title "韩国卫星地图 · 3D" and stats - Side panel with city fly-to buttons: Seoul (首尔), Busan (釜山), Incheon (仁川), Daegu (大邱), Jeju (济州), Daejeon (大田), Gangneung (江原/江陵), Ulsan (蔚山), Jeonju (全州), Dongducheon? - Layer toggles: place names (Esri labels), boundary labels (Esri "Boundaries and Place Names"), roads (Esri "Reference/Locality Names"?), hillshade? - Compass and heading display, altitude display, live lat/lng display. - Tilt/rotation presets: "俯视" (top-down), "倾斜" (tilted), "地平线" (horizon view). - Day/night? I could overlay a night lights layer (Esri Night? "Reference" has… actually Esri has a "World Reference Hydration"… hmm. There's `https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}` for labels. For night lights I could use NASA Black Marble via WMTS: `https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/BLACKMARBLE/default/{Time}/GoogleMapsCompatible_Level8/{z}/{y}/{x}.jpg` — this could work as a 3D Tiles? Cesium can add WMTSImageryProvider. Time parameter: "2012-2017". Might work. Or use Leaflet's "Esri World Imagery with Hillshade"… actually Esri has "World_Imagery" + a "Night" option? Not standard. Let's not over-complicate. Cesium core features: - Viewer with OSM Buildings? Needs an ion token. Skip. - Use Cesium's built-in default basemap? The default `Cesium.createWorldImagery()` is Bing Maps, requires an ion token. So I have to use the free Esri World Imagery. - Terrain: without an ion token, use `EllipsoidTerrainProvider` — the globe is flat (spherical). Still 3D (you see the curvature of Earth). I could also try Cesium ion's free `Cesium.createWorldTerrainAsync({ requestVertexNormals: true })` — requires a token. Is there a public default token? The docs have a deprecated "default" ion token (cesium-ion's `ion.defaultAccessToken` is no longer available). So no terrain — flat ellipsoid. Acceptable: satellite view with Earth's curvature, sea, realistic atmosphere (SkyAtmosphere default). Hmm, but for a country-level view, flat ellipsoid vs terrain: terrain adds mountain relief (the Taebaek Mountains!). Without terrain, the tilt view still looks good with satellite imagery, but less "3D"-like. Alternatively, I could use World Terrain from the Cesium ion free tier… no token = no way. Another 3D option: MapLibre GL JS (free vector + raster). Can use raster satellite tiles in a "3D globe" mode! MapLibre v4/v5 added `globe: true` support (experimental in v4, improved in v5 — v5 supports globes with raster tiles? v4.x has `map.setGlobe(true)`, in v5 `globe: true` in the style). MapLibre v5 (2025) has globe support, including raster satellite imagery, and it's reliable from a CDN: `https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js`. This gives a real 3D globe with Esri satellite tiles, fully token-free, plus a `pitch` control for tilt, `bearing` for rotation. This is actually a great option: real globe, real 3D, free tiles, small dependency, robust. And it's easy to add custom UI, fly-to, layer toggles (label overlay from Esri boundaries, roads from Esri Reference layer, hillshade, night lights). I recall MapLibre's globe + raster: `style: {version:8, sources:{sat:{type:'raster',tiles:[...],tileSize:256}}, layers:[{id:'sat',type:'raster',source:'sat'}]}, globe: true`? Actually in MapLibre v5: the style option `globe: true` (previously `map.setGlobe(true)` in v4.7+). The v5.0 docs: style spec `globe: true` — yes, v5.0 includes a "globe" mode where the map renders as a globe; the `globe` key in the style or `map.setGlobe(boolean)` should work in v4.5+. Risk: globe mode with raster sources — does it work? I believe MapLibre's globe renders vector and raster sources on the sphere. There were demos with satellite raster tiles on a globe. I'm fairly confident. But if it doesn't work, we get a flat map with pitch — still a decent 3D-tilt view. Comparing Cesium vs MapLibre: - Cesium: guaranteed true globe + atmosphere. But heavier, more failure points (workers, fonts from CDN), default viewer chrome. - MapLibre v5 globe: lighter, cleaner API, full UI control. The globe mode is documented in v5 (announced as "globe mode" at MapLibre JS v5 in 2025). Yes — I recall "MapLibre JS 5.0 introduces globe mode." So it's a real feature. I'll go with MapLibre GL JS v5 with `globe: true`, Esri World Imagery raster, plus: - Label overlay: Esri "Reference/World_Boundaries_and_Places" tiles as a second raster layer (transparent PNGs with labels) — works on globe too (raster over the sphere). - Road overlay: Esri "Reference/Transportation"? There's `https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}` — labeled lines? I think it's roads without labels. I could also include "Transportation" from "Reference". Hmm, keep it: place name labels (Boundaries and Place Names), roads (World Transportation, optional). - Hillshade under the imagery? Esri's "World_Hillshade_2D": `https://server.arcgisonline.com/ArcGIS/rest/services/Elevation/World_Hillshade_2D/MapServer/tile/{z}/{y}/{x}`? The layer name I remember is "World_Hillshade_2D" inside "Elevation". There's also `https://server.arcgisonline.com/ArcGIS/rest/services/Elevation/HillShade/MapServer/tile/{z}/{y}/{x}` (World Hillshade). With satellite imagery as the top, the hillshade below only shows where the imagery is transparent (rare). Not useful under imagery; useful as an alternative "地形阴影" basemap layer. I can add a basemap switcher: 卫星 (satellite) / 地形 (topo with hillshade) / 混合? Let's keep it simple: 卫星影像 as the base; overlay toggles: 地名标注, 道路, 网格? - Night lights: NASA Black Marble WMTS — add as an optional overlay "夜景灯光" with opacity. WMTS tiles from gibs.earthdata.nasa.gov: `https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/BLACKMARBLE/default/2012-2017/GoogleMapsCompatible_Level8/{z}/{y}/{x}.jpg`. In MapLibre I could define the source as tiles with `{Time}`… I'd need to hardcode the time. `tiles: ['https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/BLACKMARBLE/default/2012-2017/GoogleMapsCompatible_Level8/{z}/{y}/{x}.jpg']`. This should work (Level 8 = up to zoom 8). At high zooms, tiles are missing. Acceptable for a toggle. Risk: might fail — but only when the user enables that layer. Fine as an optional toggle. Also 3D buildings: Cesium OSM Buildings needs ion; MapLibre — I could add extruded 3D buildings from OpenMapTiles (needs a token). Skip buildings. The globe + satellite + atmosphere? MapLibre doesn't have a sky-atmosphere shader by default; I can add a `sky` background via `skyColor` option, `sky: {skyColor: ...}` in the style. v5 style spec supports `sky`. I can set a subtle gradient? Only a single color. I'll add a dark space background with CSS? The map canvas covers it. I can set the `background` layer color to a deep blue. Fine. Actually — do we want a space-like background? A nice touch: dark cosmos background with stars behind the globe. MapLibre's `background` layer color + `skyColor` for the far space? In globe mode the sky is rendered via the `sky` spec (skyColor, horizonColor, atmosphereColor, fogColor…). I can set skyColor to a dark navy. Add stars in CSS behind? The canvas is opaque; but sky renders from the spec. I'll use style sky: {skyColor:'#0b1e33', horizonColor:'#1c3a5e', atmosphereColor:'#2e5f8a', fogColor:'#0b1e33', fogGroundColor:'#0b1e33'} for a subtle atmospheric rim — actually MapLibre does render an atmosphere-like rim in globe mode! In v5 globe mode, the "atmosphere" uses the sky spec. I'll include that. UI design direction: - I want it to feel like a command console / satellite operations UI: layered background, live elements, motion, micro-interactions, strong typographic contrast. - Language: Chinese (the user wrote in Chinese). - Typography: distinctive display + readable body. For Chinese + techy feel: use a display face for Latin/numerals — say "Orbitron" or "Rajdhani" or "Chakra Petch" (techy), and a Chinese stack for CJK (system "PingFang SC", "Microsoft YaHei", or Google Fonts "Noto Sans SC"). Google Fonts in iframe: fine. I'll use: - Display/numerals: "Orbitron" (very satellite/console-y) — or "Rajdhani" (more readable, condensed techy). Orbitron for large numerals/labels, Rajdhani for smaller techy text? Maybe too many. Let's do: "Orbitron" (display), "Rajdhani" (secondary techy Latin), "Noto Sans SC" (Chinese body), fallback system CJK. Actually to keep font loading light: Orbitron (700/900), Rajdhani (500/600/700), Noto Sans SC (400/500/700). Three families from Google Fonts is fine. - Color palette: I want to avoid a generic look. A satellite console can use deep blue-black, but a single accent feels flat — so I'll use a richer palette: deep-space blue-green background (#050d16 → #0a1b2a), amber/gold (#ffb454 / #f5a623) as primary accent + cyan teal (#39d0c4) as secondary + soft white text + a muted red (#ff5c5c) for live indicators. Multiple accents keep it from feeling like a single neon. The map itself is full-bleed (the satellite imagery is the hero) — good, since the subject IS a satellite map, the map itself is the opening visual. UI overlays on top. Layout: - Full-viewport map (globe). - Top-left: mission-style header block: small tag "GEO-SCAN // 卫星观测台", large title "韩国 · 3D 卫星地图" in large display type, subline with coordinates. Not a centered hero — anchored top-left with a technical framing. - Left rail (or bottom-left): city fly-to list — 首尔, 釜山, 济州, 仁川, 大邱, 大田, 江陵, 蔚山, 全州, 木浦? Each with lat/lng, small marker dot, hover effect, click → flyTo with animation. Also region presets: 全景 (whole country), 首尔都市圈, 釜山广域市, 济州岛. - Right rail: control panel — - 视角 (view) presets: 正视 (top-down 0° tilt), 45° 倾斜, 地平线 (80° pitch near ground), 夜间 (switch to night lights? or just a pitch preset) - 图层 (layers) toggles: 地名标注, 道路网络, 夜景灯光, 经纬网格 - Sliders: 倾斜 pitch (0-85), 旋转 bearing (0-360) — live with the map - Altitude / zoom display - Bottom bar: live telemetry strip — lat/lng of the cursor, camera center, altitude (km), bearing °, pitch °, time (UTC+9 Seoul time), blinking "LIVE" dot, scale? This strip gives "alive" data that updates on move. - Bottom-left: compass rose (rotating SVG with the bearing), maybe animated. - Loading state: overlay with an animated radar sweep / "正在建立卫星链路…" that fades out when the map loads. Good. - Micro-interactions: buttons with hover glow, active state; sliders styled; crosshair on the map that follows the cursor? A custom crosshair overlay div with a coordinate chip that follows the mouse — very satellite-y. Yes! A small reticle (SVG) tracking the cursor over the map + a floating readout of lon/lat. - Scanline/vignette overlay: subtle CSS radial vignette + faint scanlines (low opacity, pointer-events none) for the console feel. Careful not to obscure the map; keep it subtle. - Grid overlay: graticule — MapLibre can't easily draw a graticule; but I can add an SVG overlay of meridian/parallel lines? That requires a geo→screen projection each frame. Alternative: skip the graticule, or implement with map.getScreenPoint for several lat/lng lines per frame (lightweight: e.g., lines every 1°). Actually, I can draw the graticule by adding vector data sources: a GeoJSON of lat/lon polylines every 1°, added as `line` layers — do vector layers on a globe in v5 work in globe mode? Vector layers should render on the globe. Simple approach: generate GeoJSON lines (meridians every 1°, parallels every 1°) and add a GeoJSON source with line layer, thin dashed. On a globe, a 1° line is nearly a geodesic; that's fine. But when zoomed in, the 1° lines are sparse; every 1° might be fine at country scale (Korea spans ~32°N–38.6°N, 126°–130°E → about 7 meridians, 7 parallels — decent). I could adaptively add a finer grid at higher zoom… Keep it: 1° grid, subtle cyan, toggleable, default ON? Maybe default OFF to keep imagery clean; toggle available. Hmm, live elements — default ON but very subtle (opacity 0.25)? I think default ON at low opacity gives more of a "console" feel. Let's make it default ON subtle. Actually, in MapLibre's globe mode, do GeoJSON vector line layers render correctly on the globe? I believe so (globe mode renders vector and raster on the sphere). Small risk; if the layer fails, it's just invisible. Acceptable. City markers: add circle markers via a GeoJSON source with a `circle` layer + maybe pulsating? A pulsing effect requires re-styling on a timer — I can do two circle layers whose radius oscillates via a requestAnimationFrame update (lightweight). Or use HTML markers (maplibre Marker with a custom div) — markers on a globe work. I'll use a GeoJSON circle layer for city points + a `symbol` layer for labels? The Esri label overlay already includes Korean place names in English. My own Chinese labels for major cities would be better: use a symbol layer with text-field from properties (Chinese names), font stack — MapLibre requires the glyphs endpoint! I need to specify a `glyphs` URL in the style (e.g., `https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf` — does demotiles support the 'Open Sans' font?). Does demotiles.maplibre.org provide glyph fonts for "Open Sans"? MapLibre demo tiles glyphs: `https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf` supports Open Sans. Open Sans has CJK? No — Open Sans has no CJK glyphs. Chinese labels won't render. Alternative glyph CDNs with CJK: e.g., `https://tiles.openfreemap.org/fonts/...`? OpenFreeMap uses… or use a demotiles font that includes CJK? Not available. Option: use HTML markers with CSS text (Chinese works, styled, no glyph dependency). Maplibre GL JS markers with custom elements work on the globe. Downside: markers don't scale/rotate but that's fine. Let's use HTML markers: a dot + a Chinese label, hover to expand, click to fly. But we also have city buttons in the left rail — redundant? Both are good: markers on the map + list in the rail. Keep markers simple (dot + label), sync hover with rail items (nice micro-interaction: hover on rail item highlights the marker, and vice versa). That's a good live touch. Also add a "首都圈" pulse? Seoul as a special marker (larger, pulsing ring via CSS animation). Good. Telemetry: update on 'mousemove' (cursor lat/lng via map.unproject? On a globe, does `map.unproject(screenPoint)` return the 3D point? In globe mode, unproject of the globe surface… in v5, `map.unproject` should handle the globe and return the latlng on the surface (there's `map.unproject(point, {altitude})`?). Hmm. In globe mode, projecting screen points back: `map.unproject(p)` — I think it works, returning the point on the sphere for globe rendering (the docs mention that in v4.x globe mode, unproject is approximate). To be safe, use a fallback: if unproject's result is NaN, skip. I think v5 handles it correctly (globe-aware project/unproject). Let me use it; guard with isNaN. Altitude display: compute camera altitude in km: `map.getDistance(map.getCenter(), center)`… Simpler: use `map.getBounds()`? A common trick: altitude ≈ (maxZoom - zoom)… not accurate. Alternative: `map.getCameraAltitude()`? Not in the API… Cesium has it; MapLibre: does v5 have `map.getCameraAltitude()`? I recall `getCameraAltitude` was added? Not sure. Approximate: altitude = earthRadiusKm * (1 / sin(??))… Simplest: derive from pitch+zoom: at pitch=0, distance to center ≈ (180° span at current zoom / 360) * earthCircumference. Distance ≈ (360/2^zoom) * 111.32 km. That's the distance from the center point to the visible edge… At zoom z, 1 pixel = 156543.03 * cos(lat) / 2^z meters at the equator; screen height 1080 px → 360° spans at z0… At zoom 0, the whole Earth = 512px (Web Mercator world = 512 px per 360°). So 360° = 512 * 2^z px → 1° = (512*2^z/360) px. The angular height of the screen ≈ screenH_px / (512*2^z/360) degrees? And altitude = R / sin(θ/2)… this is getting complicated. Simpler: approximate "视高" = R_earth / tan(θ/2) where θ = angular size of the screen width = (screenWidth / (512*2^z)) * 360°. θ = screenW * 360 / (512 * 2^z) degrees → radians. Alt = R / sin(θ/2)? For a small θ, altitude ≈ R * θ/2… Let me define: distance from camera to Earth center D, visible half-angle φ = θ/2 satisfies sin(φ) = R/D → D = R/sin(φ); altitude = D - R = R(1/sin(φ) - 1). When φ is small (zoomed in), altitude ≈ R*φ/(1)… wait, for small φ, 1/sin φ ≈ 1/φ → altitude ≈ R/φ - R which is huge and wrong; correct small-angle limit: altitude = R(1 - sin φ)/sin φ ≈ R(φ²/6)/φ = Rφ/6?? Hmm, that's the tangent-plane distance… let me redo: D = R / sin φ. altitude h = D - R = R(1 - sin φ)/sin φ. For small φ: sin φ ≈ φ - φ³/6. 1 - sin φ ≈ φ³/6. h ≈ R φ²/6. Hmm, at zoom 5 in Seoul: screen width ~1600 px, 1 px at z5 equator = 156543/32 ≈ 4892 m ≈ 4.9 km. Screen angular width θ ≈ 1600 * 4.9 km / R(6371) rad ≈ 1600*4.9/6371000 ≈ 0.1228 rad ≈ 7°. φ=3.5°=0.061 rad. h = R(1-sin0.061)/sin0.061 = 6371*(0.9407/0.0610) = 6371*15.42 ≈ 98,300 km?? That can't be right. Hmm, wait, this suggests a huge altitude, but in Mercator zoom the map scale is 1:29,574,583/2^z … at z5 the ground distance per pixel is 4.9 km at center — camera altitude h is such that screenW meters on the ground = 2h*tan(φ)… For a small FOV: ground distance ≈ screenW_px * (ground per px) = 1600*4.9km = 7840 km visible width?? No wait — that means at z5 the whole screen covers 7840 km of ground, and with a 60° FOV h ≈ 7840/2 / tan(30°) ≈ 6790 km. OK so h ~ 6,790 km, D = h + R ≈ 13,160 km, φ such that sin φ = R/D = 0.484 → φ = 28.9°, θ=57.8°. Consistent with ~60° FOV. Good, so the formula h = R(1/sin φ - 1) with φ=28.9°: 1/0.484 = 2.066 → h = R*1.066 = 6791 km. ✓. My earlier error: at zoom 5 the ground per pixel is 4.9 km (I mistakenly computed θ in radians as 0.1228 rad — 1600*4.9/6371 = 12.28, not 0.1228; that's 12280 km/6371 = 1.93 rad = 110°?? Hmm, contradiction. Let me recompute: 1600 px * 4.9 km/px = 7840 km of ground span. Chord/angular at Earth radius: angular ≈ 7840/6371 rad = 1.23 rad = 70°… but that's the angular span of the visible ground footprint, not the camera's FOV (θ is the camera's angle between rays to the screen edges, which subtends more than the footprint… no wait, the FOV rays intersect the Earth in the footprint; the angle at the camera is θ; relation: footprint arc 2α satisfies sin… let's trust the formula: h = R(1/sin φ - 1), sin φ = R/D, and the relation between screen pixels and ground: Mercator ground/px at center = 156543 cos(lat)/2^z m. This equals the ground scale at the camera nadir = R/D * (pixel scale)… Mercator scale: 1 px = 2πR/512/2^z m at the equator (this is the Mercator map scale, defined at the equator at the same scale as the map… at camera position, the scale s = 156543/2^z * cos(lat) m/px, and this corresponds to a camera altitude where the Mercator projection is… Mercator zoom scale: 29,574,583 / 2^z meters per degree? Meters/px at lat0 = 156543.03/2^z. This matches a camera altitude h satisfying 1 px = (2h * 1px_Radian)/… ugh. Let's just empirically verify with numbers I know: at z=5, 4.9 km/px at the equator. In Web Mercator, scale = 29,574,583 m/deg / … hmm, another known: at zoom z, scale = 1 : 591,592,586 / 2^z (at the equator). At z5: 1:18,487,268. If a typical map viewer at that zoom corresponds to ~18,000 km altitude?? No — 18.5M scale at 96 dpi means 1 px (0.2646 mm) = 0.2646mm * 18.5M = 4,894 m ✓ consistent. But that "altitude" is Mercator's construction, not a realistic camera. For the telemetry "视高" display, the realistic FOV model: assume FOV ~ 60° (vertical). Ground span at nadir plane for camera altitude h: groundPerPx = 2*h*tan(fov/2)/screenH_px… using Mercator's ground/px as the nadir ground/px: h = groundPerPx * screenH / (2 tan(fov/2)). With fov=60°, tan30°=0.5774: at z5, h = 4892m * 1080 / (1.1547) = 4,576,000 m ≈ 4576 km. OK, that's a plausible "camera altitude." This is just a display estimate; fine. I'll compute altitudeKm = (156543.03 * Math.cos(lat*π/180) / 2^zoom * screenH) / (2*Math.tan(30°)) / 1000. Good enough for flavor. I'll label it 相机高度 (estimated). Actually, does MapLibre v5 have `map.getCameraAltitude()`? I don't think so. I'll go with the estimate. Or use `map.getZoom()` and display "缩放 5.2" + the altitude estimate. Good. Seoul time: Intl.DateTimeFormat with timeZone 'Asia/Seoul' to display "首尔时间 14:32:07". Now, globe mode details in MapLibre v5: - CDN: `https://unpkg.com/maplibre-gl@5.6.0/dist/maplibre-gl.js` and CSS `.../dist/maplibre-gl.css`. I need a v5.x version. Known versions: 5.0.0 (April 2025?), 5.1, 5.2, 5.3… I'll use a specific version for stability. I'll use 5.2.0 or latest 5.x. Let's use `maplibre-gl@5.2.0`. Hmm, risk of exact availability on unpkg — any published version works. I'll pick 5.2.0 (it exists; I'm fairly confident 5.0/5.1/5.2/5.3 exist by mid-2025). Safer: use `@5` tag? `https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.js` resolves to the latest 5.x — that's robust. I'll use the @5 tag. - Style with globe: `{version: 8, name, glyphs: ..., sources: {sat: raster...}, layers: [background, raster], sky: {...}, globe: true}`. In v5, the style key `globe: true` enables it (docs: "globe: When true, the map is rendered as a globe"). I also recall `map.setGlobe(true)`. Let me set it in the style — v5 supports the `globe` property on the style object. To be extra safe I can also call `map.setGlobe?.(true)` after load? If v4.7+, setGlobe exists; v5 might warn? Harmless if guarded with optional chaining… Actually if the style already has globe:true, calling setGlobe(true) is a no-op. I'll include the guard. Also `maxPitch: 85` in Map constructor. - Raster source tiles (Esri World Imagery): `['https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', 'https://server0.arcgisonline.com/...', 'server1', 'server2', 'server3']` — Esri has 4 servers (server, server0-3). maxzoom 19. - Labels overlay: `https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}` (transparent PNG labels, English). maxzoom ~8? Does it have data up to z8? "World Boundaries and Places" goes to 8 (Level 8?). Google-compatible levels; the maplibre zoom might exceed it → tiles missing at high zoom (fine, no labels at the city level, since my markers cover major cities). Set maxzoom 8. - Roads: `https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}` — labeled roads? I think it's roads without labels. Include with maxzoom 12? Not sure; set to 10. Hmm, World_Transportation is "Roads and Rail" with no labels I think. It's a thin blue/green line. Might look OK. I'll keep it as an optional toggle, default off. - Night: NASA Black Marble as above, maxzoom 8, initial opacity 0, blending normal. When toggling, fade to 0.85 over dark? Night lights over the day satellite = weird (adds a glow). Better: when night mode is ON, lower the satellite layer opacity to ~0.35 and show night lights at 1.0 → a "夜景" mode. Cool feature: 夜间模式 button. Do it as a toggle that adjusts the sat layer paint opacity + the night layer opacity. - Graticule: GeoJSON source with lines every 1° from lat 10..60, lon 110..150? Better to cover the globe: parallels from -80 to 80 every 10°? For a globe view, a global graticule looks great: meridians every 15° (from -180..165 step 15, each a 2-point line -85 to 85? On a sphere, a 2-point polyline might be drawn as a geodesic? MapLibre draws a straight line in projected space; on a globe, the line… risky: straight lines in lat/lng on a globe might look weird (chords through the interior). Safer: sample meridians/parallels as many small segments (every 2°) so they hug the sphere. Meridian: lon fixed, lat -85 to 85 step 5 → line. Parallel: lat fixed, lon -180 to 180 step 5 → line (parallel 0..85 and -85..0? full circle is fine). Antimeridian: skip the wrap issue by only drawing lines from -180 to 180 within the range. At z0 globe, the lines appear as thin circles around the globe. But on globe in v5, does vector line render correctly? I think so. Low risk; if it doesn't render, the toggle just appears inert. To reduce risk, I could skip vector layers and… alternative: no graticule. I'll include it; it's just flavor. Hmm — another consideration: at high zoom in 2D Mercator mode, the lines are just geographic lines — fine. Actually, maybe better: draw the graticule at a coarser level for the globe (15°), plus a finer grid? Keep 15° global + 5°? Keep 15° meridians and 15° parallels: clean. Wait, for a Korean focus, a 5° grid might be better. Compromise: 5° grid but only in the region lon 100-160, lat 0-60 (Asia) to avoid weirdness elsewhere? On the globe, the user can rotate; the Asia-limited grid will appear as a patch. Hmm. Let's do a global 15° grid — looks like a proper "globe wireframe" and is safe. - Korea outline highlight: add a GeoJSON of Korea's simplified boundary? Drawing a rough outline polygon of the Korean peninsula: I can hardcode a simplified polygon of the Republic of Korea (about 60-120 points). That's a nice touch: a glowing outline around South Korea ("识别区域: 大韩民国"). I need decent coordinates. I can write an approximate outline of South Korea (including the DMZ line, coastline simplification). A rough 60-point polygon of South Korea coastline (clockwise from Incheon to the east). I can approximate from memory: it's risky to get exactly right but an approximate outline is visually acceptable. Alternatively, skip the outline. Or use a "bounding box" rect for the area of interest — too crude. Alternative: use a natural-earth-like GeoJSON fetched from a CDN at runtime: e.g., `https://raw.githubusercontent.com/.../korea.geojson`? Unreliable repo. There's `https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_0_countries.geojson` — huge (2MB+), filter for KOR client-side. Heavy but one-time; could work. Hmm, 110m resolution = very rough for the peninsula (Korea is a thin strip; 110m makes it a blob). 50m: `ne_50m_admin_0_countries.geojson` ~1.4MB? The 50m admin 0 countries file is ~800KB-1.2MB. Filtering for ISO_A3==='KOR' is fine. But fetching a big file adds latency; also CORS from CloudFront is usually allowed. Risky. Let me hand-write a simplified South Korea outline (~70 points) at medium accuracy. I know the shape of the peninsula well: it's a slender inverted-triangle-ish peninsula. Let me draft the coordinates (lon,lat), going clockwise from Incheon (37.67,126.64) around the northwest coast: Actually, let me build it carefully: Northwest: Incheon/Seongnam (37.67, 126.64) → up west coast (Gimpo 37.75,126.55; Hwaseong 37.42,126.48; Ansan 37.33,126.43; Pyeongtaek 36.98,126.46; Asan 36.78,126.42; Seosan 36.74,126.30; Daecheon 36.60,126.33?; Tangjin 36.72,126.31… the west coast is jagged (many islands). Simplify: 1. (126.64, 37.67) Incheon 2. (126.60, 37.82) Gimpo, near Han river 3. (126.55, 37.75) — hmm, north border along the DMZ: from the mouth of the Han River east: (126.55, 37.80)? DMZ runs roughly along 38.0-38.3°N. Points: (126.76, 37.81)? Let me just go clockwise from the northwest (near the coast of the DMZ): Order: start at the northwest DMZ coast: (126.55, 37.80) [near Seongjin, Han river mouth] → east along the DMZ: (127.25, 38.10)? The DMZ: from (37.8,126.6) northeast to the east coast at (37.9,128.35) at Ganghwa… actual DMZ path: west end ~37.8°N 126.6°E, then rising to 38.0, 126.9; 38.13, 127.2; 38.25, 127.5; 38.06, 127.7? It zigzags; east end ~37.90, 128.35 (at the east coast near Goseong/Gangneung? East end is at 38.03? The DMZ meets the east coast at ~37.9°N? Actually at the east coast ~37.90°N? I recall the end of the DMZ at the east sea is around 37.93°N 128.35°E… let me approximate: (126.60, 37.81), (126.90, 38.00), (127.15, 38.13), (127.45, 38.27), (127.75, 38.06), (128.05, 38.08), (128.35, 37.93) [east DMZ end] → down east coast: (128.50, 37.80) Sokcho/Gangneung area; (128.35, 37.68) Yangyang; (128.33, 37.50) Hwaepyeong; (128.20, 37.40)?; (128.30, 37.35) Samcheok Bay; (128.45, 37.23) Uljin; (129.00, 36.88) Pohang? Actually Pohang: (36.52, 129.35) — the coast bulges east: (129.35, 36.55); (129.43, 36.40) Guryongpo (easternmost point ~129.57? Korea's easternmost is Guryongpo ~129.57E, 36.27N) → (129.48, 36.30); (129.30, 36.00) Yeongdeok; (129.35, 35.75) Ulsan Bay west side; (129.45, 35.50) Ulsan? Ulsan is at (35.54, 129.35), the coast near there curves south: (129.40, 35.30); (129.20, 35.10) Geoje? Geojedo Island: (128.65, 34.90); (128.85, 34.85)? Simplify Jeju to mainland: (129.10, 34.95) Geoje SE; (129.00, 34.90) Busan (35.10, 129.03); (128.80, 34.90)? Busan to Jinhae: (128.65, 34.95)? Jinhae (34.87, 128.62); (128.45, 34.98)? Changwon; (128.35, 35.05)? Masan Bay; (128.10, 35.23) Tongyeong; (127.95, 35.10)? Haenam (34.75, 126.54) — the southwest corner is actually more west-south: from Tongyeong (34.80,128.45)? Hmm, Tongyeong is (34.8, 128.45). Coastline southwest: Sacheon (34.92, 128.07); Namhae (34.82, 127.85); Hadong (35.0, 128.15)? Let me simplify the southern coast westward: (128.45, 34.80) [Tongyeong area, southern bulge] (128.10, 35.05)? No — going west along the south coast latitudes ~34.8-35.1: (127.90, 34.95) Namhae, (127.55, 34.78) Yeongdeungpo Bay? Yeongdeungpo (34.83, 126.62), (127.20, 35.05) Gwangyang Bay, (126.95, 34.60) Mokpo (34.78, 126.35), (126.54, 34.75) Hadong/Haenam tip (34.75, 126.54), (126.30, 34.55) Gangjin Bay, (126.45, 34.30)? No, north of the southwest coast: Up west coast: (126.40, 34.55) Gangjin, (126.55, 34.70)? Already used. Continue north: (126.45, 34.90) Yeosu Bay (34.74,127.66)? Yeosu is east of Mokpo… order: from Haenam tip north: (126.50, 34.90) Goheung, (126.55, 35.05) Jindo? Jindo is an island, (126.45, 35.10) Haemilsaeng (35.27? Jangheung 35.17,126.60), (126.60, 35.30) Gunsan Bay, (126.55, 35.45) Boryeong Bay? Actually Boryeong (36.35,126.59) is further north. (126.50, 35.70)? (126.50, 35.85) Yeongdong Bay? (126.45, 36.05) Nonsan Bay, (126.45, 36.35) Boryeong, (126.30, 36.72) Seosan Bay (jagged with islands — simplify), (126.42, 36.78)?, (126.48, 36.98) Asan Bay, (126.55, 37.42) Hwaseong Bay, (126.52, 37.60), (126.64, 37.67) Incheon → close to the start (126.60, 37.81). This is getting long but ~40 points is enough. It's rough but recognizable as the Korean peninsula. I'll refine the ordering so it forms a simple closed polygon (no self-intersection). I'll write the final array in code with reasonable values, clockwise: [ [126.60,37.81], [127.00,38.02], [127.25,38.13], [127.50,38.28], [127.75,38.06], [128.00,38.10], [128.35,37.93], [128.48,37.82], [128.40,37.65], [128.32,37.50], [128.30,37.35], [128.45,37.22], [128.95,36.90], [129.35,36.55], [129.48,36.32], [129.32,36.00], [129.38,35.72], [129.42,35.48], [129.25,35.18], [129.02,35.07], [128.86,34.87], [128.62,34.94], [128.42,34.80], [128.08,35.02], [127.86,34.94], [127.55,34.80], [127.18,35.02], [126.95,34.62], [126.54,34.75], [126.30,34.58], [126.42,34.85]? Hmm, the order of the southwest tip: from Mokpo (126.95,34.62) west to Haenam (126.54,34.75), then southwest to the tip (126.38,34.55)? Haenam tip: (34.75,126.54) is the west corner; the actual southernmost tip of the mainland is near Haenam at ~(34.70,126.47)? Let me simplify: …, [126.95,34.62], [126.62,34.78], [126.42,34.62], [126.52,34.90], [126.46,35.10], [126.58,35.30], [126.48,35.55], [126.42,35.85], [126.30,36.20], [126.42,36.40], [126.32,36.72], [126.42,36.95], [126.50,37.20], [126.44,37.42], [126.56,37.60], [126.64,37.67], close ]. This is roughly correct: a narrow strip with a wide southern end. Good enough as a stylized "识别区域" outline. Render it as a glowing dashed cyan line + a very light fill (0.06). Maybe animate the dash offset (line-dasharray + a rAF timer to shift dashoffset — MapLibre supports a 'line-dashoffset' paint property; can animate with setPaintProperty on an interval). A subtly marching-dashes effect — nice live detail. Only when zoomed enough (minzoom 2.5). Jeju Island: add a small separate polygon? An ellipse-ish polygon: [[126.15,33.50],[126.50,33.25],[126.90,33.25],[127.10,33.45],[127.00,33.60]? Jeju: lon 126.15-127.05, lat 33.1-33.6. Simplify: [[126.18,33.50],[126.40,33.22],[126.75,33.20],[127.00,33.35],[127.05,33.50],[126.80,33.55],[126.45,33.62]? Close. I'll add Jeju as a second feature in the same GeoJSON. Also a Geoje-ish blob? Skip. City markers (HTML): - 首尔 Seoul (37.5665, 126.9780) — capital, special pulse - 釜山 Busan (35.1796, 129.0756) - 仁川 Incheon (37.4563, 126.7052) - 大邱 Daegu (35.8714, 128.6014) - 大田 Daejeon (36.3504, 127.3845) - 蔚山 Ulsan (35.5384, 129.3114) - 光州 Gwangju (35.1595, 126.8526) - 全州 Jeonju (35.8242, 127.1480) - 江陵 Gangneung (37.8408, 129.1128) - 浦项 Pohang (36.0290, 129.3430) - 木浦 Mokpo (34.7808, 126.3483) - 济州 Jeju (33.4996, 126.5312) Maybe 10-12. Rail list: 首尔, 釜山, 济州, 仁川, 大邱, 大田, 光州, 江陵, 蔚山, 全州 — good. flyTo: map.flyTo({center, zoom, pitch, bearing, duration: 2500, essential: true}). View presets: - 国家全景 (overview): center (36.5, 127.8), zoom ~4.6 (globe), pitch 55, bearing -35? A good angle: bearing 0, pitch 60. On the globe, "国家全景": zoom ~4.4, pitch 55, bearing 25. - 首尔都市: flyTo Seoul zoom 10 pitch 65 bearing -30? Actually a nice cinematic: pitch 70, bearing 45. - 釜山海岸: zoom 11 pitch 75. - 济州岛: zoom 9.5 pitch 60. - 地平线: pick the coast (e.g., Busan or Haeundae), zoom 14, pitch 85, bearing 90 (facing east over the sea!) — the horizon view over the East Sea is stunning. Use Gwangchoui, Busan (35.162, 129.188) bearing 90 pitch 85 zoom 15. Sliders for pitch and bearing, in sync with map events ('move' → update slider values + display; input → map.setPitch/setBearing). Also a zoom slider? Wheel zoom exists; add +/− buttons. Add a zoom control (custom, top-right or bottom). Compass: an SVG N/E/S/W rose at the bottom-left, rotate the needle with the bearing (CSS transform updated on move). Click to reset bearing to 0 (smooth flyTo). Telemetry bar (bottom): a strip with segments: - ● LIVE 卫星链路 (blinking dot, green) - 光标: 37.56°N 126.98°E (updated on mousemove; when the cursor leaves, show 中心 coords) - 中心: lat/lng - 视高: xx km - 倾斜: xx° 航向: xxx° - 首尔时间 HH:MM:SS - 比例尺? Skip. This strip gives live-updating data on move. On narrow screens, wrap or hide some segments. Header top-left: - Overline: "SAT-OBS 04 // 近地轨道观测" in small monospace-ish (Rajdhani) with a green dot - Title: 韩国 in big display + "3D 卫星视图" — big Orbitron for Latin/numerals, but Orbitron has no CJK — CJK falls back to Noto Sans SC; mixing is fine: I'll set title "韩国卫星地图" in Noto Sans SC 700 large, and below "SOUTH KOREA · 3D SATELLITE VIEW" in Orbitron letter-spaced. Strong typographic contrast: small overline, giant Chinese title, techy Latin subline. - Small stats row: 坐标 37.5665°N 126.9780°E / 覆盖 10,030 km² / 卫星 EO-07. Flavor. Left panel: 目的地 (destinations) — a list of cities, each row: index number (01, 02…), Chinese name + small English name, dot on hover, active state with an accent left border. Panel style: dark semi-transparent with a 1px border, sharp corners (or 2px), maybe a cut corner (chamfered via clip-path) for a techy feel. Avoid uniform rounded-2xl. Use chamfered corners (clip-path polygon) for a techy console look. Right panel: 控制台 (console) — - 视角 presets (4 buttons in a 2×2 grid) - 图层 toggles (custom checkboxes/switches): 地名标注, 道路, 网格线, 区域轮廓, 夜景模式 - 姿态 sliders: 倾斜 PITCH 0-85, 航向 BEARING -180..180 (or 0-360) - 缩放: − + buttons and a display. Loading overlay: full-screen dark with a radar sweep animation (a rotating conic gradient) + "正在建立卫星链路…" + a progress shimmer; fades out on 'load'. Also handle tile errors gracefully. Cursor reticle: an absolutely positioned SVG crosshair that follows the mouse within the map (updated with transform), plus a small readout chip showing the local coordinates. Hide on touch devices / pointerleave. pointer-events: none. Ambient: CSS scanline overlay (repeating-linear-gradient, opacity 0.04), vignette (radial-gradient, opacity ~0.5). A subtle top glow. Also a slow "data ticker"? Maybe not. Also add keyboard shortcuts: 1-4 view presets, G toggles the grid, N toggles night. Display hints in the footer? Small "快捷键 1-4 视角 · G 网格 · N 夜景" hint in the telemetry bar. Nice. Mobile responsiveness: panels become bottom sheets / collapsible; ensure they don't overflow; use media queries: hide the right panel behind a toggle button? Simplify: on small screens, the left rail is a horizontal scroll strip above the telemetry; the right panel becomes collapsible with a floating button. Keep effort moderate: at <900px, make the right panel off-canvas toggled by a ⚙ button; at <640px, hide some telemetry segments. Font links: Google Fonts: Orbitron:wght@500;700;900, Rajdhani:wght@500;600;700, Noto Sans SC:wght@400;500;700;900. Use `display=swap`. MapLibre v5 API notes: - `new maplibregl.Map({container, style, center, zoom, pitch, bearing, maxPitch:85, antialias: true, attributionControl: false})` and then add a compact custom attribution ("影像 © Esri" + "NASA") — required courtesy; place it as a small credit at the bottom. - After load: add sources/layers, markers. - `map.on('mousemove', e => ...)` e.lngLat. - unproject not needed since mousemove gives lngLat directly. Cursor coordinates come from e.lngLat — great, and globe-aware in v5. - Bearing slider 0-360: map.getBearing() returns -180..180; normalize. - flyTo with pitch is supported (flyTo interpolates pitch). - `map.setPaintProperty(layer, 'line-dashoffset', ...)` — is line-dashoffset a paint property? Yes, 'line-dashoffset' exists (in a 0-1 range). Animate it with an interval of 50ms stepping -0.01. Guard that the layer exists. - Layer visibility toggle: setLayoutProperty('visibility','none'/'visible'). - Night mode: setPaintProperty('sat','raster-opacity', 0.35) and ('night','raster-opacity',1); else reverse. Animate manually? MapLibre's setPaintProperty doesn't transition; I can do a small JS tween over 600ms with a rAF. Nice micro-interaction. Let me implement a simple opacity tween. Sky spec: style.sky = {skyColor:'#0a1626', horizonColor:'#16324f', atmosphereColor:'#2b6ea8'? , fogColor:'#0a1626', fogGroundColor:'#0d1f33', horizonFogOpacity? atmosphereFogOpacity? } — the properties: skyColor, horizonColor, skyHorizonBlend, horizonFogOpacity, atmosphereColor, atmosphereBlur, atmosphereFogOpacity, fogColor, fogGroundColor, fogStart, fogEnd, fogVerticalExponent… set conservatively: skyColor '#071018', horizonColor '#123049', atmosphereColor '#3d7fb8', fogColor '#071018', fogGroundColor '#0b1c2c', horizonFogOpacity 0.35, atmosphereFogOpacity 0.4. Fine even if unknown properties are ignored. Globe key in style: v5 docs: style object supports `globe: true`. I'll also call `map.setGlobe?.(true)`. Hmm, does v5 still have setGlobe? If removed, the guard prevents an error. OK. Raster source on the globe: supported. Max bounds? No, allow globe rotation anywhere (free exploration is fun). Initial camera: center [127.9, 36.6], zoom 4.6, pitch 60, bearing -30? Bearing: positive = clockwise from north (map rotated). bearing -28 tilts the view looking northeast? A good opening: bearing -30, pitch 62, zoom 4.5 → the peninsula is seen from the southwest, with Seoul in the upper area. Then on load, do a cinematic entrance: start at zoom 2.2 pitch 45 bearing -60 and flyTo the main view over 3 seconds. Yes! An entrance animation adds life. Sequence: init map with far view; on load (after overlay fades), flyTo the home view duration 3000. Zoom limits: minZoom 2 (globe view), maxZoom 17 (satellite max 19 but keep 17 for sanity — actually let's allow 18). Performance: `map.setRenderWorldCopies`? For the globe, no copies. Fine. Attribution: "影像 © Esri, Maxar, Earthstar Geographics | 灯光 NASA GIBS". Placed at bottom-right small. Edge cases: unpkg blocked? Then the map fails — I'll add an error handler: on map 'error', if not loaded after 12s, show an overlay message "影像链路不稳定" but keep the console aesthetic. A simple timeout check: if window.mapboxgl… (maplibre global is `maplibregl`) after 8s is undefined → show a fallback message with retry hint. Keep it light. Let me also handle `prefers-reduced-motion`: skip the entrance fly animation and the dash animation. Nice detail, cheap: check matchMedia. HTML structure: ``` fonts, maplibre css,

...

``` Zoom row: ```

缩放 ZOOM—

``` Slider block: ```

倾斜 PITCH—

航向 HEADING—

``` Compass svg: ``` ``` The N text at y=8 is inside the needle → rotates. At the top, does it collide with the tick? The tick is at y3-9 outside the r27.5 ring? The ring r 27.5 spans 1.5..56.5. The tick lines at y3..9 are inside the top of the ring. The N at y8 inside the needle overlaps the tick — move the N inside the needle at (29, 16)? The needle's north triangle spans y9..29; the N letter at y 20? Place N fill dark? Amber triangle with a dark N? Small. Or drop the N letter; the amber tip indicates north. Keep the N small at (29,17.5), font 6.5, fill #2a1a05. OK. hud-compass CSS: ``` .hud-compass{position:absolute;right:22px;bottom:66px;z-index:11;cursor:pointer;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));transition:transform .2s} .hud-compass:hover{transform:scale(1.06)} ``` Loader inner markup as designed. Now the full JS. Careful about order: build UI (static parts) doesn't need the map; markers need the map load. Rail & view & layer are built immediately. Let me also guard the `applyLayer` calls before load: store the pending state (just state) and apply on onLoad: on load iterate over the state and apply visibilities (defaults match the spec; only apply if the user changed before load — just re-apply all from state; cheap). Edge: the night tween before load is guarded by map.getLayer checks. Also handle window resize: MapLibre auto. I think we're ready to write. Also add `essential: true` to the flyTo so it works even with reduced-motion (jump). With RM, skip flyTo: use map.jumpTo? Actually essential:true makes the animation instantly jump if the user prefers reduced motion — even better; but I also do the RM check to avoid a long-duration fly (essential handles it automatically!). MapLibre's essential flag: "if true, the animation will be essential… skipped when prefers-reduced-motion." So always use flyTo({...,essential:true}) and skip the manual RM gate for the entrance? The entrance is essential=true → reduced-motion users get an instant view. Also dash animation: check RM. Telemetry 姿态 seg value: `${Math.round(p)}° / ${String(Math.round((b+360)%360)).padStart(3,'0')}°`. zoomVal: z.toFixed(1). Also update document title? No. Now, potential pitfall: `map.getPaintProperty('sat','raster-opacity')` returns 1 (a number) initially — fine. Black Marble: add attribution NASA. Another detail — Esri tiles at z≥? are fine up to 19. maxzoom 19. Map's maxZoom 17.5 < 19 fine. The "places" English labels overlap with my Chinese markers — acceptable (adds context). Keep places on by default? Yes. Let me write out the CSS fully, then the HTML, then the JS. Also don't forget: `body.ready` triggers the HUD transition; the loader covers the screen until then. Font stack for Orbitron Chinese characters → falls back to Noto Sans SC (declared later in the stack) ✓. Let me write the code: ```html 韩国 · 3D 卫星地图 | KOREA 3D SATELLITE

GEO-LINK 07 · 近地轨道观测 · 影像链路正常

韩国 3D 卫星地图

SOUTH KOREA · SATELLITE 3D OBSERVATION

首都 首尔 37.5665°N 126.9780°E/ 国土 100,210 km²/ —

韩国 · 3D 卫星视图

ESTABLISHING SATELLITE UPLINK
正在建立卫星链路

``` **功能一览** - 🌍 **真 3D 地球**：MapLibre 球体模式渲染 Esri 全球卫星影像，能看到地球曲率、大气边缘与海洋 - ✈️ **飞行导航**：10 座城市（首尔/釜山/济州等）一键飞行，首尔带脉冲光环首都标记 - 🎮 **姿态控制台**：倾斜 0–85°、航向 0–360° 实时滑杆，5 组视角预设（含釜山光复台 85° 地平线视角），快捷键 `1–5` - 🌙 **图层系统**：地名标注、道路、经纬网格、韩国轮廓（流动虚线）、NASA 夜景灯光（`N` 切换夜景 / `G` 切换网格） - 📡 **实时遥测**：底部数据条显示光标/中心坐标、估算视高、姿态、缩放与首尔本地时间；准星跟随光标，罗盘实时指向并可点击复位航向