点位聚合

实现思路

1. 创建一个dataSources数据源对象，用于存放聚合后的点位数据
2. 设置一下dataSources的聚合条件
3. 监听聚合对象设置一些触发后的的效果，例如：文字，图标

撒点

通过viewer.dataSources.add这个API先加载一些基本点位，我这里加载的是KML数据，是用官网上的案例数据，这个文件路径在cesium中里有

加载这些点位等于一个dataSources数据源对象

  let dataSources = await this.viewer.dataSources.add(
        Cesium.KmlDataSource.load(
          "/cesium包/Apps/SampleData/kml/facilities/facilities.kml",
          {
            camera: this.viewer.scene.camera,
            canvas: this.viewer.scene.canvas
          }
        ) 
    );

此时的效果如图

设置聚合

通过上面的声明的dataSources对象，设置一下聚合条件

    dataSources.clustering.enabled = true; // 开启聚合
    dataSources.clustering.pixelRange = 15; // 聚合像素范围
    dataSources.clustering.minimumClusterSize = 3; // 聚合最小数量

此时的效果如图

此时已经实现了聚合的效果，但是这个聚合效果是默认的，我们还可以自定义聚合的效果，例如：聚合后的文字，聚合后的图标等

设置聚合效果

通过监听dataSources的clusterEvent事件，来设置聚合后的效果

    const pinBuilder = new Cesium.PinBuilder(); //创建一个图钉
      
    // 聚合事件监听 第一个参数是被聚合的实体集合 第二个参数是聚合后的实体
    dataSources.clustering.clusterEvent.addEventListener((clusteredEntities, cluster) => {
        let pinImg = pinBuilder.fromText(cluster.label.text, Cesium.Color.RED, 48).toDataURL();
        cluster.label.show = false;
        cluster.billboard.image = pinImg;
        cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
        cluster.billboard.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND;
        cluster.billboard.show = true;
    });

此时的效果如图