Add GeoJson clustering

CHANGES.md

@@ -2,6 +2,7 @@
 
 #### next release (8.7.5)
 
+- Add clustering trait to GeoJson (and consequently to WFS, ...) using Cesium as viewer.
 - TSify some `js` and `jsx` files and provide `.d.ts` ambient type files for a few others. This is so that running `tsc` on an external project that imports Terria code will typecheck successfully.
 - Upgraded a bunch of d3 dependencies for fixing security errors.
 - Show rectangle selector for WPS bounding box parameter

lib/ModelMixins/GeojsonMixin.ts

@@ -105,6 +105,8 @@ import { ExportData } from "./ExportableMixin";
 import FeatureInfoUrlTemplateMixin from "./FeatureInfoUrlTemplateMixin";
 import { isDataSource } from "./MappableMixin";
 import TableMixin from "./TableMixin";
+import PinBuilder from "terriajs-cesium/Source/Core/PinBuilder";
+import VerticalOrigin from "terriajs-cesium/Source/Scene/VerticalOrigin";
 
 export const FEATURE_ID_PROP = "_id_";
 
@@ -602,6 +604,32 @@ function GeoJsonMixin<T extends AbstractConstructor<BaseType>>(Base: T) {
           });
         } else {
           const dataSource = await this.loadGeoJsonDataSource(geoJsonWgs84);
+
+          if (this.clustering.enabled) {
+            const pinBackgroundColor = this.clustering.pinBackgroundColor;
+            const pinSize = this.clustering.pinSize;
+
+            const pinBuilder = new PinBuilder();
+            dataSource.clustering.enabled = true;
+            dataSource.clustering.pixelRange = this.clustering.pixelRange;
+            dataSource.clustering.minimumClusterSize = this.clustering.minimumClusterSize;
+            dataSource.clustering.clusterEvent.addEventListener(function (
+              entities,
+              cluster
+            ) {
+              cluster.label.show = false;
+              cluster.billboard.verticalOrigin = VerticalOrigin.BOTTOM;
+              cluster.billboard.image = pinBuilder
+                .fromText(
+                  entities.length.toLocaleString(),
+                  Color.fromCssColorString(pinBackgroundColor),
+                  pinSize
+                )
+                .toDataURL();
+              cluster.billboard.show = true;
+            });
+          }
+
           runInAction(() => {
             this._dataSource = dataSource;
             this._imageryProvider = undefined;

lib/Traits/TraitsClasses/ClusteringTraits.ts

@@ -0,0 +1,43 @@
+import ModelTraits from "../ModelTraits";
+import primitiveTrait from "../Decorators/primitiveTrait";
+
+export default class ClusteringTraits extends ModelTraits {
+    @primitiveTrait({
+        name: "Enabled",
+        description: "True to enable clustering. False by default",
+        type: "boolean"
+    })
+    enabled = false;
+
+    @primitiveTrait({
+        name: "pixelRange",
+        description:
+            "The pixel range to extend the screen space bounding box",
+        type: "number"
+    })
+    pixelRange: number = 35;
+
+    @primitiveTrait({
+        name: "minimumClusterSize",
+        description:
+            "The minimum number of screen space objects that can be clustered",
+        type: "number"
+    })
+    minimumClusterSize: number = 5;
+
+    @primitiveTrait({
+        name: "pinSize",
+        description:
+            "The size of the pin, in pixels",
+        type: "number"
+    })
+    pinSize: number = 60;
+
+    @primitiveTrait({
+        name: "pinBackgroundColor",
+        type: "string",
+        description:
+            "The color of the pin"
+    })
+    pinBackgroundColor: string = "gray";
+}

lib/Traits/TraitsClasses/GeoJsonTraits.ts

@@ -5,6 +5,7 @@ import objectTrait from "../Decorators/objectTrait";
 import primitiveTrait from "../Decorators/primitiveTrait";
 import mixTraits from "../mixTraits";
 import ModelTraits from "../ModelTraits";
+import ClusteringTraits from "./ClusteringTraits";
 import FeatureInfoUrlTemplateTraits from "./FeatureInfoTraits";
 import LegendOwnerTraits from "./LegendOwnerTraits";
 import StyleTraits from "./StyleTraits";
@@ -163,4 +164,12 @@ export class GeoJsonTraits extends mixTraits(
       "Replaces `MultiPoint` features with its equivalent `Point` features when `true`. This is useful for example when using Table mode which does not support `MultiPoint` features currently."
   })
   explodeMultiPoints = true;
+
+  @objectTrait({
+    type: ClusteringTraits,
+    name: "clustering",
+    description:
+      "Allows to activate the clustering of entities, works only with Cesium as a viewer."
+  })
+  clustering?: ClusteringTraits;
 }