尧图网站建设 尧图网络
  • 首页
  • 关于我们
  • 服务项目
  • 案例展示
  • 建站流程
  • 资讯中心
  • 联系我们
首页/资讯中心/详情

Cesium Entity实战:从基础增删改查到高级性能调优(全流程解析)

Cesium Entity实战:从基础增删改查到高级性能调优(全流程解析)
📅 发布时间:2026/6/30 14:20:08

1. Cesium Entity基础操作全解析

Cesium作为三维地理可视化的利器,Entity是其最核心的数据模型之一。简单来说,Entity就是场景中的各种可视化对象,比如建筑物、车辆、标注点等。与Primitive相比,Entity提供了更高级的封装,让开发者能够更便捷地创建和管理三维对象。

1.1 创建Entity的两种姿势

创建Entity主要有两种方式,我习惯根据项目复杂度来选择:

第一种是直接传入配置对象:

viewer.entities.add({ id: 'myPoint', position: Cesium.Cartesian3.fromDegrees(116.4, 39.9), point: { pixelSize: 15, color: Cesium.Color.RED } });

第二种是先创建Entity实例再添加:

const entity = new Cesium.Entity({ id: 'myBox', position: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 100), box: { dimensions: new Cesium.Cartesian3(10000, 10000, 10000), material: Cesium.Color.BLUE.withAlpha(0.5) } }); viewer.entities.add(entity);

实际项目中我更推荐第二种方式,因为当Entity配置较复杂时,这种方式代码可读性更好,也方便后续维护。有个细节需要注意:虽然第一种方式不用显式创建Entity实例,但Cesium内部会自动转换,本质上两者是等价的。

1.2 实体删除的四种方法

删除实体时,根据场景不同有多个选择:

  1. 按引用删除:适合已知实体引用的情况
viewer.entities.remove(entity);
  1. 按ID删除:当只有实体ID时使用
viewer.entities.removeById('entityId');
  1. 清空所有实体:重置场景时常用
viewer.entities.removeAll();
  1. 批量删除:处理大量实体时效率更高
const entitiesToRemove = [entity1, entity2, entity3]; entitiesToRemove.forEach(e => viewer.entities.remove(e));

我在实际项目中发现,当需要删除数百个实体时,直接使用removeAll()性能最好。但要注意这会清空所有实体,如果只需要删除特定类型的实体,建议先用数组收集目标实体再批量删除。

2. 动态属性与高级交互

2.1 使用CallbackProperty实现动画

让实体动起来是常见需求,CallbackProperty就是为此而生:

const entity = viewer.entities.add({ position: new Cesium.CallbackProperty(function(time) { return Cesium.Cartesian3.fromDegrees( 116.4 + Math.sin(time.secondsOfDay * 0.1) * 0.1, 39.9 ); }, false), point: { pixelSize: 20, color: Cesium.Color.YELLOW } });

这个例子创建了一个左右摆动的点。CallbackProperty会在每一帧渲染时调用回调函数,根据返回值更新属性。第二个参数false表示不强制每帧都更新,这对性能优化很重要。

2.2 事件管理技巧

处理实体事件时,这两个方法可以显著提升性能:

// 暂停事件处理 viewer.entities.suspendEvents(); // 批量添加/修改实体 for(let i=0; i<1000; i++) { viewer.entities.add({...}); } // 恢复事件处理 viewer.entities.resumeEvents();

实测在添加1000个实体时,使用suspendEvents/resumeEvents组合能使操作速度提升3-5倍。原理是暂停期间Cesium不会触发实体变更事件,减少了不必要的计算。

3. 性能优化实战方案

3.1 批量操作的最佳实践

当处理大量实体时,有几个优化技巧很实用:

  1. 预计算位置数据:避免在循环中进行复杂计算
const positions = []; for(let i=0; i<1000; i++) { positions.push(computePosition(i)); } viewer.entities.suspendEvents(); positions.forEach(pos => { viewer.entities.add({ position: pos, point: { pixelSize: 5 } }); }); viewer.entities.resumeEvents();
  1. 使用相同的样式对象:减少内存占用
const pointStyle = { pixelSize: 8, color: Cesium.Color.GREEN }; viewer.entities.suspendEvents(); for(let i=0; i<1000; i++) { viewer.entities.add({ position: positions[i], point: pointStyle }); } viewer.entities.resumeEvents();

3.2 可视域优化策略

