Cesium渲染数据的几种方式

437 阅读1分钟

最近在用Cesium做GIS(Geographic Information System)编程。Cesium是一个基于WebGL,用来在浏览器中创建一个3D的地球或2D地图的开源javascript库。同时,还可以在地球上绘制一些图形。本篇文章介绍Cesium中常用的几种图形加载方式。主要包括entity、primitive、layer、div四种方式。

Cesium数据渲染.png

entity

实体主要是用来在球上展示一些比较独立的小图标,多边形、线段。如下图的图标和白色线条:

截屏2023-01-14 16.17.01.png

entity的使用流程如下:

未命名文件 (1).png

primitive

当我们想要显示万或十万数量级的几何实例时,通常会用到primitive。比如下方的这个热力图:

截屏2023-01-14 18.14.12.png

以下为详细的primitive实现方式:

未命名文件 (2).png

并且可以看到在生成几何实例的过程中,先要生成几何结构实例、几何体实例,再来通过设定颜色、id生成几何实例。后面如果想要设定不同的颜色,可以把之前生成的几何体实例直接拿来用,这样可以通过缓存大大节约了内存空间,为相同的几何体在不同情况显示不同的颜色等属性提供了内存优化的空间。

div

当我们想要实现较少数量的元素,但是特别需要样式自定义时。可以使用挂载div元素的方式来实现,比如下方的固定球面位置的标签:

截屏2023-01-14 18.17.39.png

使用思路主要通过viewer.scene.cartesianToCanvasCoordinates()函数来把geo坐标转化成屏幕的canvas坐标,保存到前端框架的响应式数据中,然后前端框架就可以实时渲染。

原始21天打卡.png

layer

layer用于加载瓦片图层,基本操作如下:

未命名文件 (3).png