cesium点聚合

//点聚合  mapComManager.js内容

addClusterDataSource(params,myDataSource){
    let entity ={
      id: params.id,
      name: '点',
      show: true,
      position: Cesium.Cartesian3.fromDegrees(params.lon, params.lat, 100),
      billboard: {
        image: params.imgurl,
        width: 30,
      //  height: 30,
      scale:1.0,
      },
    };
    
    myDataSource.entities.add(entity)
  },
ClusterData(myDataSource,viewer){
    
    this.myDataSource =myDataSource;
    viewer.dataSources.add(myDataSource).then(function(dataSource) {
      dataSource.clustering.enabled = true; //是否聚合
      dataSource.clustering.pixelRange = 20; //聚合范围（单位px）
      dataSource.clustering.minimumClusterSize = 20; //最小屏幕聚合对象数值（小于等于该数值，不聚合）
    });
      this.customStyle();
  },
   pin50 (length) { return new Cesium.PinBuilder().fromText(length, Cesium.Color.RED, 48).toDataURL()},
   pin40(length) { return new Cesium.PinBuilder().fromText(length, Cesium.Color.ORANGE, 48).toDataURL()},
   pin30 (length) { return new Cesium.PinBuilder().fromText(length, Cesium.Color.YELLOW, 48).toDataURL()},
   pin20(length) { return new Cesium.PinBuilder().fromText(length, Cesium.Color.GREEN, 48).toDataURL()},
   pin10(length) { return new Cesium.PinBuilder().fromText(length, Cesium.Color.BLUE, 48).toDataURL()},
  customStyle() {
    if (this.removeListener==1) {
      this.removeListener();
      this.removeListener = undefined;
    
    } else {
      let self =this;
      this.removeListener =
      this.myDataSource.clustering.clusterEvent.addEventListener(
          function(clusteredEntities, cluster) {
            cluster.label.show = false;
            cluster.billboard.show = true;
            cluster.billboard.id = cluster.label.id;
            cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
            if (clusteredEntities.length >= 50) {
              cluster.billboard.image = self.pin50(clusteredEntities.length);
            } else if (clusteredEntities.length >= 40) {
              cluster.billboard.image = self.pin40(clusteredEntities.length);
            } else if (clusteredEntities.length >= 30) {
              cluster.billboard.image = self.pin30(clusteredEntities.length);
            } else if (clusteredEntities.length >= 20) {
              cluster.billboard.image = self.pin20(clusteredEntities.length);
            } else if (clusteredEntities.length >= 10) {
              cluster.billboard.image = self.pin10(clusteredEntities.length);
            } else {
              cluster.billboard.image =
                singleDigitPins[clusteredEntities.length - 2];
            }
          }
        );
    }
  },

//页面调用
this.clusterDataSource = new Cesium.CustomDataSource("myDataSource");

addData(data,type){
   for (var i = 0; i < data.length; i++) {
       let lonlat = mapComManager.mercatorTolonlat(
            data[i].geometry.coordinates[0],
            data[i].geometry.coordinates[1]
          );
          let imgurl = "../../static/images/urbanPartsImg/"+type+".png"
          let params = {
            id: data[i].id,
            lon: lonlat.x,
            lat: lonlat.y,
            imgurl: imgurl,
            type: type,
          };
          mapComManager.addClusterDataSource(params, this.clusterDataSource); //聚合
      }
      mapComManager.ClusterData(this.clusterDataSource, this.viewer, this.num);
}

实现效果图