【Cesium打造动态地球】从零构建3D地球可视化与交互式坐标转换系统
1. 从零开始：为什么选择Cesium来构建你的3D地球？
如果你对在网页上展示一个可以自由旋转、缩放，还能叠加各种数据的3D地球感兴趣，那么Cesium几乎是你绕不开的选择。我刚开始接触Web 3D可视化的时候，也试过其他一些库，但最后发现，对于地理空间相关的项目，Cesium的“开箱即用”和专业程度，真的能帮你省下大把时间。它不是一个简单的3D模型展示库，而是一个为地理信息量身定制的完整平台。
简单来说，Cesium就是一个用JavaScript写的、基于WebGL的3D地球引擎。你不需要安装任何插件，用户用现代浏览器打开你的网页，就能看到一个从太空视角开始，可以无缝放大到街道级别的动态地球。这背后是它强大的流式数据加载能力，能实时调度全球的地形、影像、3D建筑模型等海量数据。我印象最深的是第一次成功运行Cesium示例的时候，那种把一个完整、可交互的星球“搬”到自己网页上的感觉，非常震撼。
对于GIS开发者来说，Cesium提供了从数据接入（支持KML、GeoJSON、CZML等多种格式）、空间分析到高性能渲染的一整套工具。而对于Web前端或3D可视化的初学者，你可能会担心它的学习曲线。我的经验是，它的核心API设计得相当直观，尤其是用Entity系统来添加点、线、面、模型，思路非常清晰，很像在使用一个声明式的绘图工具。只要你有一些JavaScript基础，跟着步骤走，一两个小时就能让第一个标记点出现在地球上。
所以，无论你是想做一个酷炫的数据大屏，展示全球航班轨迹；还是做一个教育应用，模拟太阳系运行；或者是一个专业的GIS分析工具，Cesium都能提供坚实的技术底座。接下来，我就带你一步步搭建环境，并深入最核心的坐标转换和交互控制功能。
2. 5分钟快速上手：创建你的第一个Cesium地球
理论说再多不如动手试一下。我们不用任何复杂的框架（比如Vue或React），就用最纯粹的HTML和JavaScript，快速感受一下Cesium的魅力。这个过程比你想的要简单。
2.1 获取Cesium库与访问令牌
首先，你需要Cesium的库文件。最直接的方法是访问Cesium的官方网站，在下载页面获取最新版本的库。不过这里有个小建议，对于学习和初期开发，我强烈推荐使用它的CDN链接，这样连下载都省了。但在正式项目中，为了稳定性和离线能力，还是建议下载本地库。
无论用哪种方式，你都需要一个非常关键的东西——Access Token（访问令牌）。Cesium的全球高清影像和地形数据服务是通过其Ion平台提供的，你需要一个免费账户来获取令牌。注册过程很简单，在官网点击“Access Tokens”，就能创建并复制你的令牌。这个令牌就像一把钥匙，没有它，你的地球可能只是一片单调的蓝色球体，无法加载出精美的卫星影像。记得把它妥善保存在你的项目配置里。
2.2 编写第一个HTML文件
我们来写一个最简单的“Hello, World”级别的Cesium页面。创建一个新的HTML文件，比如叫做first_earth.html。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的第一个Cesium地球</title> <!-- 引入Cesium的CSS样式文件 --> <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Widgets/widgets.css"> <!-- 引入Cesium的核心JavaScript库 --> <script src="https://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Cesium.js"></script> <style> /* 让地球视图填满整个浏览器窗口 */ html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <!-- 这个div就是地球的“画布” --> <div id="cesiumContainer"></div> <script> // 步骤1：设置你的Ion访问令牌（请替换成你自己的） Cesium.Ion.defaultAccessToken = '你的_Access_Token_放在这里'; // 步骤2：创建Viewer实例，这是Cesium应用的入口和总控制器 const viewer = new Cesium.Viewer('cesiumContainer', { // 这里可以配置很多选项，我们先保持默认 // 例如，去掉一些默认控件让界面更干净： // animation: false, // 隐藏动画播放控件 // timeline: false, // 隐藏时间轴控件 // geocoder: false, // 隐藏搜索框 // baseLayerPicker: false, // 隐藏底图选择器 }); // 步骤3：添加一个简单的实体（比如一个红色圆点）到北京上空 const beijingEntity = viewer.entities.add({ name: '北京', position: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 1000), // 经度，纬度，高度（米） point: { pixelSize: 20, color: Cesium.Color.RED, outlineColor: Cesium.Color.WHITE, outlineWidth: 2 }, label: { text: '中国北京', font: '14pt sans-serif', style: Cesium.LabelStyle.FILL_AND_OUTLINE, outlineWidth: 2, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 标签在点的下方 pixelOffset: new Cesium.Cartesian2(0, -20) // 垂直偏移 } }); // 步骤4：将相机视角“飞”到这个点上空，让我们能看清它 viewer.zoomTo(beijingEntity); </script> </body> </html>把上面代码中的你的_Access_Token_放在这里替换成你从官网获取的真实令牌，然后用浏览器打开这个HTML文件。如果一切顺利，你会看到一个从深邃太空逐渐拉近、最终聚焦于北京上空一个红色标记点的动态过程。你可以用鼠标左键拖拽旋转地球，右键拖拽平移，滚轮缩放。恭喜你，一个具备基本交互功能的3D地球已经诞生了！
这个简单的例子包含了几个核心概念：Viewer是总管家，负责管理场景、控件和数据层；Entity是我们添加的“东西”，比如点、线、模型；Cesium.Cartesian3.fromDegrees是我们第一次接触的坐标转换函数，它把人类熟悉的经纬度，转换成了Cesium内部使用的三维直角坐标。接下来，我们就深入这个看似简单实则至关重要的主题——坐标系。
3. 核心基石：彻底搞懂Cesium中的坐标系与转换
坐标转换是Cesium开发中最基础，也最容易让人困惑的部分。很多特效做不出来、位置对不准的问题，根源都在于对坐标系的理解不透彻。我刚开始也在这里踩过不少坑，比如屏幕上一个点击，怎么知道对应地球上的哪个位置？别担心，我们把它拆开揉碎了讲。
3.1 Cesium常用的五种坐标系
Cesium内部主要使用五种坐标系，它们在不同的场景下各司其职：
- WGS84经纬度坐标系（最常用）：就是我们日常说的经度（-180 到 180）、纬度（-90 到 90）和高度（米）。例如
{longitude: 116.4, latitude: 39.9, height: 50}。这不是一个Cesium对象，而是一种数据格式。 - WGS84弧度坐标系（Cartographic）：这是Cesium中表示地理位置的核心对象。它用弧度而非角度来表示经度和纬度。因为计算机的三角函数计算用的是弧度，所以这是很多底层API需要的格式。
new Cesium.Cartographic(longitudeRadians, latitudeRadians, height)。 - 笛卡尔空间直角坐标系（Cartesian3）：这是Cesium内部进行3D渲染和计算的主力坐标系。它是一个三维坐标
(x, y, z)，原点在地球中心。所有的位置、向量计算最终都会落到这个坐标系。new Cesium.Cartesian3(x, y, z)。 - 平面坐标系（Cartesian2）：这是一个二维坐标
(x, y)，主要用于表示屏幕像素位置。原点通常在Canvas画布的左上角。当你处理鼠标点击、UI叠加时，用的就是它。 - 4D笛卡尔坐标系（Cartesian4）：主要用于图形学中的齐次坐标，在普通开发中接触较少，我们先不做深入。
3.2 实战：经纬度、弧度与直角坐标的相互转换
理解了分类，关键是怎么转。下面这些函数是你必须像乘法口诀一样记熟的。
角度与弧度的互转：这是所有转换的起点。
// 角度转弧度 const radians = Cesium.Math.toRadians(degrees); // 弧度转角度 const degrees = Cesium.Math.toDegrees(radians);WGS84经纬度 转 WGS84弧度（Cartographic）：
// 这是最常用的创建地理坐标的方法 const cartographic = Cesium.Cartographic.fromDegrees(116.4, 39.9, 100); // 或者从弧度创建（如果你已经有弧度值） const cartographicFromRadians = new Cesium.Cartographic(longitudeRadians, latitudeRadians, height);WGS84弧度（Cartographic） 转 笛卡尔空间直角坐标（Cartesian3）：
// 将地理坐标转换为空间直角坐标（核心转换！） const cartesian3 = Cesium.Cartographic.toCartesian(cartographic); // 更常见的用法是，直接从经纬度转到Cartesian3 const cartesian3FromDegrees = Cesium.Cartesian3.fromDegrees(116.4, 39.9, 100); // 或者从弧度数组转换（处理多个点或路径时有用） const positionsArray = [Cesium.Math.toRadians(116.4), Cesium.Math.toRadians(39.9), 100]; const cartesian3FromRadians = Cesium.Cartesian3.fromRadians(positionsArray[0], positionsArray[1], positionsArray[2]);笛卡尔空间直角坐标（Cartesian3） 转回 WGS84弧度（Cartographic）：
// 这是逆转换，当你有一个空间中的点，想知道它的经纬度时使用 const cartographicFromCartesian = Cesium.Cartographic.fromCartesian(cartesian3); // 或者通过椭球体对象转换（更底层的方法） const ellipsoid = viewer.scene.globe.ellipsoid; const cartographic = ellipsoid.cartesianToCartographic(cartesian3); // 拿到Cartographic后，可以再转成角度 const longitudeDeg = Cesium.Math.toDegrees(cartographic.longitude); const latitudeDeg = Cesium.Math.toDegrees(cartographic.latitude); const height = cartographic.height;3.3 屏幕坐标与三维世界坐标的桥梁
这是实现交互的关键。比如，用户点击屏幕某处，你想知道点击的是地球上的哪个城市，或者想在那个位置放置一个图标。
屏幕坐标（Cartesian2） 转 地球椭球面坐标（Cartesian3）：
// 假设我们有一个鼠标事件的屏幕坐标 (x, y) const screenPosition = new Cesium.Cartesian2(event.clientX, event.clientY); // 方法1：pickEllipsoid - 将屏幕点投射到地球椭球体表面（忽略地形和模型） const ellipsoidPosition = viewer.scene.camera.pickEllipsoid(screenPosition); // 这个方法返回的Cartesian3是点击方向与地球椭球面的交点。如果点击方向指向天空（没点到地球），则返回undefined。 // 方法2：pickPosition - 将屏幕点投射到场景中的实际物体表面（包括地形、3D模型等） const scenePosition = viewer.scene.pickPosition(screenPosition); // 这个方法更精确，能获取到鼠标点所在的地形高度或模型表面位置。同样，没点到东西返回undefined。 // 方法3：globe.pick - 更底层的、专门针对地形和影像的拾取 const ray = viewer.camera.getPickRay(screenPosition); const globePosition = viewer.scene.globe.pick(ray, viewer.scene);三维世界坐标（Cartesian3） 转 屏幕坐标（Cartesian2）：
// 已知一个地球上的位置（Cartesian3），想知道它在当前屏幕上的像素坐标 const worldPosition = Cesium.Cartesian3.fromDegrees(116.4, 39.9, 0); const screenPosition2D = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, worldPosition); // 这个函数非常有用！比如你想做一个“标签”，始终跟随地球上的某个物体在屏幕上显示，就需要不断计算它的屏幕坐标。 if (screenPosition2D) { console.log(`该点在屏幕上的位置是：x=${screenPosition2D.x}, y=${screenPosition2D.y}`); }为了更直观地理解这些转换关系，我整理了一个它们之间如何流动的表格，在实际编码时可以快速查阅：
| 转换方向 | 核心函数/方法 | 说明与典型应用场景 |
|---|---|---|
| 经纬度 → Cartesian3 | Cesium.Cartesian3.fromDegrees(lon, lat, height) | 最常用。添加实体、设置相机位置时使用。 |
| Cartesian3 → 经纬度 | Cesium.Cartographic.fromCartesian(cartesian3)-> 再转角度 | 获取实体位置、计算距离/面积时使用。 |
| 屏幕点击 → 地球位置 | viewer.scene.pickPosition(screenPos) | 交互核心。实现点击地图添加标记、查询信息。 |
| 地球位置 → 屏幕位置 | Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, cartesian3) | UI叠加核心。实现动态标签、测量工具提示框。 |
| 角度 ↔ 弧度 | Cesium.Math.toRadians()/toDegrees() | 所有涉及三角函数计算前的必备步骤。 |
掌握这些转换，你就打通了Cesium开发的“任督二脉”。数据可以自由地从地理格式（GeoJSON的经纬度）变成Cesium能渲染的格式（Cartesian3），用户的交互（鼠标点击）也能被准确翻译成地理意义（某个城市的坐标）。
4. 让地球“活”起来：高级交互与视角控制
一个静态的地球展示只是开始，真正的魅力在于动态和交互。Cesium的Camera（相机）系统给了我们导演般的权力，可以控制用户看哪里、怎么看。我们不仅能瞬间“跳转”到某个位置，还能制作平滑的飞行动画，或者绑定到实体上进行跟踪拍摄。
4.1 相机（Camera）的基本操作
相机控制了观察者的眼睛。viewer.camera对象提供了丰富的方法。
瞬间设置视图（setView）： 这是最直接的方式，让相机立刻到达指定位置和角度。
// 直接飞到北京上空，俯视角度 viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 5000.0), // 目标位置（北京上空5公里） orientation: { heading: Cesium.Math.toRadians(0), // 朝向，0度为正北 pitch: Cesium.Math.toRadians(-90), // 俯仰角，-90度为正向下（垂直俯瞰） roll: 0.0 // 翻滚角，通常为0 } });平滑飞行（flyTo）：flyTo会产生一个从当前位置到目标位置的平滑动画，体验好得多。
// 平滑飞往珠穆朗玛峰 viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(86.925, 27.9881, 10000.0), // 珠峰上空10公里 duration: 5.0, // 飞行时间，单位秒。不设置则根据距离自动计算 orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-30), // 稍微倾斜一点，有透视感 roll: 0.0 }, // 飞行过程中的回调函数，可以制作更复杂的路径动画 complete: function () { console.log('已到达珠穆朗玛峰！'); }, cancel: function () { console.log('飞行被取消'); } });更复杂的路径飞行（flyTo搭配waypoints）： 你可以定义一系列路径点，让相机沿着特定轨迹飞行。
const start = Cesium.Cartesian3.fromDegrees(116.4, 39.9, 500000); // 北京高空 const middle = Cesium.Cartesian3.fromDegrees(104.0, 30.6, 300000); // 成都上空 const end = Cesium.Cartesian3.fromDegrees(121.4, 31.2, 10000); // 上海低空 // 创建一个CatmullRomSpline曲线，让飞行路径更平滑 const spline = new Cesium.CatmullRomSpline({ times: [0.0, 0.5, 1.0], // 时间点 points: [start, middle, end] // 空间点 }); viewer.camera.flyTo({ destination: end, orientation: { // 可以让相机在飞行中自动调整方向，始终看向路径的前方 direction: new Cesium.Cartesian3(), up: new Cesium.Cartesian3() }, // 使用自定义函数动态计算每一帧的位置和朝向 flyOverLongitude: Cesium.Math.toRadians(20), // 可以控制飞越的经度跨度 pitchAdjustHeight: 200000, // 在高于此高度时调整俯仰角 maximumHeight: 800000 // 飞行最大高度 });4.2 实体跟踪与视角锁定
有时候，我们需要相机一直跟随一个移动的物体，比如跟踪一架飞机、一艘船。Cesium提供了非常方便的跟踪功能。
// 假设我们有一个代表飞机的实体 const airplaneEntity = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 10000), model: { uri: './models/airplane.glb', // 你的3D模型路径 scale: 10.0 } }); // 方法1：直接设置跟踪实体（最简单） viewer.trackedEntity = airplaneEntity; // 设置后，相机就会自动锁定这个实体，实体移动，相机视角也跟着移动。 // 方法2：使用zoomTo或flyTo，并设置偏移量（更灵活） viewer.zoomTo(airplaneEntity, new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-45), 5000)); // HeadingPitchRange 定义了相机相对于实体的方位：朝向角0度，俯仰角-45度（从后方斜上方看），距离5000米。 // 如果你想取消跟踪，只需设置为null // viewer.trackedEntity = null;4.3 响应鼠标与键盘事件
绑定用户输入，可以创建自定义的交互模式。比如，按“R”键重置视图，双击实体时飞近查看。
// 示例1：监听屏幕双击事件，获取点击位置的地理坐标并添加标记 const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); handler.setInputAction(function (movement) { const cartesian = viewer.scene.pickPosition(movement.position); if (Cesium.defined(cartesian)) { // 将点击位置转换为经纬度 const cartographic = Cesium.Cartographic.fromCartesian(cartesian); const lon = Cesium.Math.toDegrees(cartographic.longitude); const lat = Cesium.Math.toDegrees(cartographic.latitude); const height = cartographic.height; // 在点击处添加一个点 viewer.entities.add({ position: cartesian, point: { pixelSize: 15, color: Cesium.Color.YELLOW }, label: { text: `经度: ${lon.toFixed(4)}\n纬度: ${lat.toFixed(4)}\n高度: ${height.toFixed(1)}米`, font: '12px monospace', style: Cesium.LabelStyle.FILL_AND_OUTLINE, pixelOffset: new Cesium.Cartesian2(0, -30) } }); // 飞近查看这个新添加的点 viewer.camera.flyTo({ destination: cartesian, offset: new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-30), 1000) }); } }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); // 绑定到左键双击 // 示例2：监听键盘事件，按“H”键飞回初始位置（Home） document.addEventListener('keydown', function (e) { if (e.key === 'h' || e.key === 'H') { viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(0, 0, 20000000), // 初始的全球视角 duration: 2.0 }); } });通过这些相机控制和交互事件，你的地球应用就从“可看”变成了“可玩”。用户可以通过你设计的按钮、快捷键或者自然的鼠标交互，自由探索这个三维世界。在实际项目中，我经常将这些功能封装成自定义的控件或工具栏，提供“定位到城市”、“飞行漫游”、“测量距离”等按钮，用户体验会提升一个档次。
5. 项目实战：构建一个交互式坐标转换工具
光说不练假把式。现在我们把前面学到的所有知识串联起来，做一个有实用价值的小工具：一个交互式坐标转换与标记系统。这个工具允许用户点击地球任意位置，自动显示该点的WGS84经纬度、直角坐标，并能将手动输入的经纬度定位到地球上。
5.1 设计UI与布局
我们先搭建一个简单的界面，左边是地球视图，右边是一个信息面板。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>实战：Cesium坐标转换工具</title> <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Widgets/widgets.css"> <script src="https://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Cesium.js"></script> <style> body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: sans-serif; } #container { display: flex; width: 100%; height: 100%; } #cesiumContainer { flex: 3; } #controlPanel { flex: 1; padding: 20px; background: #f5f5f5; border-left: 1px solid #ddd; overflow-y: auto; box-sizing: border-box; } .section { margin-bottom: 25px; } h3 { color: #333; border-bottom: 2px solid #4caf50; padding-bottom: 5px; } label { display: block; margin: 10px 0 5px; font-weight: bold; } input, button { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { background-color: #4caf50; color: white; border: none; cursor: pointer; font-size: 16px; } button:hover { background-color: #45a049; } #coordOutput { background: #fff; padding: 15px; border: 1px dashed #ccc; border-radius: 4px; font-family: monospace; white-space: pre-wrap; } </style> </head> <body> <div id="container"> <div id="cesiumContainer"></div> <div id="controlPanel"> <div class="section"> <h3>📌 点击拾取坐标</h3> <p>在地球上<strong>单击任意位置</strong>，此处将显示该点的详细信息。</p> <div id="coordOutput">等待点击...</div> </div> <div class="section"> <h3>📍 坐标定位</h3> <label for="inputLon">经度 (度):</label> <input type="number" id="inputLon" step="any" placeholder="例如：116.4"> <label for="inputLat">纬度 (度):</label> <input type="number" id="inputLat" step="any" placeholder="例如：39.9"> <label for="inputHeight">高度 (米):</label> <input type="number" id="inputHeight" step="any" placeholder="例如：1000" value="1000"> <button id="btnFlyTo">飞行到该坐标</button> <button id="btnAddMarker">在此处添加标记</button> </div> <div class="section"> <h3>🔄 坐标转换</h3> <p>输入经纬度，查看其对应的其他坐标系表示。</p> <label for="convertLon">经度:</label><input type="number" id="convertLon" placeholder="116.4"> <label for="convertLat">纬度:</label><input type="number" id="convertLat" placeholder="39.9"> <button id="btnConvert">执行转换</button> <div id="convertOutput" style="margin-top:15px;"></div> </div> </div> </div> <script> // 你的Cesium Access Token Cesium.Ion.defaultAccessToken = '你的_Access_Token'; // 初始化Viewer，并隐藏一些默认控件让界面更清爽 const viewer = new Cesium.Viewer('cesiumContainer', { animation: false, timeline: false, geocoder: false, homeButton: false, sceneModePicker: false, baseLayerPicker: false, navigationHelpButton: false, fullscreenButton: true }); // 为了拾取更精确，我们启用地形深度检测（如果使用了地形） viewer.scene.globe.depthTestAgainstTerrain = true; // 存储当前点击的实体，方便后续操作（如删除） let currentPickedEntity = null; // --- 功能1：点击地球拾取坐标 --- const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); handler.setInputAction(function (click) { // 使用pickPosition，它能获取地形和模型表面的精确位置 const cartesian = viewer.scene.pickPosition(click.position); if (!Cesium.defined(cartesian)) { // 如果没点到任何东西（比如点到空中），尝试点椭球体 const ellipsoidPos = viewer.scene.camera.pickEllipsoid(click.position); if (Cesium.defined(ellipsoidPos)) { updateCoordinateDisplay(ellipsoidPos, click.position); addMarkerAtPosition(ellipsoidPos, '点击标记（椭球面）'); } else { document.getElementById('coordOutput').textContent = '点击位置无效（可能点到了太空）。'; } return; } // 更新右侧面板显示 updateCoordinateDisplay(cartesian, click.position); // 在点击位置添加一个临时标记 addMarkerAtPosition(cartesian, '点击标记'); }, Cesium.ScreenSpaceEventType.LEFT_CLICK); function updateCoordinateDisplay(cartesian3, screenPos) { // 转换到各种坐标格式 const cartographic = Cesium.Cartographic.fromCartesian(cartesian3); const lonDeg = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6); const latDeg = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6); const height = cartographic.height.toFixed(2); const screenPosText = `屏幕坐标: (${screenPos.x.toFixed(0)}, ${screenPos.y.toFixed(0)})`; const wgs84Text = `WGS84经纬度: (${lonDeg}°, ${latDeg}°) 高度: ${height}米`; const cartesianText = `笛卡尔坐标 (Cartesian3): \n X: ${cartesian3.x.toFixed(2)}\n Y: ${cartesian3.y.toFixed(2)}\n Z: ${cartesian3.z.toFixed(2)}`; document.getElementById('coordOutput').innerHTML = `<strong>${screenPosText}</strong>\n\n${wgs84Text}\n\n${cartesianText}`; } function addMarkerAtPosition(position, name) { // 移除之前点击的标记 if (currentPickedEntity) { viewer.entities.remove(currentPickedEntity); } currentPickedEntity = viewer.entities.add({ position: position, name: name, point: { pixelSize: 15, color: Cesium.Color.GREEN, outlineColor: Cesium.Color.WHITE, outlineWidth: 2 }, label: { text: name, font: '14px sans-serif', pixelOffset: new Cesium.Cartesian2(0, -25) } }); } // --- 功能2：输入坐标进行定位和标记 --- document.getElementById('btnFlyTo').addEventListener('click', function() { const lon = parseFloat(document.getElementById('inputLon').value); const lat = parseFloat(document.getElementById('inputLat').value); const height = parseFloat(document.getElementById('inputHeight').value); if (isNaN(lon) || isNaN(lat)) { alert('请输入有效的经度和纬度！'); return; } const target = Cesium.Cartesian3.fromDegrees(lon, lat, height); viewer.camera.flyTo({ destination: target, duration: 3, orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-45), roll: 0 } }); }); document.getElementById('btnAddMarker').addEventListener('click', function() { const lon = parseFloat(document.getElementById('inputLon').value); const lat = parseFloat(document.getElementById('inputLat').value); const height = parseFloat(document.getElementById('inputHeight').value); if (isNaN(lon) || isNaN(lat)) return; const position = Cesium.Cartesian3.fromDegrees(lon, lat, height); viewer.entities.add({ position: position, point: { pixelSize: 12, color: Cesium.Color.BLUE }, label: { text: `输入点 (${lon.toFixed(4)}, ${lat.toFixed(4)})`, font: '12px sans-serif', pixelOffset: new Cesium.Cartesian2(0, -20) } }); }); // --- 功能3：坐标转换演示 --- document.getElementById('btnConvert').addEventListener('click', function() { const lon = parseFloat(document.getElementById('convertLon').value); const lat = parseFloat(document.getElementById('convertLat').value); if (isNaN(lon) || isNaN(lat)) { document.getElementById('convertOutput').innerHTML = '<span style="color:red;">请输入经纬度。</span>'; return; } // 1. 经纬度 -> Cartographic (弧度) const cartographic = Cesium.Cartographic.fromDegrees(lon, lat, 0); // 2. Cartographic -> Cartesian3 const cartesian3 = Cesium.Cartographic.toCartesian(cartographic); // 3. Cartesian3 -> 屏幕坐标 (需要该点当前在视野内) const screenPos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, cartesian3); let screenText = '（该点可能不在当前屏幕内）'; if (screenPos) { screenText = `屏幕坐标: (${screenPos.x.toFixed(0)}, ${screenPos.y.toFixed(0)})`; } const output = ` <strong>输入:</strong> 经度 ${lon}°, 纬度 ${lat}°<br> <strong>Cartographic (弧度):</strong><br> 经度: ${cartographic.longitude.toFixed(6)} rad<br> 纬度: ${cartographic.latitude.toFixed(6)} rad<br> <strong>Cartesian3:</strong><br> X: ${cartesian3.x.toFixed(2)}<br> Y: ${cartesian3.y.toFixed(2)}<br> Z: ${cartesian3.z.toFixed(2)}<br> <strong>${screenText}</strong> `; document.getElementById('convertOutput').innerHTML = output; }); </script> </body> </html>5.2 功能解析与踩坑点
这个实战项目虽然代码量不大，但几乎用到了我们前面讨论的所有核心知识：
- 坐标拾取（
pickPosition）：这是交互的起点。我选择了pickPosition而不是pickEllipsoid，因为它能获取到地形表面的真实高度，结果更精确。但要注意，如果场景中没有地形或模型，它可能返回undefined，所以代码里做了回退处理。 - 实时坐标显示：在
updateCoordinateDisplay函数里，我们完成了从Cartesian3到Cartographic（弧度），再到人类可读的经纬度（角度）的完整转换链，并同时展示了原始的直角坐标和屏幕坐标。 - 视角控制（
flyTo）：在“飞行到该坐标”功能中，我们不仅设置了目的地，还精心配置了orientation（朝向），让相机以一个舒适的斜45度角观看目标点，而不是生硬的垂直俯瞰。 - 实体管理：我们用一个变量
currentPickedEntity来记录当前点击产生的标记点。这样在下次点击时，可以移除旧的标记，避免场景中被标记点堆满。这是管理动态实体的一个常用小技巧。
我踩过的一个坑：在早期版本中，我没有设置viewer.scene.globe.depthTestAgainstTerrain = true。这导致pickPosition在复杂地形（如山区）上拾取的位置总是飘在空中，而不是紧贴地面。开启这个选项后，拾取精度大幅提升。所以，如果你的应用涉及地形交互，记得打开这个开关。
通过构建这样一个工具，你不仅巩固了坐标转换的知识，还掌握了事件处理、UI联动和实体动态管理等实用技能。你可以在此基础上继续扩展，比如加入“测量两点距离”、“绘制多边形并计算面积”、“导入GeoJSON文件”等功能，逐步把它打造成一个功能丰富的迷你GIS应用。