cesium实现点聚合

cesium实现点聚合功能代码如下，第一个代码定义变量以及生成随机位置的点，第二个对生成的点进行聚合功能，聚合对鼠标滚轮事件进行监听，根据点位的多少展示不同的聚合效果，对于图片的目录统一配置在public的static目录下 

1.生成随机位置点用于测试

  data() {
    return {
      dataSource: new Cesium.CustomDataSource("dian"),
      viewer: null,
      billboard: null,
    };
//生成随机位置的点
  createPin(){
      this.viewer = earth.czm.viewer;
      // 仅为调试方便用
      window.earth = earth;
      this.viewer.dataSources.add(this.dataSource);
      for (let index = 0; index < 20; index++) {
        var wrjData = {
          name: "wrj" + index,
          position: Cesium.Cartesian3.fromDegrees(
            Math.random() * (117 - 116) + 116,
            Math.random() * (40 - 39) + 39
          ),
          billboard: {
            show: true, // default
            eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
            scale: 1.0, // default: 1.0
            // color: Cesium.Color.LIME, // default: WHITE
            // rotation: Cesium.Math.PI_OVER_FOUR, // default: 0.0
            alignedAxis: Cesium.Cartesian3.ZERO, // default
            width: 40, // default: undefined
            height: 40, // default: undefined
            pixelOffset: new Cesium.Cartesian2(0, 0),
          },
        };
        this.dataSource.entities.add(wrjData);
        this.dataSource.entities.values.forEach((entity) => {
        entity.billboard.image = "./static/norPin.png"; //图片配置在public的static目录下
        });
        this.billboard = this.viewer.entities.add(wrjData);
      }
      this.combineListener();
}

2.cesium实现点聚合 

//点聚合功能实现 
combineListener() {
      this.dataSource.clustering.enabled = true;
      this.dataSource.clustering.pixelRange = 30;
      this.dataSource.clustering.minimumClusterSize = 2;

      this.dataSource.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 >= 10) {
          cluster.billboard.image = combineIconAndLabel(
            "./static/greenPin.png",
            clusteredEntities.length,
            64
          );
          cluster.billboard.width = 60;
          cluster.billboard.height = 60;
        } else if (clusteredEntities.length >= 6) {
          cluster.billboard.image = combineIconAndLabel(
            "./static/orangePin.png",
            clusteredEntities.length,
            64
          );
          cluster.billboard.width = 55;
          cluster.billboard.height = 55;
        } else if (clusteredEntities.length >= 3) {
          cluster.billboard.image = combineIconAndLabel(
            "./static/pinkPin.png",
            clusteredEntities.length,
            64
          );
          cluster.billboard.width = 50;
          cluster.billboard.height = 50;
        } else {
          cluster.billboard.image = combineIconAndLabel(
            "./static/bluePin.png",
            clusteredEntities.length,
            64
          );
          cluster.billboard.width = 45;
          cluster.billboard.height = 45;
        }
      });
      // 创建画布对象
      function combineIconAndLabel(url, label, size) {
        let canvas = document.createElement("canvas");
        canvas.width = size * 3.5;
        canvas.height = size * 3.5;
        let ctx = canvas.getContext("2d");

        let promise = new Cesium.Resource.fetchImage(url).then((image) => {
          // 异常判断
          try {
            ctx.drawImage(image, -5, -5);
          } catch (e) {
            console.log(e);
          }
          // 渲染字体
          // font属性设置顺序：font-style, font-variant, font-weight, font-size, line-height, font-family
          ctx.fillStyle = Cesium.Color.WHITE.toCssColorString();
          ctx.font = "bold 100px Microsoft YaHei";
          ctx.textAlign = "right";
          ctx.textBaseline = "middle";
          ctx.fillText(label, 160, 80);

          return canvas;
        });
        return promise;
      }
    },