The user wants a 3D satellite map of Korea. I should create an HTML page that uses a 3D mapping library with satellite imagery. The best options are: 1. MapLibre GL JS with satellite tiles - free, no API key needed 2. CesiumJS - great for 3D globe views 3. Mapbox - requires API key (not ideal) CesiumJS is probably the best for 3D globe visualization, and it can use free ion assets or other imagery sources. However, Cesium's default imagery requires an access token. I can use Cesium with OpenStreetMap imagery or other public tile servers. Actually, for satellite imagery without API keys, I could use: - ESRI World Imagery (free public tiles): https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer - MapLibre GL with globe projection and terrain MapLibre GL JS v4+ supports globe projection. I could combine satellite raster tiles with 3D terrain if I have terrain tiles. There are free terrain RGB tiles available, like from AWS Open Data (terrain tiles from Mapzen/Tilezen) - actually the open terrain tiles might be tricky. The simplest robust approach: Use CesiumJS loaded from CDN. Cesium can be configured to not use ion (Cesium's service) and instead use a custom imagery provider like ESRI World Imagery, plus we can add Cesium's terrain if using ion... but without a token, we can use EllipsoidTerrainProvider (flat globe) which still looks 3D as a globe. Alternatively, for true 3D terrain with satellite imagery, use the Marin/leicphe terrain tiles: - Terrain RGB tiles from https://s3.amazonaws.com/elevation-tiles-prod/geotiff/{z}/{x}/{y}.tif (AWS Open Data Registry - Terrain Tiles) - these are public. MapLibre GL JS supports raster-dem for terrain source. So I could do: ```js const map = new maplibregl.Map({ style: { sources: { 'sat': raster source with ESRI tiles, 'terrain': raster-dem source with AWS elevation tiles }, layers: [...], terrain: { source: 'terrain', exaggeration: 1.5 } } }); ``` MapLibre also has globe projection option: `map.setProjection({type: 'globe'})` and sky/atmosphere. Let me build a polished page: - Title: "韩国卫星地图 3D" (Korea Satellite 3D Map) - Use MapLibre GL JS from CDN - Satellite imagery from ESRI World Imagery - 3D terrain from AWS Open Elevation tiles (Terrain Tiles) - Controls: navigation control, fullscreen, scale; buttons to toggle terrain, fly to Seoul/Busan/Jeju etc. - Globe/sky maybe. Center on South Korea: longitude ~127.5, latitude ~36.5 (or Seoul 126.98, 37.56). Details: ESRI tiles URL: `https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}` Attribution: Esri, Maxar, Earthstar Geographics. Terrain tiles (AWS Open Elevation): `https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png` — Terrarium format PNG encoded elevation. In MapLibre, raster-dem source with `encoding: "terrarium"`. TileSize 256, maxzoom 15. MapLibre style minimal inline: ```js const style = { version: 8, sources: { satellite: { type: 'raster', tiles: ['https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'], tileSize: 256, attribution: 'Esri, Maxar, Earthstar Geographics' }, terrain: { type: 'raster-dem', tiles: ['https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png'], tileSize: 256, maxzoom: 15, encoding: 'terrarium' } }, layers: [ { id: 'satellite', type: 'raster', source: 'satellite' } ] }; ``` Then `map.setTerrain({ source: 'terrain', exaggeration: 1.2 })`. Add sky: MapLibre style spec supports `sky` property? MapLibre GL JS supports sky via `map.setSky`? Actually Mapbox GL has sky layer. MapLibre v4 has `sky` spec? I recall MapLibre GL JS supports the `sky` layer similar to Mapbox? Hmm. Safer to rely on globe projection or just use a sky layer if supported. Actually, let me consider CesiumJS: it gives a real 3D globe with atmosphere, can pitch freely, and with ESRI imagery it works well. But terrain would be flat (ellipsoid). For Korea with mountains, MapLibre terrain exaggeration looks good. I think MapLibre with terrain + satellite is the best and free. Let me also add: - Buttons: 3D terrain toggle, locations (首尔 Seoul, 釜山 Busan, 济州岛 Jeju, 平壤 Pyongyang, 白头山 Paektu) - Exaggeration slider - Tilt/rotate controls (NavigationControl with visualizePitch) - Attribution Also maybe a marker labeling important cities using a GeoJSON layer with symbols? Without a glyph font, symbol layers need glyphs. I can skip text labels or use markers (HTML markers) for cities. I'll add a few HTML markers for major cities with a small popup. Let me handle the globe atmosphere: MapLibre v4+ supports `projection: 'globe'`? It was experimental. To be safe, I'll just do standard mercator with terrain. A map-style UI. Language: respond in Chinese since user wrote in Chinese. The UI labels in Chinese. Let me write the code: ```html 韩国卫星地图 3D

