cesium加载三维立体primitive图元并贴地展示

原创

已于 2024-03-12 17:59:25 修改 · 2.1k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #webgl #javascript #vue.js

于 2024-01-16 15:37:17 首次发布

文章讲述了在项目中使用Cesium加载大量三维立方体时，由entity切换到primitive图元后场景卡死的问题。作者发现是数据格式问题，尤其是经纬度数组中的NaN导致的。通过排查和调整WKT数据解析方法，解决了场景卡死问题并提供了贴地展示的解决方案。

项目场景：

由于项目里需要加载很多三维立方体，之前用的方式是entity，但是数据量大的话会有点卡顿，于是换成primitive图元的方式加载。

简单记录一下遇到的问题。

问题描述

viewer.scene.primitives.add()添加primitive时，地球卡死了，没办法进行放大缩小拖拽等一系列地球操作。
值得注意的是：当用entity得方式是可以加载出来的，只不过会卡顿，但是也没有遇到过场景scene直接卡死的情况。也就是说可以用entity加载但是一旦换成primitive的方式scene就卡死了。

1.刚开始还以为是几何图形太复杂的问题，但是primitie比entity更接近底层，应该比entity渲染更快才对啊，但是相反entity能加载出来，primitive却卡死了，这也就排除了这换个原因。

2.还以为是电脑GPU的问题但是发现scene场景卡死的时候电脑GPU并没有占用多少，甚至为0%，这也就排除了电脑GPU这一项。

原因分析：

排查数据格式。

我们知道加载多边形primitive需要传入经纬度数组

const geometry = new Cesium.PolygonGeometry({
   
   
     polygonHierarchy: new Cesium.PolygonHierarchy(
          new Cesium.Cartesian3.fromDegreesArray(geoms) // geoms为经纬度数组
     ),
     extrudedHeight: entityHeight,
   });

于是就对数据进行一条一条加载。直到遇到scene卡死的那条数据。
知道找到了场景卡死的那条数据：
[107.24044625699061, 31.291311316851022, 107.24047198601231, 31.291311468987722, 107.24047250052004, 31.291311493744068, 107.2404730097246, 31.29131156168811, 107.24047350872203, 31.291311672165513,NaN,NaN,107.24047399270674,31.291311824112327, 107.24047445701771, 31.291312016065213]。
注意里面竟然有两条NaN,这里就排查到了是这条数据的问题，导致加载暂停，场景卡死的。所以我查看了原始的WKT格式的数据。
大概长这样：

"MULTIPOLYGON(((107.25941467940206 31.291917660957814,107.25941751810778 31.291915276197532,107.2594241475583 31.29190534342199,107.25941467940206 31.291917660957814)),((107.25942693970325 31.291901710998584,107.2594272814655 31.291901545782753,107.25942773447713 31.291871994888496,107.25949975585885 31.291838338096827