@map-colonies/react-components 3.10.5 → 3.12.2

package/src/lib/cesium-map/layers/3d.tileset.stories.tsx

@@ -1,110 +1,164 @@
-import React from 'react';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { action } from '@storybook/addon-actions';
-import { CesiumMap } from '../map';
-import { Cesium3DTileset } from './3d.tileset';
-
-export default {
-  title: 'Cesium Map/Layers/3DTileset',
-  component: Cesium3DTileset,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} as Meta;
-
-const mapDivStyle = {
-  height: '100%',
-  width: '100%',
-  position: 'absolute' as const,
-};
-
-export const Cesium3DTilesetLayer: Story = (args: unknown) => (
-  <div style={mapDivStyle}>
-    <CesiumMap {...args}>
-      <Cesium3DTileset
-        isZoomTo={true}
-        url="/mock/tileset/tileset.json"
-        onAllTilesLoad={action('onAllTilesLoad')}
-        onInitialTilesLoad={action('onInitialTilesLoad')}
-        onTileFailed={action('onTileFailed')}
-        onTileLoad={action('onTileLoad')}
-        onTileUnload={action('onTileUnload')}
-        onReady={(tileset): void => {
-          action('onReady');
-        }}
-        onClick={action('onClick')}
-      />
-    </CesiumMap>
-  </div>
-);
-
-Cesium3DTilesetLayer.argTypes = {
-  zoom: {
-    defaultValue: 3,
-    control: {
-      type: 'range',
-      min: 0,
-      max: 20,
-    },
-  },
-};
-
-export const Cesium3DTilesetOnHeightLayer: Story = (args: unknown) => (
-  <div style={mapDivStyle}>
-    <CesiumMap {...args}>
-      <Cesium3DTileset
-        isZoomTo={false}
-        heightFromGround={-170}
-        url="/mock/tileset/tileset.json"
-        onAllTilesLoad={action('onAllTilesLoad')}
-        onInitialTilesLoad={action('onInitialTilesLoad')}
-        onTileFailed={action('onTileFailed')}
-        onTileLoad={action('onTileLoad')}
-        onTileUnload={action('onTileUnload')}
-        onReady={(tileset): void => {
-          action('onReady');
-        }}
-        onClick={action('onClick')}
-      />
-    </CesiumMap>
-  </div>
-);
-
-Cesium3DTilesetOnHeightLayer.argTypes = {
-  zoom: {
-    defaultValue: 18,
-    control: {
-      type: 'range',
-      min: 0,
-      max: 20,
-    },
-  },
-  center: {
-    defaultValue: [-75.61208, 40.04227],
-  },
-};
-
-export const CesiumSolar3DTilesetLayer: Story = (args: unknown) => (
-  <div style={mapDivStyle}>
-    <CesiumMap {...args}>
-      <Cesium3DTileset
-        isZoomTo={true}
-        url="/mock/tileset_2/L16_31023/L16_31023.json"
-      />
-    </CesiumMap>
-  </div>
-);
-
-CesiumSolar3DTilesetLayer.argTypes = {
-  center: {
-    defaultValue: [34.811, 31.908],
-  },
-  zoom: {
-    defaultValue: 14,
-    control: {
-      type: 'range',
-      min: 0,
-      max: 20,
-    },
-  },
-};
+import React from 'react';
+import { ArcGISTiledElevationTerrainProvider } from 'cesium';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { action } from '@storybook/addon-actions';
+import { CesiumMap } from '../map';
+import { LayerType } from '../layers-manager';
+import { Cesium3DTileset } from './3d.tileset';
+
+export default {
+  title: 'Cesium Map/Layers/3DTileset',
+  component: Cesium3DTileset,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta;
+
+const mapDivStyle = {
+  height: '100%',
+  width: '100%',
+  position: 'absolute' as const,
+};
+
+const BASE_MAPS = {
+  maps: [
+    {
+      id: '1st',
+      title: '1st Map Title',
+      isCurrent: true,
+      thumbnail:
+        'https://nsw.digitaltwin.terria.io/build/efa2f6c408eb790753a9b5fb2f3dc678.png',
+      baseRasteLayers: [
+        {
+          id: 'GOOGLE_TERRAIN',
+          type: 'XYZ_LAYER' as LayerType,
+          opacity: 1,
+          zIndex: 0,
+          options: {
+            url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
+            layers: '',
+            credit: 'GOOGLE',
+          },
+        },
+      ],
+      baseVectorLayers: [],
+    },
+  ],
+};
+
+const ArcGisProvider = new ArcGISTiledElevationTerrainProvider({
+  url:
+    'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
+});
+
+export const Cesium3DTilesetLayer: Story = (args: unknown) => (
+  <div style={mapDivStyle}>
+    <CesiumMap {...args}>
+      <Cesium3DTileset
+        isZoomTo={true}
+        url="/mock/tileset_1/tileset.json"
+        onAllTilesLoad={action('onAllTilesLoad')}
+        onInitialTilesLoad={action('onInitialTilesLoad')}
+        onTileFailed={action('onTileFailed')}
+        onTileLoad={action('onTileLoad')}
+        onTileUnload={action('onTileUnload')}
+        onReady={(tileset): void => {
+          action('onReady');
+        }}
+        onClick={action('onClick')}
+      />
+    </CesiumMap>
+  </div>
+);
+
+Cesium3DTilesetLayer.argTypes = {
+  baseMaps: {
+    defaultValue: BASE_MAPS,
+  },
+  zoom: {
+    defaultValue: 3,
+    control: {
+      type: 'range',
+      min: 0,
+      max: 20,
+    },
+  },
+};
+
+Cesium3DTilesetLayer.storyName = '3D Layer';
+
+export const Cesium3DTilesetWithHeightCorrectionLayer: Story = (
+  args: unknown
+) => (
+  <div style={mapDivStyle}>
+    <CesiumMap {...args}>
+      <Cesium3DTileset
+        isZoomTo={false}
+        heightFromGround={-10}
+        url="/mock/tileset_1/tileset.json"
+        onAllTilesLoad={action('onAllTilesLoad')}
+        onInitialTilesLoad={action('onInitialTilesLoad')}
+        onTileFailed={action('onTileFailed')}
+        onTileLoad={action('onTileLoad')}
+        onTileUnload={action('onTileUnload')}
+        onReady={(tileset): void => {
+          action('onReady');
+        }}
+        onClick={action('onClick')}
+      />
+    </CesiumMap>
+  </div>
+);
+
+Cesium3DTilesetWithHeightCorrectionLayer.argTypes = {
+  baseMaps: {
+    defaultValue: BASE_MAPS,
+  },
+  zoom: {
+    defaultValue: 17,
+    control: {
+      type: 'range',
+      min: 0,
+      max: 20,
+    },
+  },
+  center: {
+    defaultValue: [-75.61208, 40.04227],
+  },
+};
+
+Cesium3DTilesetWithHeightCorrectionLayer.storyName =
+  '3D with Height Correction Layer';
+
+export const CesiumSolar3DTilesetLayer: Story = (args: unknown) => (
+  <div style={mapDivStyle}>
+    <CesiumMap {...args}>
+      <Cesium3DTileset
+        isZoomTo={true}
+        url="/mock/tileset_2/L16_31023/L16_31023.json"
+      />
+    </CesiumMap>
+  </div>
+);
+
+CesiumSolar3DTilesetLayer.argTypes = {
+  baseMaps: {
+    defaultValue: BASE_MAPS,
+  },
+  terrainProvider: {
+    defaultValue: ArcGisProvider,
+  },
+  center: {
+    defaultValue: [34.811, 31.908],
+  },
+  zoom: {
+    defaultValue: 14,
+    control: {
+      type: 'range',
+      min: 0,
+      max: 20,
+    },
+  },
+};
+
+CesiumSolar3DTilesetLayer.storyName = 'Solar 3D Layer with Terrain Provider';

package/src/lib/cesium-map/layers/3d.tileset.tsx

@@ -1,47 +1,51 @@
-import { Cartesian3, Cartographic, Matrix4 } from 'cesium';
-import React from 'react';
-
-import { Cesium3DTileset as Resium3DTileset } from 'resium';
-import { Cesium3DTilesetProps } from 'resium/dist/types/src/Cesium3DTileset/Cesium3DTileset';
-import { CesiumViewer, useCesiumMap } from '../map';
-
-export interface RCesium3DTilesetProps extends Cesium3DTilesetProps {
-  isZoomTo?: boolean;
-  heightFromGround?: number;
-}
-
-export const Cesium3DTileset: React.FC<RCesium3DTilesetProps> = (props) => {
-  const mapViewer: CesiumViewer = useCesiumMap();
-  return (
-    <Resium3DTileset
-      {...props}
-      onReady={(tileset): void => {
-        props.onReady?.(tileset);
-        if (props.isZoomTo) {
-          void mapViewer.zoomTo(tileset);
-        }
-        if (props.heightFromGround) {
-          const cartographic = Cartographic.fromCartesian(
-            tileset.boundingSphere.center
-          );
-          const surface = Cartesian3.fromRadians(
-            cartographic.longitude,
-            cartographic.latitude,
-            0.0
-          );
-          const offset = Cartesian3.fromRadians(
-            cartographic.longitude,
-            cartographic.latitude,
-            props.heightFromGround
-          );
-          const translation = Cartesian3.subtract(
-            offset,
-            surface,
-            new Cartesian3()
-          );
-          tileset.modelMatrix = Matrix4.fromTranslation(translation);
-        }
-      }}
-    />
-  );
-};
+import React from 'react';
+import { Cartesian3, Cartographic, Matrix4 } from 'cesium';
+import { Cesium3DTileset as Resium3DTileset } from 'resium';
+import { Cesium3DTilesetProps } from 'resium/dist/types/src/Cesium3DTileset/Cesium3DTileset';
+import { CesiumViewer, useCesiumMap } from '../map';
+
+const GROUND_LEVEL = 0.0;
+
+export interface RCesium3DTilesetProps extends Cesium3DTilesetProps {
+  isZoomTo?: boolean;
+  heightFromGround?: number;
+}
+
+export const Cesium3DTileset: React.FC<RCesium3DTilesetProps> = (props) => {
+  const mapViewer: CesiumViewer = useCesiumMap();
+  return (
+    <Resium3DTileset
+      {...props}
+      onReady={(tileset): void => {
+        props.onReady?.(tileset);
+        if (props.isZoomTo === true) {
+          void mapViewer.zoomTo(tileset);
+        }
+        const scene = mapViewer.scene;
+        scene.globe.depthTestAgainstTerrain = true;
+        const cartographic = Cartographic.fromCartesian(
+          tileset.boundingSphere.center
+        );
+        const heightFromGround = props.heightFromGround ?? GROUND_LEVEL;
+        if (heightFromGround) {
+          const surface = Cartesian3.fromRadians(
+            cartographic.longitude,
+            cartographic.latitude,
+            cartographic.height
+          );
+          const offset = Cartesian3.fromRadians(
+            cartographic.longitude,
+            cartographic.latitude,
+            cartographic.height + heightFromGround
+          );
+          const translation = Cartesian3.subtract(
+            offset,
+            surface,
+            new Cartesian3()
+          );
+          tileset.modelMatrix = Matrix4.fromTranslation(translation);
+        }
+      }}
+    />
+  );
+};

package/src/lib/cesium-map/layers/3d.tileset.with.update.tsx

@@ -0,0 +1,120 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+/*
+   https://sandcastle.cesium.com/index.html?#c=fVZtTxs5EP4re3xho0YOkOv1jgC6ElIuiAQKKaWQqnJ2nayL187Z3qCk4r/f+GXf8nKWot3YzzOeGT8z6wWWQRdLTRTFvB2cBl14y1JUznXGfMxbreBSYq798tV9gKOIKBVoESxFJgMqeICVIlqNuTfRFxzFZIozpj9a8Ei8EA5b7JPlVTK5jOgNvep/WfUPh7Sv+vzufdTt/9F/mT8+dK/+QgD6N758MSA6GJ3/HB712gN60H66fHq5Ht0l39K+vvnaWw27h/RmFP+8ueitBqvB+8FqRq+7V/MnMDa8+Kz6KUtieB+MPv8+/Am/i8HBoH2AztvdD0NBlu2n28do+uHHp8fz3rdXKiN91J6qLyS64/eHR5+YHv65b3OwgFRFNrQRkRJTfivFgsZEllmLJMGafBWSxR4TNjqOSRijcyVovEnm5DU30NuBsmacoQUlr+u0BzsX7jv3uoJr4BK53wx+jXkAY4IVucZLIm9p9ALs42CKmSJNt6rXXDreHueYv+XRqIhwAj44Z5D9az20b2jGxITA4c91MiJKf5yBFaW9OaBpmZEiIE0ZAeHAtCPPJU2ppguiEI7j0LlYCdY92hcjxwt9iGZkkh0HpfzuiAJtRgRNpUg/GnX247D9oX3UcJQ3ePrEujhWQqQjEXqPPAoJnRD5ShUJpxmPtJF6CKEI2Qgqe0eCK8EIYmLmVzv5LnaLgpvNYxCJ8T6wOxVWTDImIuMx5bMHwbLUZNggUH3W26XTIPSxQpnBecfWHAJHNOH6vMZp1HzdvstWYh5E6aKHrbE6JSAVMWGw7FfQDztRASSEzhJjoO4HSimnaZb+Y5creJCFtpK3htAPqaOunapguJApZoWInAKLokMzAlRNo/tMTnFEhhYdOsNNp66i44WNRsWwmE6dOksASqGn0Tlbni/vI8ywDN3uTR/Z/xuMYF7UO62YSTxPaGSFWvC8e1XuHNZBiCX7NSG2y/oWkevCJWG9rk9PT3f2oZo+zFaSKIjSHKNxsFMuugVUHOJBZc37hwAj2IKEDltUAuwOzv/awJfxKJzOGfG+DYTSFwR6GQNtbw2pGTxb9743EBQpLwrUb6xqUW1E5kHPB987dZRJ4W9rteVD2bDoUqIzyTcyVSmcNaQzVoG+NcpCcy95KrfFVXOiCGeboLQo5VQ/jEJSQlHbl2oKV9lESxxpT2r6MtitbDPWy7NuMmKCkzDfrrmBrvXLtx0t0zR8KUSZAXNUZiLvQ3cEx8tafkqyY+4Uo8kGowqsWNf9VwCZ57XAsfka9RawxbXHlKdSa+NVEZkFW3Y1n6uj4p210tmE5D6Fjd3a2tSPbTUJZbG0ly6XI/+/0lEY4TOdmDL3a8jNeMhUyCA0OGorHR4nntIJ3r2jOxJtTim390y/V3yz7t1jHkdYafh6QE5HYjZj5DzTGjK5n18SehxPoOzhCmMuC82gyHWUELjCxDUBrM+ZsaMFbr/a7NTELiu72uj6KdRzkksq16E9tb3m3onSS0bOHOVvms6F1OYyEyLU0gQ6IthQrUkGQcIhKmVoJ62cdBLTRUDj0/He2v1vvBdEDG7lsDLNGLunKzLeOztpAb5GY6Bu+ArfLIhkeGkgyeHZtZtECJ204O8mSwvBJlhWLP4H
+*/
+
+import React, { useEffect, useState } from 'react';
+import {
+  Cesium3DTileset,
+  Cesium3DTile,
+  Cartographic,
+  Cartesian3,
+  defined,
+  sampleTerrainMostDetailed,
+  Cesium3DTileContent,
+} from 'cesium';
+import { CesiumViewer, useCesiumMap } from '../map';
+
+export interface Cesium3DTilesetWithUpdateProps {
+  url: string;
+  withUpdate?: boolean;
+}
+
+export const Cesium3DTilesetWithUpdate: React.FC<Cesium3DTilesetWithUpdateProps> = ({
+  url,
+  withUpdate,
+}) => {
+  const mapViewer: CesiumViewer = useCesiumMap();
+  const scene = mapViewer.scene;
+  const [cesium3DTileset] = useState<Cesium3DTileset>(
+    new Cesium3DTileset({
+      url: url,
+    })
+  );
+  const [tileset] = useState<Cesium3DTileset>(
+    scene.primitives.add(cesium3DTileset)
+  );
+
+  useEffect(() => {
+    scene.globe.depthTestAgainstTerrain = true;
+    void mapViewer.zoomTo(tileset);
+    if (withUpdate === true) {
+      updateTileset(tileset);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const updateContent = (
+    model: Cesium3DTileContent,
+    boundingVolume: any
+  ): void => {
+    const height = boundingVolume.minimumHeight
+      ? boundingVolume.minimumHeight
+      : boundingVolume.center.z - boundingVolume.radius;
+    // @ts-ignore
+    const center = model._rtcCenter ?? boundingVolume.center;
+    const normal = scene.globe.ellipsoid.geodeticSurfaceNormal(
+      center,
+      new Cartesian3()
+    );
+    const offset = Cartesian3.multiplyByScalar(
+      normal,
+      height,
+      new Cartesian3()
+    );
+    const carto = Cartographic.fromCartesian(center);
+    void new Promise((resolve, reject) => {
+      // @ts-ignore
+      if (scene.terrainProvider._ready !== true) {
+        const result = { ...carto };
+        result.height = 0;
+        resolve(result);
+      } else {
+        void sampleTerrainMostDetailed(scene.terrainProvider, [carto]).then(
+          (results) => {
+            const result = results[0];
+            if (!defined(result)) {
+              resolve(carto);
+            }
+            resolve(result);
+          }
+        );
+      }
+    }).then((result) => {
+      const resultCartesian = Cartographic.toCartesian(result as Cartographic);
+      const position = Cartesian3.subtract(
+        resultCartesian,
+        offset,
+        new Cartesian3()
+      );
+      // @ts-ignore
+      model._rtcCenter = Cartesian3.clone(position, model._rtcCenter);
+    });
+  };
+
+  const updateTile = (tile: Cesium3DTile): void => {
+    if (tile.content !== undefined) {
+      // @ts-ignore
+      updateContent(tile.content, tile.boundingVolume.boundingVolume);
+    } else {
+      const listener = tileset.tileLoad.addEventListener((t) => {
+        if (t === tile) {
+          updateContent(t.content, t.boundingVolume.boundingVolume);
+          listener();
+        }
+      });
+    }
+    tile.children.forEach((child) => updateTile(child));
+  };
+
+  const updateTileset = (tileset: Cesium3DTileset): void => {
+    void tileset.readyPromise.then(() => {
+      updateTile(tileset.root);
+    });
+  };
+
+  return <></>;
+};