geosolutions-it#81: implemented a simple 3dtileset layer for CesiumJS…

…, basic options, only a url (using https://github.com/CesiumGS/3d-tiles-samples as a server)
mbarto · Mar 24, 2021 · 4743c12 · 4743c12
1 parent 5bcb1f6
commit 4743c12
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 2 deletions.
diff --git a/web/client/components/map/cesium/plugins/ThreeDimTileSetLayer.js b/web/client/components/map/cesium/plugins/ThreeDimTileSetLayer.js
@@ -0,0 +1,29 @@
+import Layers from '../../../../utils/cesium/Layers';
+import * as Cesium from 'Cesium';
+
+Layers.registerType('3dtileset', {
+    create: (options, map) => {
+        if (options.visibility) {
+            const tileSet = map.scene.primitives.add(new Cesium.Cesium3DTileset({
+                url: options.url
+            }));
+            map.zoomTo(tileSet, new Cesium.HeadingPitchRange(0, -0.5, 0));
+            return {
+                detached: true,
+                tileSet,
+                remove: () => {
+                    map.scene.primitives.remove(tileSet);
+                }
+            };
+        }
+        return null;
+    },
+    update: function(layer, newOptions, oldOptions, map) {
+        if (!newOptions.visibility && oldOptions.visibility) {
+            layer.remove();
+        } else if (newOptions.visibility && !oldOptions.visibility) {
+            return  this.create(newOptions, map);
+        }
+        return null;
+    }
+});
diff --git a/web/client/components/map/cesium/plugins/index.js b/web/client/components/map/cesium/plugins/index.js
@@ -14,5 +14,6 @@ export default {
     WMTSLayer: require('./WMTSLayer'),
     GraticuleLayer: require('./GraticuleLayer'),
     MarkerLayer: require('./MarkerLayer'),
-    OverlayLayer: require('./OverlayLayer')
+    OverlayLayer: require('./OverlayLayer'),
+    ThreeDimTileSetLayer: require('./ThreeDimTileSetLayer')
 };
diff --git a/web/client/config.json b/web/client/config.json
@@ -23,7 +23,31 @@
                 "source": "osm",
                 "group": "background",
                 "visibility": true
+            },
+            {
+              "title": "Dragon",
+              "type": "3dtileset",
+              "url": "http://localhost:8003/tilesets/TilesetWithDiscreteLOD/tileset.json",
+              "visibility": true
+            },
+            {
+              "title": "Buildings",
+              "type": "3dtileset",
+              "url": "http://localhost:8003/tilesets/TilesetWithRequestVolume/tileset.json",
+              "visibility": false
+            },
+            {
+              "title": "Trees",
+              "type": "3dtileset",
+              "url": "http://localhost:8003/tilesets/TilesetWithTreeBillboards/tileset.json",
+              "visibility": false
+            },
+            {
+              "title": "Cube",
+              "type": "3dtileset",
+              "url": "http://localhost:8003/tilesets/TilesetWithExpiration/tileset.json",
+              "visibility": false
             }
         ]
     }
-}
+}