@map-colonies/react-components 3.8.0 → 3.10.1

package/src/lib/cesium-map/terrain-providers/custom/quantized-mesh-terrain-provider.ts

@@ -0,0 +1,237 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import {
+  BoundingSphere,
+  Cartesian3,
+  Cartographic,
+  Credit,
+  Ellipsoid,
+  Math,
+  OrientedBoundingBox,
+  QuantizedMeshTerrainData,
+  Rectangle,
+  TerrainProvider,
+  TilingScheme,
+  WebMercatorTilingScheme,
+} from 'cesium';
+import decode from '@here/quantized-mesh-decoder';
+import dummyTileBuffer from './dummy-quantized-mesh-tile';
+
+const TILE_IMAGE_WIDTH = 65;
+
+export interface IDecodedTileHeader {
+  centerX: number;
+  centerY: number;
+  centerZ: number;
+  minHeight: number;
+  maxHeight: number;
+  boundingSphereCenterX: number;
+  boundingSphereCenterY: number;
+  boundingSphereCenterZ: number;
+  boundingSphereRadius: number;
+  horizonOcclusionPointX: number;
+  horizonOcclusionPointY: number;
+  horizonOcclusionPointZ: number;
+}
+
+export interface IExtensions {
+  vertexNormals?: Uint8Array;
+  waterMask?: ArrayBufferLike;
+  metadata?: unknown;
+}
+
+export interface IDecodedTile {
+  header: IDecodedTileHeader;
+  vertexData: Uint16Array;
+  triangleIndices: Uint16Array | Uint32Array;
+  westIndices: number[];
+  northIndices: number[];
+  eastIndices: number[];
+  southIndices: number[];
+  extensions?: IExtensions;
+}
+
+export default class QuantizedMeshTerrainProvider /*extends TerrainProvider*/ {
+  public tilingScheme: TilingScheme;
+  public ready: boolean;
+  public readyPromise: Promise<boolean>;
+  private readonly dummyTile: IDecodedTile;
+  private readonly getUrl: (x: number, y: number, level: number) => string;
+  private readonly credits: Credit[] | undefined;
+
+  public constructor(options: {
+    getUrl?: (x: number, y: number, level: number) => string;
+    credit?: string;
+    tilingScheme?: TilingScheme;
+  }) {
+    // super();
+    this.ready = false;
+    this.dummyTile = decode(dummyTileBuffer);
+    this.tilingScheme = options.tilingScheme ?? new WebMercatorTilingScheme();
+
+    if (options.getUrl === undefined) {
+      throw new Error('getUrl option is missing');
+    }
+
+    if (options.credit !== undefined) {
+      this.credits = [new Credit(options.credit)];
+    }
+
+    this.getUrl = options.getUrl;
+
+    this.readyPromise = Promise.resolve(true);
+    this.ready = true;
+  }
+
+  public requestTileGeometry(
+    x: number,
+    y: number,
+    level: number
+  ): Promise<void | QuantizedMeshTerrainData> | undefined {
+    const url = this.getUrl(x, y, level);
+
+    return window
+      .fetch(url)
+      .then((res: Response) => {
+        if (res.status !== 200) {
+          return this.generateDummyTile(x, y, level);
+        }
+        return this.decodeResponse(res, x, y, level);
+      })
+      .then((decodedTile: IDecodedTile) => {
+        return this.createQuantizedMeshData(decodedTile, x, y, level);
+      })
+      .catch((err: unknown) => {
+        console.error(err);
+      });
+  }
+
+  public getTileDataAvailable(x: number, y: number, level: number): boolean {
+    return true;
+  }
+
+  public getLevelMaximumGeometricError(level: number): number {
+    const levelZeroMaximumGeometricError = TerrainProvider.getEstimatedLevelZeroGeometricErrorForAHeightmap(
+      this.tilingScheme.ellipsoid,
+      TILE_IMAGE_WIDTH,
+      this.tilingScheme.getNumberOfXTilesAtLevel(0)
+    );
+
+    return levelZeroMaximumGeometricError / (1 << level);
+  }
+
+  private generateDummyTileHeader(
+    x: number,
+    y: number,
+    level: number
+  ): IDecodedTileHeader {
+    const tileRect = this.tilingScheme.tileXYToRectangle(x, y, level);
+    const tileNativeRect = this.tilingScheme.tileXYToNativeRectangle(
+      x,
+      y,
+      level
+    );
+    const tileCenter = Cartographic.toCartesian(Rectangle.center(tileRect));
+    const horizonOcclusionPoint = Ellipsoid.WGS84.transformPositionToScaledSpace(
+      tileCenter
+    );
+
+    return {
+      centerX: tileCenter.x,
+      centerY: tileCenter.y,
+      centerZ: tileCenter.z,
+      minHeight: 0,
+      maxHeight: 0,
+      boundingSphereCenterX: tileCenter.x,
+      boundingSphereCenterY: tileCenter.y,
+      boundingSphereCenterZ: tileCenter.z,
+      boundingSphereRadius: tileNativeRect.height,
+      horizonOcclusionPointX: horizonOcclusionPoint.x,
+      horizonOcclusionPointY: horizonOcclusionPoint.y,
+      horizonOcclusionPointZ: horizonOcclusionPoint.z,
+    };
+  }
+
+  private createQuantizedMeshData(
+    decodedTile: IDecodedTile,
+    x: number,
+    y: number,
+    level: number
+  ): QuantizedMeshTerrainData {
+    const tileRect = this.tilingScheme.tileXYToRectangle(x, y, level);
+    const boundingSphereCenter = new Cartesian3(
+      decodedTile.header.boundingSphereCenterX,
+      decodedTile.header.boundingSphereCenterY,
+      decodedTile.header.boundingSphereCenterZ
+    );
+    const boundingSphere = new BoundingSphere(
+      boundingSphereCenter,
+      decodedTile.header.boundingSphereRadius
+    );
+    const horizonOcclusionPoint = new Cartesian3(
+      decodedTile.header.horizonOcclusionPointX,
+      decodedTile.header.horizonOcclusionPointY,
+      decodedTile.header.horizonOcclusionPointZ
+    );
+
+    let orientedBoundingBox;
+
+    if (tileRect.width < Math.PI_OVER_TWO + Math.EPSILON5) {
+      orientedBoundingBox = OrientedBoundingBox.fromRectangle(
+        tileRect,
+        decodedTile.header.minHeight,
+        decodedTile.header.maxHeight
+      );
+    }
+
+    return new QuantizedMeshTerrainData({
+      minimumHeight: decodedTile.header.minHeight,
+      maximumHeight: decodedTile.header.maxHeight,
+      quantizedVertices: decodedTile.vertexData,
+      indices: decodedTile.triangleIndices,
+      boundingSphere: boundingSphere,
+      orientedBoundingBox: orientedBoundingBox,
+      horizonOcclusionPoint: horizonOcclusionPoint,
+      westIndices: decodedTile.westIndices,
+      southIndices: decodedTile.southIndices,
+      eastIndices: decodedTile.eastIndices,
+      northIndices: decodedTile.northIndices,
+      westSkirtHeight: 100,
+      southSkirtHeight: 100,
+      eastSkirtHeight: 100,
+      northSkirtHeight: 100,
+      childTileMask: 15,
+      credits: this.credits,
+    });
+  }
+
+  private generateDummyTile(x: number, y: number, level: number): IDecodedTile {
+    return {
+      ...this.dummyTile,
+      ...this.generateDummyTileHeader(x, y, level),
+    };
+  }
+
+  private decodeResponse(
+    res: any,
+    x: number,
+    y: number,
+    level: number
+  ): IDecodedTile {
+    return res
+      .arrayBuffer()
+      .then((buffer: ArrayBufferLike) => {
+        return decode(buffer);
+      })
+      .catch((err: unknown) => {
+        console.error(`Decoding failed on tile ${this.getUrl(x, y, level)}`);
+        console.error(err);
+
+        return this.generateDummyTile(x, y, level);
+      });
+  }
+}

