update public

public/allow_picking.js

+var Pickers_3DTile_Activated = true;
+function active3DTilePicker() {
+    var highlighted = {
+        feature: undefined,
+        originalColor: new Cesium.Color()
+    };
+    // Information about the currently selected feature
+    var selected = {
+        feature: undefined,
+        originalColor: new Cesium.Color()
+    };
+
+    // An entity object which will hold info about the currently selected feature for infobox display
+    var selectedEntity = new Cesium.Entity();
+
+    // Get default left click handler for when a feature is not picked on left click
+    var clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    // Color a feature yellow on hover.
+    viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
+        if (Pickers_3DTile_Activated) {
+            // If a feature was previously highlighted, undo the highlight
+            if (Cesium.defined(highlighted.feature)) {
+                highlighted.feature.color = highlighted.originalColor;
+                highlighted.feature = undefined;
+            }
+            // Pick a new feature
+            var picked3DtileFeature = viewer.scene.pick(movement.endPosition);
+            if (!Cesium.defined(picked3DtileFeature)) {
+                // nameOverlay.style.display = 'none';
+                return;
+            }
+            // A feature was picked, so show it's overlay content
+            // nameOverlay.style.display = 'block';
+            // nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + 'px';
+            // nameOverlay.style.left = movement.endPosition.x + 'px';
+            var name = picked3DtileFeature.getProperty('name');
+            if (!Cesium.defined(name)) {
+                name = picked3DtileFeature.getProperty('OBJECTID');
+            }
+            // nameOverlay.textContent = name;
+            // Highlight the feature if it's not already selected.
+            if (picked3DtileFeature !== selected.feature) {
+                highlighted.feature = picked3DtileFeature;
+                Cesium.Color.clone(picked3DtileFeature.color, highlighted.originalColor);
+                picked3DtileFeature.color = Cesium.Color.YELLOW;
+            }
+        }
+    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+    // Color a feature on selection and show metadata in the InfoBox.
+    viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
+        if (Pickers_3DTile_Activated) {
+            // If a feature was previously selected, undo the highlight
+            if (Cesium.defined(selected.feature)) {
+                selected.feature.color = selected.originalColor;
+                selected.feature = undefined;
+            }
+            // Pick a new feature
+            var picked3DtileFeature = viewer.scene.pick(movement.position);
+            if (!Cesium.defined(picked3DtileFeature)) {
+                clickHandler(movement);
+                return;
+            }
+            // Select the feature if it's not already selected
+            if (selected.feature === picked3DtileFeature) {
+                return;
+            }
+            selected.feature = picked3DtileFeature;
+            // Save the selected feature's original color
+            if (picked3DtileFeature === highlighted.feature) {
+                Cesium.Color.clone(highlighted.originalColor, selected.originalColor);
+                highlighted.feature = undefined;
+            } else {
+                Cesium.Color.clone(picked3DtileFeature.color, selected.originalColor);
+            }
+            // Highlight newly selected feature
+            picked3DtileFeature.color = Cesium.Color.LIME;
+            // Set feature infobox description
+            var feature_DOITT_ID = picked3DtileFeature.getProperty('DOITT_ID');
+            selectedEntity.name = "DOITT ID: " + feature_DOITT_ID + "";
+            selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
+            viewer.selectedEntity = selectedEntity;
+            selectedEntity.description = '<table class="cesium-infoBox-defaultTable"><tbody>' +
+                '<tr><th>BIN</th><td>' + picked3DtileFeature.getProperty('BIN') + '</td></tr>' +
+                '<tr><th>Height</th><td>' + picked3DtileFeature.getProperty('Height') + '</td></tr>' +
+                '<tr><th>Longitude</th><td>' + picked3DtileFeature.getProperty('Longitude') + '</td></tr>' +
+                '<tr><th>Latitude</th><td>' + picked3DtileFeature.getProperty('Latitude') + '</td></tr>' +
+                '</tbody></table>';
+        }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+}
+active3DTilePicker()
\ No newline at end of file

public/index.html

+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <script src="https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Cesium.js"></script>
+    <link href="https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
+</head>
+<body>
+    <div id="cesiumContainer" style="width: 100%; height:100%"></div>
+    <script src="load_cesium.js"></script>
+    <script src="allow_picking.js"></script>
+</body>
+</html>
\ No newline at end of file

public/load_cesium.js

+var viewer = new Cesium.Viewer('cesiumContainer');
+var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
+    // url: "../3dtile_nyc/tileset.json",
+    // url: "http://193.196.37.89:8092/AssetsHFT/3DTile_Niedernhalle/tileset.json",
+    url: "http://steinbeis-3dps.eu:8080/3DContainerTile/collections/NewYork/3DTiles/",
+}))
+Cesium.when(tileset.readyPromise).then(function (tileset) {viewer.flyTo(tileset)})
+// chroma.scale(['#fafa6e','#2A4858']).mode('lch').colors(6)
+function colorByHeight () {
+    tileset.style = new Cesium.Cesium3DTileStyle({
+        color: {
+            conditions: [
+                ['${Height} >= 300', 'color("#FF442E")'],
+                ['${Height} >= 200', 'color("#FF8000")'],
+                ['${Height} >= 100', 'color("#E7A700")'],
+                ['${Height} >= 50', 'color("#CFC600")'],
+                ['${Height} >= 25', 'color("#A4B600")'],
+                ['${Height} >= 10', 'color("#6A9E00")'],
+                ['true', 'rgb(127, 59, 8)']
+            ]
+        }
+    });
+}
+