cesium实体聚合

项目中添加火点，之前使用的实体，动态火苗，但是数据多了之后就会出现覆盖的问题，还非常的卡

同事说，可以试试聚合

就浅浅的搞了一下

官方示例上有例子 官方示例

我在基于官方示例开发的时候发现，如果是自定义图片，总会出现一些默认的图片，最后发现应该在加载datasouce时就应该定义一下图片

先看效果

代码：

if (viewer) {
        //这里因为后端传来的数据，是一个点一个点的，所以我给处理成了geojson
        const geojson = {
            "type": "FeatureCollection",
            "features": []
        }
        //data是后端传来的数据
        data.forEach(item => {
            geojson.features.push({
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    // "icon": firePng,
                    "coordinates": [parseFloat(item.longitude), parseFloat(item.latitude)]
                },
                "properties": {
                    ...item,
                    // "icon": firePng
                }
            })
        })
        const options = {
            camera: viewer.scene.camera,
            canvas: viewer.scene.canvas,
        };
        //加载geojson
        const dataSourcePromise = viewer.dataSources.add(
            Cesium.GeoJsonDataSource.load(geojson, options)
        )
        //firePng是我自定义的图片
        const img = firePng;
        dataSourcePromise.then(function (dataSource) {
            console.log('dataSource:', dataSource)
            // 这里添加一下自定义图片，否则会显示默认图标
            dataSource.entities.values.forEach(entity => {
                //以下八行是我想在entity里添加我想要的属性，用于点击实体的时候展示，失败了，嘿嘿,有事件再研究一下
                //            const newData = {}
                //           for (let key in entity._properties) {
                //                if (key.indexOf('Subscription') < 0) {
                //                   newData[key.split('_')['1']] = entity._properties[key]._value
                //              }
                //           }
                //           entity._fireInfo = newData
                //           entity.name = 'fireInfo_' + newData.fireCode


                entity.billboard = {
                    image: img,// // 这里添加一下自定义图片，否则会显示默认图标
                    width: 25,
                    height: 25,
                };
                // 如果要加标签,可以在这里加，show改成true
                entity.label = {
                    show: false,
                    text: '标签',
                    font: 'bold 15px Microsoft YaHei',// 竖直对齐方式
                    verticalOrigin: Cesium.VerticalOrigin.CENTER, // 水平对齐方式
                    horizontalOrigin: Cesium.HorizontalOrigin.LEFT,// 偏移量
                    pixelOffset: new Cesium.Cartesian2(15, 0),
                };
            });
            const pixelRange = 15;
            const minimumClusterSize = 2;
            //clustering 获取或设置此数据源的群集选项。此对象可以在多个数据源之间共享。
            dataSource.clustering.enabled = true;//获取或设置是否启用群集。
            dataSource.clustering.pixelRange = pixelRange;//pixelRange 是聚合距离，也就是小于这个距离就会被聚合,以像素为单位
            dataSource.clustering.minimumClusterSize = minimumClusterSize;//minimumClusterSize是每个聚合点的最小聚合个数，这个值最好是设置为2，因为两个图标也可能叠压。
            let removeListener;
            function customStyle() {
                if (Cesium.defined(removeListener)) {
                    removeListener();
                    removeListener = undefined;
                } else {
                    removeListener = dataSource.clustering.clusterEvent.addEventListener(
                        function (clusteredEntities, cluster) {
                            cluster.label.show = false;
                            cluster.billboard.show = true;
                            cluster.billboard.id = cluster.label.id;
                            cluster.billboard.width = 25;
                            cluster.billboard.height = 25;
                            cluster.billboard.verticalOrigin =
                                Cesium.VerticalOrigin.BOTTOM;
                            cluster.billboard.image = img;
                            //下面是官方示例上
                            // if (clusteredEntities.length >= 50) {
                            //     cluster.billboard.image = pin50;
                            // } else if (clusteredEntities.length >= 40) {
                            //     cluster.billboard.image = pin40;
                            // } else if (clusteredEntities.length >= 30) {
                            //     cluster.billboard.image = pin30;
                            // } else if (clusteredEntities.length >= 20) {
                            //     cluster.billboard.image = pin20;
                            // } else if (clusteredEntities.length >= 10) {
                            //     cluster.billboard.image = pin10;
                            // } else {
                            //     cluster.billboard.image =
                            //         singleDigitPins[clusteredEntities.length - 2];
                            // }
                        }
                    );
                }
                // force a re-cluster with the new styling
                const pixelRange = dataSource.clustering.pixelRange;
                dataSource.clustering.pixelRange = 0;
                dataSource.clustering.pixelRange = pixelRange;
            }
            customStyle();
        });
}