cesium 聚合功能直接复制运行就ok

/**
 * @description: 初始化点聚合功能
 * @param {*} viewer Cesium Viewer 对象
 * @param {*} firePng icon图标的路径
 * @return {*}
 */
function initCluster(viewer, firePng) {
  if (viewer) {
    const geojson = {
      type: "FeatureCollection",
      features: [],
    };

    // 后端传来的数据
    let data = [
      {
        longitude: 103.82132556343547,
        latitude: 31.16005363585357,
      },
      {
        longitude: 103.78300834434437,
        latitude: 31.10858670580027,
      },
      {
        longitude: 203.8580729321287,
        latitude: 31.15876409117598,
      },
      {
        longitude: 203.8580729321287,
        latitude: 31.25876409117598,
      },
      {
        longitude: 203.8580729321287,
        latitude: 31.25876409118598,
      },
    ];

    // 转换数据为GeoJSON格式
    data.forEach((item) => {
      geojson.features.push({
        type: "Feature",
        geometry: {
          type: "Point",
          coordinates: [parseFloat(item.longitude), parseFloat(item.latitude)],
        },
        properties: {
          ...item,
        },
      });
    });

    const options = {
      camera: viewer.scene.camera,
      canvas: viewer.scene.canvas,
    };

    const dataSourcePromise = viewer.dataSources.add(
      Cesium.GeoJsonDataSource.load(geojson, options)
    );

    const img = firePng; // 自定义图标

    dataSourcePromise.then(function (dataSource) {
      // 设置实体的图标和标签
      dataSource.entities.values.forEach((entity) => {
        entity.billboard = {
          image: img,
          width: 25,
          height: 25,
        };
        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;

      dataSource.clustering.enabled = true;
      dataSource.clustering.pixelRange = pixelRange;
      dataSource.clustering.minimumClusterSize = minimumClusterSize;

      let removeListener;

      function customStyle() {
        if (Cesium.defined(removeListener)) {
          removeListener();
          removeListener = undefined;
        } else {
          removeListener = dataSource.clustering.clusterEvent.addEventListener(
            function (clusteredEntities, cluster) {
              cluster.label.show = true;
              cluster.label.text = clusteredEntities.length.toString(); // 设置聚合数量的文本
              cluster.label.font = "bold 15px Microsoft YaHei";

              cluster.billboard.show = false;
              cluster.billboard.id = cluster.label.id;
              cluster.billboard.width = 25;
              cluster.billboard.height = 25;
              cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
              cluster.billboard.image = img;
            }
          );
        }
        // 强制重新聚合以应用新的样式
        const pixelRange = dataSource.clustering.pixelRange;
        dataSource.clustering.pixelRange = 0;
        dataSource.clustering.pixelRange = pixelRange;
      }

      customStyle();
    });
  }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值