package/src/lib/cesium-map/terrain-providers/terrain-provider-heights-tool.stories.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import {
+  ArcGISTiledElevationTerrainProvider,
+  EllipsoidTerrainProvider,
+  TerrainProvider,
+  CesiumTerrainProvider,
+  Resource,
+} from 'cesium';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { CesiumMap, useCesiumMap } from '../map';
+import { CesiumSceneMode } from '../map.types';
+import { Cesium3DTileset } from '../layers';
+import { InspectorTool } from '../tools/inspector.tool';
+import { TerrainianHeightTool } from '../tools/terranian-height.tool';
+import { LayerType } from '../layers-manager';
+
+export default {
+  title: 'Cesium Map/QuantizedMesh',
+  component: CesiumMap,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta;
+
+const mapDivStyle = {
+  height: '90%',
+  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 EllipsoidProvider = new EllipsoidTerrainProvider({});
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const MCCesiumProviderMercator = new CesiumTerrainProvider({
+  url: new Resource({
+    url: 'http://localhost:3000/terrain_mercator_crop',
+  }),
+});
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const MCCesiumProviderW84 = new CesiumTerrainProvider({
+  url: new Resource({
+    url: 'http://localhost:3000/terrain_w84_geo_crop',
+  }),
+});
+
+const ArcGisProvider = new ArcGISTiledElevationTerrainProvider({
+  url:
+    'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
+});
+
+const terrainProviderListQmesh = [
+  {
+    id: 'NONE',
+    value: EllipsoidProvider,
+  },
+  {
+    id: 'MC Mercator - Cesium Terrain Provider',
+    value: MCCesiumProviderMercator,
+  },
+  {
+    id: 'MC W84 - Cesium Terrain Provider',
+    value: MCCesiumProviderW84,
+  },
+  {
+    id: 'Arc Gis Terrain Provider',
+    value: ArcGisProvider,
+  },
+];
+
+interface ITerrainProviderItem {
+  id: string;
+  value: TerrainProvider | undefined;
+}
+
+interface ITerrainProviderSelectorProps {
+  terrainProviderList: ITerrainProviderItem[];
+}
+
+const TerrainProviderSelector: React.FC<ITerrainProviderSelectorProps> = ({
+  terrainProviderList,
+}) => {
+  const mapViewer = useCesiumMap();
+
+  return (
+    <>
+      <select
+        defaultValue={terrainProviderList[0].id}
+        onChange={(evt): void => {
+          const selected = terrainProviderList.find(
+            (item) => item.id === evt.target.value
+          );
+          mapViewer.terrainProvider = (selected as ITerrainProviderItem)
+            .value as TerrainProvider;
+        }}
+      >
+        {terrainProviderList.map((provider) => {
+          return <option key={provider.id}>{provider.id}</option>;
+        })}
+      </select>
+    </>
+  );
+};
+
+export const QuantizedMeshHeightsTool: Story = () => {
+  const [center] = useState<[number, number]>([-122, 43]);
+  return (
+    <div style={mapDivStyle}>
+      <CesiumMap
+        center={center}
+        zoom={5}
+        imageryProvider={false}
+        sceneModes={[CesiumSceneMode.SCENE3D, CesiumSceneMode.COLUMBUS_VIEW]}
+        baseMaps={BASE_MAPS}
+      >
+        <Cesium3DTileset
+          isZoomTo={true}
+          url="https://3d.ofek-air.com/3d/Jeru_Old_City_Cesium/ACT/Jeru_Old_City_Cesium_ACT.json"
+        />
+        <TerrainProviderSelector
+          terrainProviderList={terrainProviderListQmesh}
+        />
+        <TerrainianHeightTool />
+        <InspectorTool />
+      </CesiumMap>
+    </div>
+  );
+};
+QuantizedMeshHeightsTool.storyName = 'Heights Tool';

package/src/lib/cesium-map/terrain-providers/terrain-provider.stories.tsx

@@ -0,0 +1,185 @@
+import React, { ChangeEvent, useState } from 'react';
+import {
+  ArcGISTiledElevationTerrainProvider,
+  EllipsoidTerrainProvider,
+  TerrainProvider,
+  VRTheWorldTerrainProvider,
+  WebMercatorProjection,
+  CesiumTerrainProvider,
+  Resource,
+  WebMercatorTilingScheme,
+} from 'cesium';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { CesiumMap, useCesiumMap } from '../map';
+import { CesiumSceneMode } from '../map.types';
+import { Cesium3DTileset } from '../layers';
+import { LayerType } from '../layers-manager';
+import QuantizedMeshTerrainProvider from './custom/quantized-mesh-terrain-provider';
+
+export default {
+  title: 'Cesium Map/QuantizedMesh',
+  component: CesiumMap,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta;
+
+const mapDivStyle = {
+  height: '90%',
+  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 EllipsoidProvider = new EllipsoidTerrainProvider({});
+
+const CesiumProvider = new CesiumTerrainProvider({
+  url: new Resource({
+    url: 'https://my-assets.cesium.com/1',
+    headers: {
+      authorization: 'Bearer <my-access-token>',
+    },
+  }),
+});
+
+const VRTheWorldProvider = new VRTheWorldTerrainProvider({
+  url: 'http://www.vr-theworld.com/vr-theworld/tiles1.0.0/73/',
+});
+
+const ArcGisProvider = new ArcGISTiledElevationTerrainProvider({
+  url:
+    'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
+});
+
+const QuantizedMeshProvider = new QuantizedMeshTerrainProvider({
+  getUrl: (x: number, y: number, level: number): string => {
+    const tilingScheme = new WebMercatorTilingScheme();
+    const column = x;
+    const row = tilingScheme.getNumberOfYTilesAtLevel(level) - y - 1;
+
+    return `/mock/terrain_example_tiles/${level}/${column}/${row}.terrain`;
+  },
+  credit: `Mapcolonies`,
+});
+
+const terrainProviderList = [
+  {
+    id: 'NONE',
+    value: EllipsoidProvider,
+  },
+  {
+    id: 'Cesium Terrain Provider',
+    value: CesiumProvider,
+  },
+  {
+    id: 'V R The World Terrain Provider (Hight Map)',
+    value: VRTheWorldProvider,
+  },
+  {
+    id: 'Arc Gis Terrain Provider',
+    value: ArcGisProvider,
+  },
+  {
+    id: 'Custom Terrain Provider',
+    value: QuantizedMeshProvider,
+  },
+];
+
+interface ITerrainProviderItem {
+  id: string;
+  value: TerrainProvider | undefined;
+}
+
+interface ITerrainProviderSelectorProps {
+  terrainProviderList: ITerrainProviderItem[];
+}
+
+const TerrainProviderSelector: React.FC<ITerrainProviderSelectorProps> = ({
+  terrainProviderList,
+}) => {
+  const mapViewer = useCesiumMap();
+  const [depthTest, setDepthTest] = useState<boolean>(false);
+
+  const scene = mapViewer.scene;
+
+  const handleDepthTestChange = (e: ChangeEvent<HTMLInputElement>): void => {
+    setDepthTest(e.target.checked);
+    scene.globe.depthTestAgainstTerrain = !depthTest;
+  };
+
+  return (
+    <>
+      <select
+        defaultValue={terrainProviderList[0].id}
+        onChange={(evt): void => {
+          const selected = terrainProviderList.find(
+            (item) => item.id === evt.target.value
+          );
+          mapViewer.terrainProvider = (selected as ITerrainProviderItem)
+            .value as TerrainProvider;
+        }}
+      >
+        {terrainProviderList.map((provider) => {
+          return <option key={provider.id}>{provider.id}</option>;
+        })}
+      </select>
+      <br />
+      <input
+        type="checkbox"
+        id="input"
+        checked={depthTest}
+        onChange={handleDepthTestChange}
+      />
+      <label htmlFor="input">depthTestAgainstTerrain</label>
+    </>
+  );
+};
+
+export const QuantizedMeshProviders: Story = () => {
+  // const [center] = useState<[number, number]>([24, -200]);
+  const [center] = useState<[number, number]>([-122, 43]);
+  return (
+    <div style={mapDivStyle}>
+      <CesiumMap
+        center={center}
+        zoom={5}
+        imageryProvider={false}
+        sceneModes={[CesiumSceneMode.SCENE3D, CesiumSceneMode.COLUMBUS_VIEW]}
+        baseMaps={BASE_MAPS}
+        mapProjection={new WebMercatorProjection()}
+      >
+        <Cesium3DTileset
+          isZoomTo={true}
+          url="/mock/tileset_2/L16_31023/L16_31023.json"
+        />
+        <TerrainProviderSelector terrainProviderList={terrainProviderList} />
+      </CesiumMap>
+    </div>
+  );
+};
+QuantizedMeshProviders.storyName = 'Providers';

package/src/lib/cesium-map/tools/inspector.tool.tsx

@@ -0,0 +1,15 @@
+import React, { useEffect } from 'react';
+import { viewerCesiumInspectorMixin } from 'cesium';
+import { CesiumViewer, useCesiumMap } from '../map';
+
+export interface InspectorProps {}
+
+export const InspectorTool: React.FC<InspectorProps> = (props) => {
+  const mapViewer: CesiumViewer = useCesiumMap();
+
+  useEffect(() => {
+    mapViewer.extend(viewerCesiumInspectorMixin);
+  }, [mapViewer]);
+
+  return <></>;
+};