wip: area clipping

geoblocks · Dec 16, 2024 · 2b046d1 · 2b046d1
1 parent 806d7fc
commit 2b046d1
Show file tree

Hide file tree

Showing 6 changed files with 446 additions and 33 deletions.
diff --git a/src/apps/permits/demoPermitConfig.ts b/src/apps/permits/demoPermitConfig.ts
@@ -27,7 +27,7 @@ export const config: IPermitsConfig = {
         '@demo': () => import('../../catalogs/demoCatalog.js'),
       },
       layers: {
-        tiles3d: ['@cesium/googlePhotorealistic'],
+        // tiles3d: ['@cesium/googlePhotorealistic'],
         // models: ['@demo/sofa', '@demo/thatopensmall'],
         imageries: ['@geoadmin/pixel-karte-farbe'],
         // terrain: '@geoadmin/terrain',

diff --git a/src/apps/permits/index.ts b/src/apps/permits/index.ts
@@ -13,9 +13,10 @@ import type {IPermitsConfig} from './ingv-config-permits.js';
 import '../../plugins/cesium/ngv-plugin-cesium-widget';
 import '../../plugins/cesium/ngv-plugin-cesium-upload';
 import '../../plugins/cesium/ngv-plugin-cesium-model-interact';
+import '../../plugins/cesium/ngv-plugin-cesium-slicing';
 import type {CesiumWidget, DataSourceCollection} from '@cesium/engine';
 
-import {PrimitiveCollection} from '@cesium/engine';
+import {PrimitiveCollection, CustomDataSource} from '@cesium/engine';
 import type {ViewerInitializedDetails} from '../../plugins/cesium/ngv-plugin-cesium-widget.js';
 
 @customElement('ngv-app-permits')
@@ -26,6 +27,7 @@ export class NgvAppPermits extends ABaseApp<IPermitsConfig> {
   private uploadedModelsCollection: PrimitiveCollection =
     new PrimitiveCollection();
   private dataSourceCollection: DataSourceCollection;
+  private slicingDataSource: CustomDataSource = new CustomDataSource();
 
   private storeOptions = {
     localStoreKey: 'permits-localStoreModels',
@@ -74,6 +76,11 @@ export class NgvAppPermits extends ABaseApp<IPermitsConfig> {
                   .storeOptions="${this.storeOptions}"
                   .options="${{listTitle: 'Uploaded models'}}"
                 ></ngv-plugin-cesium-model-interact>
+                <ngv-plugin-cesium-slicing
+                  .viewer="${this.viewer}"
+                  .tiles3dCollection="${this.collections.tiles3d}"
+                  .slicingDataSource="${this.slicingDataSource}"
+                ></ngv-plugin-cesium-slicing>
               `
             : ''}
         </div>
@@ -85,6 +92,9 @@ export class NgvAppPermits extends ABaseApp<IPermitsConfig> {
             this.viewer.scene.primitives.add(this.uploadedModelsCollection);
             this.dataSourceCollection = evt.detail.dataSourceCollection;
             this.collections = evt.detail.primitiveCollections;
+            this.dataSourceCollection
+              .add(this.slicingDataSource)
+              .catch((e) => console.error(e));
           }}
         ></ngv-plugin-cesium-widget>
       </ngv-structure-app>

diff --git a/src/plugins/cesium/interactionHelpers.ts b/src/plugins/cesium/interactionHelpers.ts
@@ -1,10 +1,11 @@
 import {
   Cesium3DTileset,
   ClippingPolygonCollection,
-  CustomDataSource, Globe,
+  CustomDataSource,
+  Globe,
   Model,
   PrimitiveCollection,
-  Scene
+  Scene,
 } from '@cesium/engine';
 import {
   ArcType,
@@ -528,7 +529,10 @@ export function getClippingPolygon(model: INGVCesiumModel): ClippingPolygon {
   });
 }
 
-export function applyClippingTo3dTileset(tileset: Cesium3DTileset, models: INGVCesiumModel[]): void {
+export function applyClippingTo3dTileset(
+  tileset: Cesium3DTileset,
+  models: INGVCesiumModel[],
+): void {
   const polygons: ClippingPolygon[] = [];
   models.forEach((m) => {
     if (m.id.tilesClipping) {
@@ -540,7 +544,11 @@ export function applyClippingTo3dTileset(tileset: Cesium3DTileset, models: INGVC
   });
 }
 
-export function updateModelClipping(model: INGVCesiumModel, tiles3dCollection: PrimitiveCollection, globe: Globe): void {
+export function updateModelClipping(
+  model: INGVCesiumModel,
+  tiles3dCollection: PrimitiveCollection,
+  globe: Globe,
+): void {
   if ((!tiles3dCollection?.length && !globe) || !model?.ready) return;
   const polygon = model.id.clippingPolygon;
   const newPolygon = getClippingPolygon(model);
@@ -585,7 +593,11 @@ export function updateModelClipping(model: INGVCesiumModel, tiles3dCollection: P
   model.id.clippingPolygon = newPolygon;
 }
 
-export function removeClippingFrom3dTilesets(model: INGVCesiumModel, tiles3dCollection: PrimitiveCollection, globe: Globe): void {
+export function removeClippingFrom3dTilesets(
+  model: INGVCesiumModel,
+  tiles3dCollection: PrimitiveCollection,
+  globe: Globe,
+): void {
   if ((!tiles3dCollection?.length && !globe) || !model.ready) return;
   const polygon = model.id.clippingPolygon;
   if (tiles3dCollection?.length) {

diff --git a/src/plugins/cesium/ngv-plugin-cesium-model-interact.ts b/src/plugins/cesium/ngv-plugin-cesium-model-interact.ts
@@ -7,7 +7,7 @@ import type {
   PrimitiveCollection,
   DataSourceCollection,
   Cartesian2,
-  Cesium3DTileset
+  Cesium3DTileset,
 } from '@cesium/engine';
 import {
   Model,
@@ -38,7 +38,7 @@ import type {BBoxStyles} from './interactionHelpers.js';
 import {
   applyClippingTo3dTileset,
   removeClippingFrom3dTilesets,
-  updateModelClipping
+  updateModelClipping,
 } from './interactionHelpers.js';
 import {
   getHorizontalMoveVector,
@@ -123,7 +123,11 @@ export class NgvPluginCesiumModelInteract extends LitElement {
     this.primitiveCollection.primitiveAdded.addEventListener(
       (model: INGVCesiumModel) => {
         this.onPrimitivesChanged();
-        updateModelClipping(model, this.tiles3dCollection, this.viewer.scene.globe);
+        updateModelClipping(
+          model,
+          this.tiles3dCollection,
+          this.viewer.scene.globe,
+        );
       },
     );
     this.primitiveCollection.primitiveRemoved.addEventListener(
@@ -198,15 +202,29 @@ export class NgvPluginCesiumModelInteract extends LitElement {
       const normal = Ellipsoid.WGS84.geodeticSurfaceNormal(this.moveStart);
       this.movePlane = Plane.fromPointNormal(this.moveStart, normal);
 
-      if (this.chosenModel?.id.tilesClipping || this.chosenModel?.id.terrainClipping) {
-        removeClippingFrom3dTilesets(this.chosenModel, this.tiles3dCollection, this.viewer.scene.globe);
+      if (
+        this.chosenModel?.id.tilesClipping ||
+        this.chosenModel?.id.terrainClipping
+      ) {
+        removeClippingFrom3dTilesets(
+          this.chosenModel,
+          this.tiles3dCollection,
+          this.viewer.scene.globe,
+        );
       }
     }
   }
   onLeftUp(): void {
     if (this.grabType) {
-      if (this.chosenModel?.id.tilesClipping || this.chosenModel?.id.terrainClipping) {
-        updateModelClipping(this.chosenModel, this.tiles3dCollection, this.viewer.scene.globe);
+      if (
+        this.chosenModel?.id.tilesClipping ||
+        this.chosenModel?.id.terrainClipping
+      ) {
+        updateModelClipping(
+          this.chosenModel,
+          this.tiles3dCollection,
+          this.viewer.scene.globe,
+        );
       }
       this.viewer.scene.screenSpaceCameraController.enableInputs = true;
       this.grabType = undefined;
@@ -414,7 +432,11 @@ export class NgvPluginCesiumModelInteract extends LitElement {
           });
           this.primitiveCollection.add(model);
           model.readyEvent.addEventListener(() =>
-            updateModelClipping(model, this.tiles3dCollection, this.viewer.scene.globe),
+            updateModelClipping(
+              model,
+              this.tiles3dCollection,
+              this.viewer.scene.globe,
+            ),
           );
         }),
       );
@@ -449,7 +471,11 @@ export class NgvPluginCesiumModelInteract extends LitElement {
           @clippingChange=${(evt: {detail: ClippingChangeDetail}) => {
             this.chosenModel.id.terrainClipping = evt.detail.terrainClipping;
             this.chosenModel.id.tilesClipping = evt.detail.tilesClipping;
-            updateModelClipping(this.chosenModel, this.tiles3dCollection, this.viewer.scene.globe);
+            updateModelClipping(
+              this.chosenModel,
+              this.tiles3dCollection,
+              this.viewer.scene.globe,
+            );
           }}
           @done="${() => {
             this.chosenModel = undefined;