Cesium 点位聚合-17

实现效果

实现方式

• 通过 new Cesium.EntityCluster(options) 接口对象实现
• 而 new Cesium.DataSource() 有成员变量 clustering
• clustering 类型是 EntityCluster

代码实现,基于 vue 前端框架

• 这里使用的是 cesium 沙盒演示中自带的数据进行实现

• 加载数据

  getKMLDTSource() {
    let options = {
      camera: this._viewer.scene.camera,
      canvas: this._viewer.scene.canvas
    };
    return Cesium.KmlDataSource.load(this.url, options);
  },
  

• 添加到 viewer.dataSources

  let dataSourcePromise = this._viewer.dataSources.add(this.getKMLDTSource());

• 根据得到的 DataSource 对象配置聚合

  dataSourcePromise.then((_dataSource) => {
  vm.dataSource = _dataSource;
  let pixelRange = 15,
      minimumClusterSize = 3,
      enabled = true;
  _dataSource.clustering.enabled = enabled;
  _dataSource.clustering.pixelRange = pixelRange;
  _dataSource.clustering.minimumClusterSize = minimumClusterSize;
  
  _dataSource.clustering.pixelRange = 0;
  _dataSource.clustering.pixelRange = pixelRange;
  vm.customStyle();
  });

• 自定义聚合样式

  customStyle() {
  let vm = this;
  
    vm.removeListener = vm.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 >= 50) {
          cluster.billboard.image = vm.pins["pin50"];
        } else if (clusteredEntities.length >= 40) {
          cluster.billboard.image = vm.pins["pin40"];
        } else if (clusteredEntities.length >= 30) {
          cluster.billboard.image = vm.pins["pin30"];
        } else if (clusteredEntities.length >= 20) {
          cluster.billboard.image = vm.pins["pin20"];
        } else if (clusteredEntities.length >= 10) {
          cluster.billboard.image = vm.pins["pin10"];
        } else {
          let singleDigitPins = vm.pins["single"];
          cluster.billboard.image =
            singleDigitPins[clusteredEntities.length - 2];
        }
      }
    );
  
  },

• 初始化图标

  createPints() {
  this.pins = {};
  var pinBuilder = new Cesium.PinBuilder();
  var pin50 = pinBuilder.fromText("50+", Cesium.Color.RED, 48).toDataURL();
  this.pins["pin50"] = pin50;
  var pin40 = pinBuilder
    .fromText("40+", Cesium.Color.ORANGE, 48)
    .toDataURL();
  this.pins["pin40"] = pin40;
  var pin30 = pinBuilder
    .fromText("30+", Cesium.Color.YELLOW, 48)
    .toDataURL();
  this.pins["pin30"] = pin30;
  var pin20 = pinBuilder
    .fromText("20+", Cesium.Color.GREEN, 48)
    .toDataURL();
  this.pins["pin20"] = pin20;
  var pin10 = pinBuilder.fromText("10+", Cesium.Color.BLUE, 48).toDataURL();
  this.pins["pin10"] = pin10;
  var singleDigitPins = new Array(8);
  for (var i = 0; i < singleDigitPins.length; ++i) {
    singleDigitPins[i] = pinBuilder
      .fromText("" + (i + 2), Cesium.Color.VIOLET, 48)
      .toDataURL();
  }
  this.pins["single"] = singleDigitPins;
  },