Cesium中通过Primitive显示大量的点以及点的运动

如果想在Cesium中显示一个点，目前有这么几种方法：

Primitive
Entity
czml文件
GeoJson文件等

如果要显示大量的点呢？比如几千个，几万个，甚至是几十万，上百万个？那么什么场景要用到显示这么多点呢？

在航天领域，就是地球空间的所有在轨物体了，包括火箭残骸、解体碎片、卫星、飞船等各种航天器。目前老美空间目标监测能力最强，几乎给空间所有的可探测物体都进行了编目，每天都有更新，总数目约有2万个左右。

从CelesTrak.com网站，我们可以下载到最新的所有空间物体的两行根数TLE。目前CelesTrak网站也提供了基于Cesium开发的空间物体在轨运行图，见下图所示。

Primitive与Entity区别

Cesium官方介绍里，对于Primitive和Entity的区别是这样描述的。

CesiumJS has a rich API for spatial data that can be split into two categories: a low-level Primitive API geared towards graphics developers, and a high-level Entity API for data-driven visualization.

The low-level Primitive API exposes the minimal amount of abstraction needed to perform the task at hand. It is structured to provide a flexible implementation for graphics developers, not for API consistency. Loading a model is different from creating a billboard, and both are radically different from creating a polygon. Each type of visualization is its own distinct feature. Furthermore, each has different performance characteristics and requires different best practices. While this approach is powerful and flexible, most applications are better served with a higher level of abstraction.

The Entity API exposes a set of consistently designed high-level objects that aggregate related visualization and information into a unified data structure, which we call an Entity. It lets us concentrate on the presentation of data rather than worrying about the underlying mechanism of visualization. It also provides constructs for easily building complex, time-dynamic visualization in a way that fits naturally alongside static data. While the Entity API actually uses the Primitive API under the hood, that’s an implementation detail we (almost) never have to concern ourselves with. By applying various heuristics to the data we give it, the Entity API is able to provide flexible, high-performance visualization while exposing a consistent, easy to learn, and easy to use interface.

上述文章大意是， Primitive接近底层，适合图形开发人员；而Entity是数据的抽象，使用方便。

对于显示成千上万个点，由于加载性能等因素，Cesium官方推荐我们使用Primitive。

下面是显示64,800 个点的 PointPrimitiveobjects 的代码示例，并且让所有点同时都运动起来

var viewer = new Cesium.Viewer('cesiumContainer');
//  生成PointPrimitiveCollection对象
var pointCollection = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());//  生成64800个点，每个经度、纬度值各生成一个点，高度为0（贴地表）
//  每个点都添加到PointPrimitiveCollection对象中
for (var longitude = -180; longitude < 180; longitude++) {var color = Cesium.Color.PINK;if ((longitude % 2) === 0) {color = Cesium.Color.CYAN;}for (var latitude = -90; latitude < 90; latitude++) {pointCollection.add({position : Cesium.Cartesian3.fromDegrees(longitude, latitude),color : color});}
}//  模拟每个点固定向外偏移(1km,1km,1km)(跟时间无关，每帧调用此函数)
function animatePoints() {var positionScratch = new Cesium.Cartesian3();var points = pointCollection._pointPrimitives;var length = points.length;for (var i = 0; i < length; ++i) {var point = points[i];Cesium.Cartesian3.clone(point.position, positionScratch);Cesium.Cartesian3.add(positionScratch,new Cesium.Cartesian3(1000, 1000, 1000),positionScratch);point.position = positionScratch;}
}//  scene中的render 方法，每一帧都被会调用，用于场景的重绘
//  此处的preRender在render方法之前执行，也是每一帧被调用
//  由于每一帧调用animatePoints方法时，方法内部都将每个点
//    的位移向外移动1km，因此所有点就都运动起来了
viewer.scene.preRender.addEventListener(animatePoints);

通过scene.primitives.add方法加载一个 PointPrimitiveCollection对象，然后往这个PointPrimitiveCollection对象里不断加载单个Primitive对象，目前每个Primitive对象只赋值两个参数：position和color，更多的参数请参考帮助文档。

此外，通过注册animatePoints方法到scene.preRender事件中，我们可以实现每一帧都可以改变所有点的位置，从而实现所有点都运动起来的效果。

加载效果如下，加载速度很快，6万个点运动起来没有任何卡顿！！！

此外，Cesium官方推荐一下措施，可以使得渲染速度更快：

pixelSize，每个点越小时，
scaleByDistance，当相机离点更远时，
translucencyByDistance ，完全半透明

有兴趣的读者可以测试一下。

Cesium中通过Primitive显示大量的点以及点的运动相关推荐

Cesium中图元Primitive详细介绍及案例
Cesium从入门到项目实战总目录: 点击文章目录 Cesium中图元Primitive详细介绍 Cesium中Primitive案例 Cesium中图元Primitive详细介绍在Cesium中 ...
Cesium中实时显示经纬度及视角高
如何在cesium中实时根据鼠标的位置显示经纬度以及视角高具体效果如下: 具体代码如下: //html代码 <div id="latlng_show" style=&quo ...
Cesium 中的离屏渲染
Cesium 中的离屏渲染本文参考了众多文章,均列在了最后.先感谢各位的分享精神,如觉有冒犯,请与我联系. 部分内容来自个人理解,欢迎指正交流. 为了达到更加真实的渲染效果或其他计算需求,很多时候需 ...
Cesium 中两种添加 model 方法的区别
概述 Cesium 中包含两种添加 model 的方法,分别为: 通过 viewer.entities.add() 函数添加通过 viewer.scene.primitives.add() 函数添加 ...
Cesium中Clock控件及时间序列瓦片动态加载
前言前面已经写了两篇博客介绍Cesium,一篇整体上简单介绍了Cesium如何上手,还有一篇介绍了如何将Cesium与分布式地理信息处理框架Geotrellis相结合.Cesium的强大之处也在于其 ...
Cesium中的坐标系及转换
在我们开始学习Entity之前,我们首先需要先学习下Cesium中的坐标系,Cesium中有多个坐标系,在进行添加Entity时经常会使用到. 一.坐标系介绍我们先来列举下Cesium中的坐标系:W ...
Cesium中添加entitie模型，实现贴地。
1.Cesium中添加entitie模型,实现贴地. 2. 添加模型 const createModel = (url) => {const entity = viewer.entities.a ...
Cesium中使用Sampler3D，3D纹理，实现体渲染
Cesium中使用Sampler3D,3D纹理,实现体渲染 Cesium目前(20221231)还不支持直接使用3D纹理,但是其实内部已经可以WebGL2,而且内置常量也有3DTexture.所以,可 ...
Cesium之3D拉伸显示行政区
转自原文 Cesium之3D拉伸显示行政区含GeoJSON数据生成过程GDAL的ogr2ogr Cesiumjs 是一套javascript库,用来渲染3D地球,2D区域地图,和多种GIS要素.不需要 ...

Cesium中通过Primitive显示大量的点以及点的运动

Primitive与Entity区别

Cesium中通过Primitive显示大量的点以及点的运动相关推荐

最新文章

热门文章