Cesium加载矢量数据探索——从geojson到矢量切片

问也去

已于 2023-09-26 11:35:53 修改

阅读量1.5k

点赞数

分类专栏： cesium 文章标签： javascript cesium vite

于 2023-02-27 23:43:25 首次发布

本文链接：https://blog.csdn.net/wenyeqv/article/details/129252600

版权

本文探讨了Cesium加载矢量数据的方法，从使用Entity图元和Primitive像元加载geojson数据，分析了性能瓶颈，并介绍了如何通过OpenLayers和Mapbox尝试加载矢量切片。在实践中，作者遇到Vite不支持CMJ规范的问题，通过转换和打包解决，实现了在Cesium中加载矢量切片。

摘要由CSDN通过智能技术生成

矢量数据由于包含确定的坐标信息，通常用于表达准确的空间位置实体，在cesium中，不支持对shp进行加载，而是需要对shp数据进行转换，一般cesium支持的shp格式如下：

geojson
topojson
kml
czml

通常来说，对于简单的shp数据，最常规的处理方式是通过geojson格式在cesium中进行加载，而cesium也为加载geojson及后续操作提供了丰富的api。链接

Cesium常规加载

cesium提供的api加载方式

const viewer = new Cesium.Viewer('cesiumContainer');
viewer.dataSources.add(Cesium.GeoJsonDataSource.load('../../SampleData/ne_10m_us_states.topojson', {
   
  stroke: Cesium.Color.HOTPINK,
  fill: Cesium.Color.PINK,
  strokeWidth: 3,
  markerSymbol: '?'
}));

cesium的GeoJsonDataSource类提供了geojson的加载方式，并且可以在加载的同时，给数据提供自定义样式。
但是，在加载geojson数据过大是(上万点),场景会非常卡顿，这是什么原因呢？

Entity图元

其实，翻看上述加载geojson的实现逻辑，其本质上是通过读取geojson中每个feature的属性和坐标，然后通过一个cesium的一个图元来实例化这个feature（包含坐标、样式、属性等信息），然后依次将图元加载到图层上。
因此，上述加载代码也可以改成:

//读取geojson中的每个feature
for (var i = 0; i < geojson.features.length; i++) {
   
    var ifeature = boundary.features[i];
    let coordinates = [];
    ifeature.geometry.coordinates[0].forEach(lnglat