controls

``` Panel content: - Title with 🇰🇷 - Terrain toggle (checkbox) - Exaggeration slider (0.5 - 2) - City buttons: 首尔, 釜山, 济州岛, 仁川, 朝鲜半岛全景 / Korea peninsula view - Info text Also add markers for cities. Initial view: center on peninsula [127.8, 37.3]? South Korea center approx [127.9, 36.5]. Zoom ~6.5 with pitch 0 initially; then maybe fly to pitch. Actually the map will include North Korea too if zoomed out. User said "韩国" (South Korea). Let's focus on South Korea, but include peninsula view button maybe. Buttons: - 首尔 (Seoul) [126.978, 37.5665] - 釜山 (Busan) [129.0756, 35.1796] - 济州岛 (Jeju) [126.5312, 33.4996] - 仁川 (Incheon) [126.7052, 37.4563] - 景福宫? That's too specific. Maybe 雪岳山 (Seoraksan) mountain? Or 汉拿山 Hallasan [126.53, 33.36]. Let me include: 首尔, 釜山, 济州岛(汉拿山), 仁川国际机场 maybe. Keep 4-5 buttons. Terrain exaggeration: Korea mountains moderate; exaggeration 1.5 nice. Also set maxPitch 85 for dramatic views. Add `map.touchZoomRotate`, etc. Code details: ```js const map = new maplibregl.Map({ container: 'map', style: style, center: [127.9, 36.6], zoom: 6.3, pitch: 45, bearing: -15, maxPitch: 85 }); map.addControl(new maplibregl.NavigationControl({visualizePitch:true}), 'top-right'); map.addControl(new maplibregl.FullscreenControl(), 'top-right'); map.addControl(new maplibregl.ScaleControl({unit:'metric'}), 'bottom-right'); ``` Set terrain on load: ```js map.on('load', () => { map.setTerrain({ source: 'terrain', exaggeration: 1.5 }); }); ``` Terrain toggle: uncheck → map.setTerrain(null). Exaggeration slider updates terrain. City flyTo with pitch 60. Markers: create markers with custom HTML element dot + label; add popup with name. Colors: dark UI panel with glassmorphism, accent color. Also handle attribution: ESRI attribution in style. Fine. Potential issue: CORS for AWS S3 elevation tiles — they're public and allow cross-origin? MapLibre raster-dem tiles load as images; S3 elevation tiles return proper CORS headers (they're widely used with MapLibre demos). Yes, the MapLibre terrain demo uses `https://demotiles.maplibre.org/terrain-tiles/{z}/{x}/{y}.png`. Actually MapLibre has their own terrain demo tiles! That's even better: In MapLibre official demo, terrain source: ``` source: { type: 'raster-dem', url: 'https://demotiles.maplibre.org/terrain-tiles/tilejson.json', tileSize: 256 } ``` But it might have limited coverage? The demotiles terrain-tiles tilejson covers the world I think. Hmm, maplibre demotiles are for demo; usage might be discouraged for production but fine for demo. Alternatively use AWS elevation tiles which are an open public dataset. Both CDN-hosted. I'll use the AWS terrarium tiles (`https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png`), widely used. Also note: with no basemap glyphs, terrain is fine. Add sky layer? MapLibre supports `sky` layer? Actually MapLibre style spec has "sky" layer type since v1.? Hmm. MapLibre added `background` only. Mapbox GL v3 has standard style. I'll ignore sky; keep it simple. Let me also add a subtle vignette overlay and a legend header showing "实时卫星影像 · 3D 地形". Let me write final code carefully. Structure: - #map fullscreen - .panel top-left: title, description, toggle, slider, city buttons - .badge bottom-left: data info - loading? Not necessary. JavaScript: ```js const style = { version: 8, sources: { sat: { type: 'raster', tiles: ['https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'], tileSize: 256, maxzoom: 19, attribution: '影像 © Esri, Maxar, Earthstar Geographics' }, terrain: { type: 'raster-dem', tiles: ['https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png'], tileSize: 256, maxzoom: 15, encoding: 'terrarium', attribution: '地形 © AWS Open Data' } }, layers: [ { id: 'sat', type: 'raster', source: 'sat', paint: { 'raster-saturation': 0.1, 'raster-contrast': 0.1 } } ] }; const map = new maplibregl.Map({...}); let terrainOn = true; let exaggeration = 1.5; function applyTerrain(){ map.setTerrain(terrainOn ? {source:'terrain', exaggeration} : null); } map.on('load', applyTerrain); checkbox change; slider input; city buttons flyTo. city markers: list with name and coords; create maplibregl.Marker; popup. ``` Camera per city: - Seoul: zoom 12 - Busan: zoom 11.5 - Jeju (Hallasan): zoom 12, location [126.542, 33.3617]? Hallasan peak approx 126.545, 33.362. - Incheon: zoom 11 - Peninsula view: zoom 6.3, center [127.9, 36.6] Markers for: 首尔, 釜山, 仁川, 济州, maybe 平壤 (capital of North) to show peninsula context? Add 大田 (Daejeon), 大邱 (Daegu), 光州 (Gwangju)? Keep a handful: Seoul, Busan, Incheon, Jeju City, Hallasan, maybe Pyongyang. To keep simple: 4 markers for the buttons. Fine. Marker element: a pulsing dot div. CSS class .marker-dot. Popup: new maplibregl.Popup({offset:12}).setText(name). Also slider styling. Additionally, add a "3D 视角" pitch preset buttons? The nav control suffices. Maybe a rotate toggle button (auto-rotate)? Nice extra: a "环绕飞行" toggle that keeps map rotating via bearing increment. Let me add auto-rotate button. Implementation: ```js let rotating = false; let rafId; function rotate(){ if(!rotating) return; map.rotateTo ? ... } ``` Better: use `map.setBearing(map.getBearing()+0.05)` in requestAnimationFrame throttled? Use map.rotateTo increments cause render. Simple approach: setInterval every 50ms bearing += 0.15. Hmm, to keep smooth use requestAnimationFrame with frame-based increment. OK: ```js let autoRotate = false; function spin(){ if(!autoRotate) return; map.rotateTo(map.getBearing() + 0.13, {duration:0}); requestAnimationFrame(spin); } ``` Calling rotateTo every frame fine. Add button toggling. Alright, write the HTML with nice dark glass UI, Korean flag emoji, Chinese labels. Also ensure `#map` z-index below panel. CSS: panel absolute top-left, width ~300px, backdrop-filter blur, semi-transparent dark, rounded corners. Buttons grid. Range slider styled. Also responsive: panel smaller on mobile. Let me also include a fallback: if terrain tiles fail, map still works (terrain null). Fine. Set `hash: true`? optional. Skip. Projection: could enable globe for cool look at low zoom: `projection: 'globe'` is experimental in MapLibre v4. Terrain + globe may conflict? Terrain with globe supported? In MapLibre, globe + terrain maybe works. Risky; skip. Write final answer in Chinese, brief intro, then full code block with complete HTML. Let me now compose the code fully and double-check API usage: - `maplibregl.Map` options: container, style, center, zoom, pitch, bearing, maxPitch, attributionControl default. OK. - `map.setTerrain({source, exaggeration})` — correct MapLibre API. - NavigationControl({visualizePitch:true}) ok. - Marker with custom element: `new maplibregl.Marker({element: div})`. OK. - Popup class names styling override. Slider event: `oninput`, update exaggeration, applyTerrain. Terrain checkbox: checked default true. Spin button: toggles autoRotate, starts/stops. When flyTo to city, maybe stop rotation. I'll stop rotation on city button click. Also when user drags, rotation continues—might be jarring but okay; maybe turn off automatic when interacting: listen 'mousedown' → stop? Keep simple; rotation only ~slow. Text: Title "韩国卫星 3D 地图", subtitle "Esri 卫星影像 + 3D 地形". Legend: 数据: Esri World Imagery · AWS Terrain Tiles. Ensure code uses id 'terrain-checkbox' etc. City data: ```js const cities = [ {name:'首尔', coord:[126.978, 37.566], zoom:11.5, pitch:60, bearing:20}, {name:'釜山', coord:[129.075, 35.179], zoom:11.5, pitch:60, bearing:-30}, {name:'济州岛', coord:[126.545, 33.38], zoom:11, pitch:60, bearing:0}, {name:'仁川', coord:[126.705, 37.456], zoom:11, pitch:60, bearing:0}, {name:'全景', coord:[127.9, 36.6], zoom:6.3, pitch:40, bearing:-15} ]; ``` Markers only for actual cities (exclude 全景). Popups with names. Marker CSS: pulsing dot using box-shadow animation. Add `map.dragRotate.enable()` default fine; touch two-finger pitch works. Double-check ESRI tile URL pattern: also `https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}` works. One more: attribution position 'bottom-left', our badge bottom-left might overlap; badge bottom-left, attribution bottom-left too... maplibre attribution control default bottom-right with compact. I'll place data badge at bottom center-left but move attribution? Simpler: badge top-right? Controls are top-right. Put badge bottom-left; attribution compact bottom-right; scale maybe bottom-left too... Choose: badge bottom-left, scale bottom-right under attribution. Remove scale control to avoid clutter? Keep; place scale bottom-left might overlap badge. Put badge bottom-left small, scale bottom-right. Attribution control also bottom-right; they stack horizontally? Both in same corner container would overlap. I'll pass `attributionControl: {compact:true}` default; it creates control element. Simplest: omit FullscreenControl & ScaleControl? Keep fullscreen top-right; place scale at bottom-left? badge move to top-right under controls? Hmm. Layout plan: - top-left: panel (controls) - top-right: maplibre nav + fullscreen controls (added with position 'top-right') - bottom-right: attribution (auto) - bottom-left: data badge （影像来源） — will overlap nothing. Skip ScaleControl or place bottom-left with badge below it. I'll skip scale control; not essential. Actually scale useful; I can add it to 'bottom-left' and it will sit above badge (they stack as separate controls in same corner column; ordering by insertion). Fine. Attribution string includes Chinese ok. Also handle SSR? no. Write the final HTML. Also, note about "3D": with terrain tiles, Korea's mountains render in actual relief. Good. Edge: raster-dem maxzoom 15; beyond, blurry terrain fine. Now produce final response: short explanation in Chinese, then one code block containing full HTML (with CDN links). Also mention how to use (save as html open). Keep prose minimal. 以下是完整的单文件网页应用——基于 MapLibre GL JS，使用 Esri 世界卫星影像 + AWS 开放地形数据，实现韩国（朝鲜半岛南部）区域的**可交互 3D 卫星地图**，含真实山体起伏、城市快捷飞行、地形 exaggeration 调节与自动环绕视角。保存为 `.html` 文件直接用浏览器打开即可运行。 ```html 韩国卫星地图 3D

🇰🇷韩国卫星 3D 地图

Esri 高清卫星影像叠加真实地形起伏，拖动 / 双指可倾斜旋转视角。

3D 地形

地形夸张度 1.5×

``` **功能说明：** - 🛰️ **卫星底图**：Esri World Imagery 高清卫星影像，无需 API Key - ⛰️ **3D 地形**：AWS 开放高程数据渲染真实山体（雪岳山、汉拿山等起伏可见） - 🎮 **交互**：拖拽平移、右键拖动/双指旋转、滑轮缩放；导航控件含俯仰角控制 - 🏙️ **快捷飞行**：点击按钮飞到首尔、釜山、济州岛、仁川或朝鲜半岛全景 - 🔄 **环绕视角**：一键自动旋转展示 - 🎚️ **地形夸张度**：0.5×–3× 滑杆实时调节山体起伏强度

生成韩国卫星地图3d