'zt'

Your Name

2022-03-14 aaebe147d319e59a8b510ff4ce9271088a330732

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
/*
 * @Author: your name
 * @Date: 2021-12-07 15:05:29
 * @LastEditTime: 2021-12-07 18:51:39
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \huizhi-sdk\src\components\Map\libs\Cluster.js
 */
var viewer = new Cesium.Viewer('cesiumContainer');
 
var options = {
  camera: viewer.scene.camera,
  canvas: viewer.scene.canvas,
};
var dataSourcePromise = viewer.dataSources.add(
  Cesium.KmlDataSource.load(
    '../SampleData/kml/facilities/facilities.kml',
    options
  )
);
dataSourcePromise.then(function(dataSource) {
  var pixelRange = 15;
  var minimumClusterSize = 3;
  var enabled = true;
 
  dataSource.clustering.enabled = enabled;
  dataSource.clustering.pixelRange = pixelRange;
  dataSource.clustering.minimumClusterSize = minimumClusterSize;
 
  var removeListener;
 
  var pinBuilder = new Cesium.PinBuilder();
  var pin50 = pinBuilder.fromText('50+', Cesium.Color.RED, 48).toDataURL();
  var pin40 = pinBuilder.fromText('40+', Cesium.Color.ORANGE, 48).toDataURL();
  var pin30 = pinBuilder.fromText('30+', Cesium.Color.YELLOW, 48).toDataURL();
  var pin20 = pinBuilder.fromText('20+', Cesium.Color.GREEN, 48).toDataURL();
  var pin10 = pinBuilder.fromText('10+', Cesium.Color.BLUE, 48).toDataURL();
 
  var singleDigitPins = new Array(8);
  for (var i = 0; i < singleDigitPins.length; ++i) {
    singleDigitPins[i] = pinBuilder
      .fromText('' + (i + 2), Cesium.Color.VIOLET, 48)
      .toDataURL();
  }
 
  function customStyle() {
    if (Cesium.defined(removeListener)) {
      removeListener();
      removeListener = undefined;
    } else {
      removeListener = 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 = pin50;
          } else if (clusteredEntities.length >= 40) {
            cluster.billboard.image = pin40;
          } else if (clusteredEntities.length >= 30) {
            cluster.billboard.image = pin30;
          } else if (clusteredEntities.length >= 20) {
            cluster.billboard.image = pin20;
          } else if (clusteredEntities.length >= 10) {
            cluster.billboard.image = pin10;
          } else {
            cluster.billboard.image =
              singleDigitPins[clusteredEntities.length - 2];
          }
        }
      );
    }
 
    // force a re-cluster with the new styling
    var pixelRange = dataSource.clustering.pixelRange;
    dataSource.clustering.pixelRange = 0;
    dataSource.clustering.pixelRange = pixelRange;
  }
 
  // start with custom style
  customStyle();
 
  var viewModel = {
    pixelRange: pixelRange,
    minimumClusterSize: minimumClusterSize,
  };
  Cesium.knockout.track(viewModel);
 
  var toolbar = document.getElementById('toolbar');
  Cesium.knockout.applyBindings(viewModel, toolbar);
 
  function subscribeParameter(name) {
    Cesium.knockout
      .getObservable(viewModel, name)
      .subscribe(function(newValue) {
        dataSource.clustering[name] = newValue;
      });
  }
 
  subscribeParameter('pixelRange');
  subscribeParameter('minimumClusterSize');
 
  Sandcastle.addToggleButton('Enabled', true, function(checked) {
    dataSource.clustering.enabled = checked;
  });
 
  Sandcastle.addToggleButton('Custom Styling', true, function(checked) {
    customStyle();
  });
 
  var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  handler.setInputAction(function(movement) {
    var pickedLabel = viewer.scene.pick(movement.position);
    if (Cesium.defined(pickedLabel)) {
      var ids = pickedLabel.id;
      if (Array.isArray(ids)) {
        for (var i = 0; i < ids.length; ++i) {
          ids[i].billboard.color = Cesium.Color.RED;
        }
      }
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
});