对于大规模场景,不是所有实体都需要同时渲染:

// 根据视距控制显示 viewer.scene.postRender.addEventListener(function() { const cameraPosition = viewer.camera.position; viewer.entities.values.forEach(entity => { const show = Cesium.Cartesian3.distance( cameraPosition, entity.position.getValue(viewer.clock.currentTime) ) < 100000; entity.show = show; }); });

这个例子实现了简单的LOD(细节层次)控制,只显示相机10万米范围内的实体。在实际项目中,可以结合四叉树等空间索引结构进行更精细的控制。

4. 实战案例:航班可视化系统

4.1 动态路径绘制

使用CZML实现航班轨迹动态显示:

const czml = [{ id: "document", version: "1.0" }, { id: "flight1", availability: "2023-01-01T00:00:00Z/2023-01-01T02:00:00Z", position: { epoch: "2023-01-01T00:00:00Z", cartographicDegrees: [ 0, 116.4, 39.9, 10000, 60, 116.5, 40.0, 10000, 120, 116.6, 40.1, 10000 ] }, path: { width: 5, material: new Cesium.PolylineGlowMaterialProperty({ glowPower: 0.2, color: Cesium.Color.CYAN }) } }]; const dataSource = await Cesium.CzmlDataSource.load(czml); viewer.dataSources.add(dataSource);

4.2 实时数据更新

对接实时航班数据时,可以采用动态更新策略:

// 每10秒更新一次位置 setInterval(async () => { const flights = await fetchLiveFlights(); flights.forEach(flight => { const entity = viewer.entities.getById(flight.id); if(entity) { entity.position = Cesium.Cartesian3.fromDegrees( flight.longitude, flight.latitude, flight.altitude ); } else { viewer.entities.add({ id: flight.id, position: Cesium.Cartesian3.fromDegrees(...), model: { uri: 'aircraft.glb' } }); } }); }, 10000);

这种模式既保证了数据的实时性,又避免了频繁创建/销毁实体带来的性能开销。在我的一个航空监控项目中,这种方案成功支持了200+架飞机的实时显示。

相关新闻

  • 3分钟掌握:这款免费Chrome插件让你轻松下载网页视频
  • Media Downloader:基于 yt-dlp 的多平台媒体下载工具
  • CORS自动化测试实战:从原理到E2E,攻克跨域接口测试禁区

最新新闻

  • 从入门到精通:OpenEuler/Golang基础语法快速学习手册
  • 鸿蒙物理 108 篇 第五十一篇 热象弥散传导机理
  • 天赐范式第88天:“反密码“诊断矩阵——五大未解密码的结构性评估
  • 2026手机免费去水印APP推荐安卓iOS通用,无需下载在线工具大全
  • openEuler硬件兼容性测试利器:oec-hardware工具完全指南
  • BetterGI:原神玩家的终极自动化助手,解放双手轻松游戏

日新闻

  • 【计算机毕业设计案例】基于 Spring Boot+Vue 的电影售票系统设计与实现 前后端分离架构下影院在线购票管理平台(程序+文档+讲解+定制)
  • 到底 TMD 用哪个: npm, pnpm, Yarn, Bun, Deno? 傻瓜, 当然用 npm 啦
  • Google限制Meta使用Gemini模型 凸显AI授权竞争白热化

周新闻

  • Windows字体自定义终极方案:No!! MeiryoUI完全指南
  • Deepin Boot Maker:告别命令行,3分钟制作Linux启动盘的智能解决方案
  • Plain Craft Launcher 2:重新定义你的Minecraft游戏体验

月新闻

  • 【总结】入门篇:50句话让你记住架构核心概念
  • WeChatMsg技术方案解析:实现Mac微信数据自主管理的完整解决方案
  • WeChatMsg:革新性微信数据备份方案,打造你的专属数字记忆库

关于尧图

  • 公司简介
  • 团队介绍
  • 企业文化
  • 荣誉资质

服务项目

  • 定制开发
  • 电商建站
  • UI 设计
  • 运维服务

快速链接

  • 案例展示
  • 建站流程
  • 常见问题
  • 资讯中心

联系方式

  • 📍北京市朝阳区互联网产业园 A 座 10 层
  • 📞400-888-8888
  • ✉️contact@rkmt.cn
  • 🕐周一至周日 9:00-21:00

© 2024 北京尧图网络科技有限公司 版权所有 | 京 ICP 备 XXXXXXXX 号