【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 langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个Cesium地球/title !-- 引入Cesium的CSS样式文件 -- link relstylesheet hrefhttps://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Widgets/widgets.css !-- 引入Cesium的核心JavaScript库 -- script srchttps://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 idcesiumContainer/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); // 方法1pickEllipsoid - 将屏幕点投射到地球椭球体表面忽略地形和模型 const ellipsoidPosition viewer.scene.camera.pickEllipsoid(screenPosition); // 这个方法返回的Cartesian3是点击方向与地球椭球面的交点。如果点击方向指向天空没点到地球则返回undefined。 // 方法2pickPosition - 将屏幕点投射到场景中的实际物体表面包括地形、3D模型等 const scenePosition viewer.scene.pickPosition(screenPosition); // 这个方法更精确能获取到鼠标点所在的地形高度或模型表面位置。同样没点到东西返回undefined。 // 方法3globe.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}); }为了更直观地理解这些转换关系我整理了一个它们之间如何流动的表格在实际编码时可以快速查阅转换方向核心函数/方法说明与典型应用场景经纬度 → Cartesian3Cesium.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 } });平滑飞行flyToflyTo会产生一个从当前位置到目标位置的平滑动画体验好得多。// 平滑飞往珠穆朗玛峰 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 langzh-CN head meta charsetUTF-8 title实战Cesium坐标转换工具/title link relstylesheet hrefhttps://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Widgets/widgets.css script srchttps://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 idcontainer div idcesiumContainer/div div idcontrolPanel div classsection h3 点击拾取坐标/h3 p在地球上strong单击任意位置/strong此处将显示该点的详细信息。/p div idcoordOutput等待点击.../div /div div classsection h3 坐标定位/h3 label forinputLon经度 (度):/label input typenumber idinputLon stepany placeholder例如116.4 label forinputLat纬度 (度):/label input typenumber idinputLat stepany placeholder例如39.9 label forinputHeight高度 (米):/label input typenumber idinputHeight stepany placeholder例如1000 value1000 button idbtnFlyTo飞行到该坐标/button button idbtnAddMarker在此处添加标记/button /div div classsection h3 坐标转换/h3 p输入经纬度查看其对应的其他坐标系表示。/p label forconvertLon经度:/labelinput typenumber idconvertLon placeholder116.4 label forconvertLat纬度:/labelinput typenumber idconvertLat placeholder39.9 button idbtnConvert执行转换/button div idconvertOutput stylemargin-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 stylecolor: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 strongCartographic (弧度):/strongbr nbsp;nbsp;经度: ${cartographic.longitude.toFixed(6)} radbr nbsp;nbsp;纬度: ${cartographic.latitude.toFixed(6)} radbr strongCartesian3:/strongbr nbsp;nbsp;X: ${cartesian3.x.toFixed(2)}br nbsp;nbsp;Y: ${cartesian3.y.toFixed(2)}br nbsp;nbsp;Z: ${cartesian3.z.toFixed(2)}br strong${screenText}/strong ; document.getElementById(convertOutput).innerHTML output; }); /script /body /html5.2 功能解析与踩坑点这个实战项目虽然代码量不大但几乎用到了我们前面讨论的所有核心知识坐标拾取pickPosition这是交互的起点。我选择了pickPosition而不是pickEllipsoid因为它能获取到地形表面的真实高度结果更精确。但要注意如果场景中没有地形或模型它可能返回undefined所以代码里做了回退处理。实时坐标显示在updateCoordinateDisplay函数里我们完成了从Cartesian3到Cartographic弧度再到人类可读的经纬度角度的完整转换链并同时展示了原始的直角坐标和屏幕坐标。视角控制flyTo在“飞行到该坐标”功能中我们不仅设置了目的地还精心配置了orientation朝向让相机以一个舒适的斜45度角观看目标点而不是生硬的垂直俯瞰。实体管理我们用一个变量currentPickedEntity来记录当前点击产生的标记点。这样在下次点击时可以移除旧的标记避免场景中被标记点堆满。这是管理动态实体的一个常用小技巧。我踩过的一个坑在早期版本中我没有设置viewer.scene.globe.depthTestAgainstTerrain true。这导致pickPosition在复杂地形如山区上拾取的位置总是飘在空中而不是紧贴地面。开启这个选项后拾取精度大幅提升。所以如果你的应用涉及地形交互记得打开这个开关。通过构建这样一个工具你不仅巩固了坐标转换的知识还掌握了事件处理、UI联动和实体动态管理等实用技能。你可以在此基础上继续扩展比如加入“测量两点距离”、“绘制多边形并计算面积”、“导入GeoJSON文件”等功能逐步把它打造成一个功能丰富的迷你GIS应用。