最近在使用Cesium时，经常需要加载很多点目标，导致点符号存在有压盖。本文分享我的实现思路和代码。
我的数据源是点类型的GeoJson数据。主要借助Cesium.CustomDataSource提供的clustering对象实现。
基本思路
1.创建Cesium.CustomDataSource数据集，开启clustering配置；
2.通过Cesium.GeoJsonDataSource加载GeoJson数据；
3.在解析GeoJson完毕的回调中，将每个点要素添加到Cesium.CustomDataSource的数据集中。
示例代码
const clusterDataSource = new Cesium.CustomDataSource();
clusterDataSource.clustering.enabled = true;
clusterDataSource.clustering.pixelRange = 20; // Cluster objects within 20 pixels
clusterDataSource.clustering.minimumClusterSize = 2; // Minimum 2 objects to form a cluster
clusterDataSource.clustering.clusterEvent.addEventListener((entities, cluster) => {
cluster.billboard.show = true;
cluster.billboard.image = clusterIcon;
cluster.billboard.pixelOffset = new Cesium.Cartesian2(0, -15),
cluster.billboard.width = 40;
cluster.billboard.height = 40;
cluster.billboard.properties = {
entityType:'ClusterBillboard',
subEntities: entities
};
cluster.label.show = false;
});
let promise = new Cesium.GeoJsonDataSource.load('点信息.geojson', {
clampToGround: true, //开启贴地
});
promise.then((datasource) => {
let entities = datasource?.entities?.values || [];
for(var i in entities) {
let entity = entities[i];
clusterDataSource.entities.add({
position: entity.position,
billboard: {
image: sxjIcon,
width: 32,
height: 32,
},
});
}
viewer.dataSources.add(clusterDataSource);
});
有更多Cesium使用问题，欢迎留言或联系我们。转载注明出处。