Cesium性能优化:高效加载billboard图标和label文字标签

已于 2022-10-29 00:51:47 修改
阅读量3.5k 收藏 6
点赞数 2
分类专栏： WebGIS 文章标签： Cesium Label 性能优化 Billboard 海量点
于 2022-10-28 23:56:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43524214/article/details/127579022
版权

目录

性能优化：从一个警告谈起

 关于getImageData方法

Label：回溯Label底层渲染机制

LabelCollection集合与Label标签

LabelCollection：添加Label

Label：构造函数

 Label：_updateClamping实例方法

Billboard：以图片方式进行加载

Label与Billboard：高效加载方案

动态绘制任意长度的文本

Label绘制：以canvas+Billboard形式绘制

代码片段封装

性能优化：从一个警告谈起

        前几天使用Cesium.js加载大量的Label文字标签时，突然发现场景会变得很卡顿，然后打开开发者工具，发现出现了一个从未注意到过的浅黄色警告(如下图所示)。

        起初我并未将这个警告和场景渲染大量Label文字标签时，表现出来的卡顿现象联系到一起，直到客户提出这个问题之后。。。

        为了追根溯源，我将之前所有的代码挪到示例Demo中，尝试进行问题复现，于是就定位到了通过LabelCollection加载Label标签会出现黄色警告这个地方。

         这个警告，即时是在官网sandcastle的示例demo中，也是存在的。于是更加好奇，这个警告的具体含义。

​ Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true.

大致意思是：

Canvas2D：getImageData()方法的复杂回调，在willReadFrequently属性设置为true时，效率更高。

<
了解本专栏 订阅专栏 解锁全文 超级会员免费看
是席木木啊
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 16
    评论
