『Cesium 基础』 点位聚合（十四）

实现效果

 

实现方式

• 通过 new Cesium.EntityCluster(options) 接口对象实现

• 而 new Cesium.DataSource() 有成员变量 clustering

• clustering 类型是 EntityCluster

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

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

• 加载数据

  1getKMLDTSource() {
  2    let options = {
  3      camera: this._viewer.scene.camera,
  4      canvas: this._viewer.scene.canvas
  5    };
  6    return Cesium.KmlDataSource.load(this.url, options);
  7  },
  

• 添加到 viewer.dataSources

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

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

   1dataSourcePromise.then((_dataSource) => {
   2    vm.dataSource = _dataSource;
   3    let pixelRange = 15,
   4        minimumClusterSize = 3,
   5        enabled = true;
   6    _dataSource.clustering.enabled = enabled;
   7    _dataSource.clustering.pixelRange = pixelRange;
   8    _dataSource.clustering.minimumClusterSize = minimumClusterSize; 
   9    _dataSource.clustering.pixelRange = 0;
  10    _dataSource.clustering.pixelRange = pixelRange;
  11    vm.customStyle();
  12});
  

• 自定义聚合样式

   1 customStyle() {
   2  let vm = this; 
   3    vm.removeListener = vm.dataSource.clustering.clusterEvent.addEventListener(
   4      function(clusteredEntities, cluster) {
   5        cluster.label.show = false;
   6        cluster.billboard.show = true;
   7        cluster.billboard.id = cluster.label.id;
   8        cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
   9        if (clusteredEntities.length >= 50) {
  10          cluster.billboard.image = vm.pins["pin50"];
  11        } else if (clusteredEntities.length >= 40) {
  12          cluster.billboard.image = vm.pins["pin40"];
  13        } else if (clusteredEntities.length >= 30) {
  14          cluster.billboard.image = vm.pins["pin30"];
  15        } else if (clusteredEntities.length >= 20) {
  16          cluster.billboard.image = vm.pins["pin20"];
  17        } else if (clusteredEntities.length >= 10) {
  18          cluster.billboard.image = vm.pins["pin10"];
  19        } else {
  20          let singleDigitPins = vm.pins["single"];
  21          cluster.billboard.image =
  22            singleDigitPins[clusteredEntities.length - 2];
  23        }
  24      }
  25    );
  26
  27},
  

• 初始化图标

   1 createPints() {
   2  this.pins = {};
   3  var pinBuilder = new Cesium.PinBuilder();
   4  var pin50 = pinBuilder.fromText("50+", Cesium.Color.RED, 48).toDataURL();
   5  this.pins["pin50"] = pin50;
   6  var pin40 = pinBuilder
   7    .fromText("40+", Cesium.Color.ORANGE, 48)
   8    .toDataURL();
   9  this.pins["pin40"] = pin40;
  10  var pin30 = pinBuilder
  11    .fromText("30+", Cesium.Color.YELLOW, 48)
  12    .toDataURL();
  13  this.pins["pin30"] = pin30;
  14  var pin20 = pinBuilder
  15    .fromText("20+", Cesium.Color.GREEN, 48)
  16    .toDataURL();
  17  this.pins["pin20"] = pin20;
  18  var pin10 = pinBuilder.fromText("10+", Cesium.Color.BLUE, 48).toDataURL();
  19  this.pins["pin10"] = pin10;
  20  var singleDigitPins = new Array(8);
  21  for (var i = 0; i < singleDigitPins.length; ++i) {
  22    singleDigitPins[i] = pinBuilder
  23      .fromText("" + (i + 2), Cesium.Color.VIOLET, 48)
  24      .toDataURL();
  25  }
  26  this.pins["single"] = singleDigitPins;
  27},