文章介绍Cesium中四种点击拾取方法及适用场景。viewer.scene.pick()用于获取点击位置最上层的Entity、Primitive或3DTiles对象;globe.pick()通过射线获取地球表面坐标,常用于地形经纬高获取;camera.pickEllipsoid()基于椭球模型拾取裸球表面位置;pickPosition()适合获取模型表面等三维物体坐标。文中同时说明各方法的返回结果、使用限制及深度检测等配置要求,帮助开发者根据需求选择合适的拾取方式。
文章介绍了在 Cesium 中通过点击事件获取 3D 模型属性并实现模型高亮的方法。示例代码使用 ScreenSpaceEventHandler 监听鼠标左键点击,通过 viewer.scene.pick 拾取模型对象,利用 getPropertyIds 和 getProperty 获取模型属性信息,并记录选中对象及原始颜色。点击新对象或空白区域时恢复之前模型颜色,再将当前模型设置为半透明红色高亮,实现模型交互选择与属性查看功能。该方法适用于建筑等 3D Tiles 模型的属性查询和视觉反馈。
Cesium 中 Entity API 与 Primitive API 分别面向业务开发和底层渲染优化。Entity API 提供高层地理对象封装,内置坐标转换、动态属性、样式管理和交互能力,开发效率高,适合中小规模数据可视化、快速开发和业务应用,但大量实体渲染时性能和定制能力受限。Primitive API 直接操作 WebGL 图元,支持精细控制、批量渲染和自定义着色器,适合大规模数据、高性能场景及特殊渲染需求,但开发成本和资源管理难度较高。实际项目中可根据数据规模、性能需求采用 Entity、Primitive 或混合方案,以平衡开发效率与渲染性能。
Cesium 绘制带边框的贴地多边形时,直接使用 polygon 的 outline 属性会受到高度设置限制。当设置 heightReference 为 CLAMP_TO_GROUND 实现贴地效果时,outline 可能无法正常显示;而设置高度后又只能使用 NONE 模式,导致多边形因高度差出现遮挡问题。解决方式是不要依赖 polygon 的 outline,而是在绘制多边形的同时创建一个相同坐标的 polyline 作为边框。通过动态添加首个坐标到线条末尾,形成闭合边界,并设置 clampToGround: true,使边框与模型保持贴地显示。该方案可同时满足不规则面绘制、贴地效果和边框展示需求。
本文围绕 Vite、Vue3 与 Cesium 的使用实践展开,介绍了 Cesium 项目安装配置、Viewer 初始化、底图空洞处理、3D Tiles 数据加载、WMS 要素点击查询与高亮显示等核心操作。同时总结了底图颜色调整、相机缩放事件监听、cesium-navigation-es6 导航插件集成以及禁止缩放旋转平移等视图控制方法,为 Cesium 地图应用开发提供了常用实现思路和代码参考。
本文介绍了在 Cesium 中加载 3D Tiles 数据的方法,通过异步函数调用 `Cesium3DTileset.fromUrl` 创建三维瓦片集,并将其添加到 Viewer 场景中进行展示。示例代码先检测 Viewer 是否初始化,再加载指定 `tileset.json` 地址的数据,同时配置 LOD、屏幕空间误差、节点加载、裁剪等参数,以优化大规模三维数据的加载效率和渲染性能。加载过程中使用异常捕获机制处理创建失败情况,提升程序稳定性。该方法适用于 Cesium 场景中集成 3D Tiles 模型数据。
本文介绍 Cesium 中添加点实体的方法,通过 viewer.entities.add 创建实体,并设置名称、经纬度位置以及 billboard 图标,实现地图上的点标记展示。代码支持配置图标尺寸、旋转角度、高度参考、偏移量和距离显示范围等属性,还提供可选 label 标签设置,用于控制点位文字样式。通过这些配置,可以灵活调整实体在三维场景中的显示效果和交互表现。
本文介绍 Cesium 加载地形的方式变化,重点说明 1.107 版本前后的 API 差异。1.107 版本后,可通过 `Cesium.Terrain.fromWorldTerrain()` 快速加载基础全球地形,也可使用 `CesiumTerrainProvider.fromUrl()` 配置自定义地形数据源,并通过 `createWorldTerrainAsync()` 加载全球地形,同时支持水面掩膜和顶点法线请求。1.107 版本前主要使用 `createWorldTerrain()` 加载全球地形,自定义数据源则通过 `new Cesium.CesiumTerrainProvider()` 创建。了解版本差异有助于正确配置 Cesium 地形服务。
本文介绍在 Vite + Vue3 项目中使用 Cesium 加载 GeoJSON LineString 数据的方法。通过初始化 Cesium Viewer、配置暗色地图环境,并读取 GeoJSON 坐标生成 Cartesian3 点位,利用 Polyline 实体绘制带发光效果的线路。同时结合 BoundingSphere 自动计算数据范围,实现相机视角定位,使线路完整展示。示例还包含 Cesium 组件生命周期管理,在卸载时销毁实例释放资源,并处理 GeoJSON 数据为空时的默认定位逻辑,为 Vue3 集成 Cesium 绘制线数据提供完整实现方案。
本文介绍在 Vite + Vue3 项目中集成 Cesium 创建地图的方法。首先通过 npm 安装 `cesium` 和 `vite-plugin-cesium` 插件,并在 `vite.config` 中配置 Cesium 插件。随后在 Vue3 组件中引入 Cesium,使用 `ref` 管理地图容器和 Viewer 实例,在 `onMounted` 生命周期中完成地图初始化。示例展示了关闭默认控件、设置暗色地球背景、调整 WebGL 配置以及通过 `camera.flyTo` 定位指定经纬度和高度的方法。同时在组件卸载时销毁 Cesium 实例,释放资源,避免内存占用。该方案可用于快速搭建基于 Vue3 的 Cesium 三维地图应用。