专栏目录
订阅专栏
Cesium:高效label文字标签后续
席木木的博客
01-17 1369
Cesium:高效label文字标签后续，渲染5w个label标签完整示例+效果图。
Cesium中加载GIF动画
最新发布
张小宇的博客
04-28 327
cesium 加载gif动画
Cesium功能实现（一）创建billboard广告牌
bingbingbling的博客
06-16 8354
Cesium功能实现（一）创建billboard广告牌Cesium可实现功能之billboard广告牌Cesium官方API成员变量及中文释义案例js和css代码实现给billboard添加label广告牌被底图遮盖无法显示完全设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 Cesium可实现功能之billboard广告牌 最近在学习cesium，试着实现了
优化 cesium 界面广告牌（billboard）数据量大于 10w ＋时，地图加载缓慢、卡顿、加载完成后浏览器严重卡顿甚至崩溃问题
热门推荐
weixin_42508580的博客
09-19 1万+
项目之前的设计，billboard 广告牌是绑在 entityCollection 集合下的，为了能够在获取单个实体（entity）时能够获取更多数据信息（entity 能够注入除了它本身的属性之外的属性信息）entityCollection 集合加上集群聚合功能，数据量临界点在 3w~4w 左右，就会出现界面卡顿。fps 低于 20 并且波动很大，延迟保持在 100ms 左右。数据量低于临界点时，entity 的方式呈现页面还是比较奈斯的。
Cesium之大批量点加载研究
yuxinSir的博客
11-26 3457
需求：有一个6万4千个点的geojson文件全部加载到Cesium地球上去 实现方式： PointPrimitive加载 代码： var randomCount = 80000; var pointPrimitives = null;// 申明点渲染集合 pointPrimitives = this.viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection()); while (randomCount--) { const dd =
Cesium billboard吸附地面（倾斜摄影）
qq_46468347的博客
11-23 616
需要给Cesium地形加上icon图标，使用billboard加上图标后，对于倾斜摄影的模型会出现穿模的效果，导致图标不能看见。
Cesium加载广告牌（三）
DTCloud
04-21 437
在加载广告牌的过程中，已经对广告牌进行了许多属性的设置，但是并没有对广告牌的唯一值进行规范。设置唯一值并不是在billboard的属性内设置，而是在外层的Entity内进行声明。这里有一点需要强调，代买只是声明了一个Entity实例，并没有进行添加，因此需要将Entity添加仅viewer实体中才可以使用。这里的pick中就存储了广告牌的信息，然后根据获取的广告牌的id不同，可以进行接下来的其他操作。对象，返回的是scene中指定位置最上层的对象。拾取后，可以用于改变对象的属性参数，如颜色，图片等。
Cesium通过Geojson批量加载广告牌即Billboard
西柚2015地信小白GISer
07-28 1335
GeoJsonDataSource官方文档 entity官方文档 AddGeojsonBillboardLayer(id, data, image) { let promise = Cesium.GeoJsonDataSource.load(data); //数据加载后渲染 promise.then((ds) => { let entitys = ds.entities.values; entitys.forEach((e) => {..
Cesium性能优化图元数据数据管理js库
09-15
Cesium性能优化，支持海量点位，同时支持鼠hover事件和点击事件
cesium通过billboard加载gif图片例子
12-29
cesium，gif，billboard
43.（cesium篇）cesium加载gif图片.zip
06-09
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“43.（cesium篇）cesium加载gif图片”。如下载有问题，可联系博主。 解压密码：cesium
cesium_demos:cesium样例库
05-02
yarn安装依赖yarn start启动项目样例内容资源加载加载3dtiles调整3dtiles高度自动调整3dtiles贴合地面加载kml加载kml正射底图地标点扩散物体标签测量工具点/线段/体积测量ai模拟自定义路线巡游指令机器人(接收位置、...
Cesium-GeoserverTerrainProvider:插入以使用 geoserver 作为地形提供者
07-24
使用 Cesium 1.6 和 geoserver 2.6.2 进行测试。 许可证：Apache 2.0。 免费用于商业和非商业用途。 参见 LICENSE.md。 用法 可选：在 geoserver 中将 mySLD.xml 作为新样式导入，以在其他颜色范围内渲染您的图层...
cesium自定义美化Label
tutouxiaoyaonie的博客
04-24 1903
【代码】cesium自定义美化Label。
cesium在billboard标签上添加文字
qq_39714792的博客
09-19 1万+
cesium在billboard标签上添加文字 var entity = viewer.entities.add({ name: “billboard”, position: Cesium.Cartesian3.fromDegrees(120.941169, 27.9932,30.0), point: { //点 pixelSize: 0, HeightReference: 1000 }, lab...
cesium 添加billboard实体 点标注
weixin_42448623的博客
09-02 7060
获取 AccessToken <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...
【003】-Cesium中加载大规模数据稳定流畅之性能优化思路
wtuynqy的专栏
02-14 1万+
Cesium 加载大数据的性能优化是一个综合性的过程，需要综合考虑多种因素，采用合适的优化技巧和方法，以达到最佳的性能和用户体验。
Vue + Cesium项目中造成cesium界面卡顿问题的罪魁祸首
weixin_42508580的博客
11-24 7262
Vue + Cesium项目中造成cesium界面卡顿问题的罪魁祸首（优化记录） 千万不要将cesium里的对象如下图entity，保存在vue的data结构树中！！！ 千万不要将cesium里的对象如下图entity，保存在vue的data结构树中！！！ 千万不要将cesium里的对象如下图entity，保存在vue的data结构树中！！！ 一般在cesium注册的事件中处理业务逻辑时会出现这种情况 这种数据保存在vue中属实很愚蠢！！！ ...
Cesium结合Canvas画布创建Billboard
qq_35984445的博客
09-16 1180
5、使用Image方法转换画布内容及返回，赋值billboard实体中的image属性即可。1、了解billboard实体中的image属性是 可以设置指定图像和纹理的。3、将图片作为背景，使用drawImage进行绘制。⑤、创建billboard实体，并使用Image。根据以上思路无法正常使用的小伙伴，可参考以下资源。④、canvas转换为Image。2、创建canvas画布标签。③、画布设置背景图和文字。①、使用原型链进行封装。4、字体可以根据画布。
如何实现cesium 加载文字标签和点数据
08-08
### 回答1： 你可以使用 Cesium 的 `LabelCollection` 和 `PointPrimitiveCollection` 类来实现文字标签和点数据的加载。 下面是一个示例，展示了如何在 Cesium 中加载文字标签和点数据： ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); // 创建 LabelCollection 实例 var labels = viewer.scene.primitives.add(new Cesium.LabelCollection()); // 创建第一个文字标签 var label1 = labels.add({ text: 'Label 1', position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), font: '24px sans-serif' }); // 创建第二个文字标签 var label2 = labels.add({ text: 'Label 2', position: Cesium.Cartesian3.fromDegrees(-80.50, 35.14), font: '24px sans-serif' }); // 创建 PointPrimitiveCollection 实例 var points = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection()); // 创建第一个点 var point1 = points.add({ position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222), color: Cesium.Color.YELLOW, pixelSize: 10 }); // 创建第二个点 var point2 = points.add({ position: Cesium.Cartesian3.fromDegrees(-80.2277778, 25.7888889), color: Cesium.Color.BLUE, pixelSize: 10 }); ``` 在上面的示例中，我们首先创建了一个 `Viewer` 实例，然后创建了一个 `LabelCollection` 和一个 `PointPrimitiveCollection`。接下来，我们使用 `add` 方法在这两个集合中分别添加了两个文字标签和两个点。 注意，你还可以使用其他选项（如颜色、大小等）来调整标签和 ### 回答2： 要实现Cesium加载文字标签和点数据，可以按照以下步骤进行操作： 1. 引入Cesium库：在HTML中引入Cesium库的脚本文件，确保能够正确加载和使用Cesium。 2. 创建Cesium场景：在JavaScript代码中，创建一个Cesium场景对象，用于渲染和显示地球场景。 3. 创建文字标签：使用Cesium中的Entity API，通过创建Entity对象来表示文字标签。可以设置标签的位置、文本内容、样式等属性。 4. 添加文字标签：将创建的文字标签实体对象添加到场景中，使用场景的entities属性进行添加。 5. 创建点数据：同样使用Entity API，创建一个Entity对象来表示点数据。可以设置点的位置、样式、颜色等属性。 6. 添加点数据：将创建的点数据实体对象添加到场景中，同样使用场景的entities属性进行添加。 7. 设置相机视角：可以通过调整相机的位置和朝向来设置地球场景的视角，确保能够合适地展示文字标签和点数据。 8. 运行程序：在网页中运行该程序，Cesium会根据设置的文字标签和点数据渲染地球场景，并显示在相应的位置上。 总结来说，要实现Cesium加载文字标签和点数据，需要引入Cesium库，在JavaScript中创建场景对象，创建文字标签和点数据的实体对象，然后将它们添加到场景中，并设置相机视角。最后，在网页中运行程序即可实现加载文字标签和点数据的效果。 ### 回答3： 要实现Cesium加载文字标签和点数据，需要按照以下步骤进行操作： 1. 首先，确保你已经在项目中引入了Cesium库文件，并可以正确地加载Cesium地球场景。 2. 创建一个新的Cesium.Entity对象，该对象可以包含要显示在地球上的标签和点数据。你可以使用Cesium.Cartesian3类型来指定每个数据的位置。 3. 为每个数据添加文本标签。你可以使用Cesium.LabelGraphics对象来定义文本标签的外观和样式。在此对象中，你可以设置文本内容、字体、大小、颜色等属性。 4. 创建点数据的图形表示。你可以使用Cesium.PointGraphics对象来定义点的外观和样式。在此对象中，你可以设置点的大小、颜色、轮廓颜色等属性。 5. 将创建的标签和点数据的图形表示添加到Entity对象中，使用Cesium的entity.label和entity.point属性分别设置。 6. 最后，将创建的Entity对象添加到Cesium的viewer.entities集合中，以在地球上显示标签和点数据。 以下是示例代码： ```javascript // 创建一个显示标签和点数据的Cesium.Entity对象 var entity = new Cesium.Entity({ position: Cesium.Cartesian3.fromDegrees(lon, lat), // 设置数据的经纬度位置 label: { text: '标签内容', // 设置标签的文本内容 font: 'bold 14px sans-serif', fillColor: Cesium.Color.RED, // 设置标签的填充颜色 verticalOrigin: Cesium.VerticalOrigin.BOTTOM // 设置标签的垂直对齐方式 }, point: { pixelSize: 10, // 设置点的大小 color: Cesium.Color.YELLOW, // 设置点的颜色 outlineColor: Cesium.Color.BLACK, // 设置点的轮廓颜色 outlineWidth: 2 // 设置点的轮廓宽度 } }); // 将创建的Entity对象添加到Cesium的viewer.entities集合中 viewer.entities.add(entity); ``` 通过以上步骤，你就可以在Cesium地球上成功加载并显示文字标签和点数据了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是席木木啊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值