Drawcommand的批量实例化

发布日期: 2024-12-16

最近遇到一个需求，后端在给定范围里面生成了几万个格子，我需要根据这些数据绘制三层同样的格子并在前端展示出来，三层近十万个格子如果用geometryInstances绘制的话会出现页面阻塞的情况，导致页面浏览效果不是很好，需要优化一下加载速度。考虑到这些格子出了颜色有区别，形状以及其他属性类似，因此可以使用更为底层的drawcommand绘制，以此提高加载效率

思路

1、请求的数据里面有每个格子的范围，通过范围求出每个格子的中心点，根据中心点建立局部坐标系，之后对中心进行平移以及根据格子大小进行平移缩放
从而得到每个格子的局部坐标矩阵，如下图代码块展示


    
    const positions = Cesium.Cartesian3.fromDegreesArray(geo.coordinates.flat(3));
    const center = Cesium.BoundingSphere.fromPoints(positions).center;
    const enuMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
    Cesium.Matrix4.multiplyByTranslation(
        enuMatrix,
        new Cesium.Cartesian3(0, 0, config.bottomHeight + config.height * (i + 0.5)),
        enuMatrix
    );
    const scaleMat = Cesium.Matrix4.multiplyByScale(
        enuMatrix,
        new Cesium.Cartesian3(length, width, config.height),
        new Cesium.Matrix4()
    );