@map-colonies/react-components 3.15.1 → 4.0.1

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

@@ -1,237 +0,0 @@
-/* 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

@@ -1,170 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import React, { useState } from 'react';
-import {
-  ArcGISTiledElevationTerrainProvider,
-  EllipsoidTerrainProvider,
-  // CesiumTerrainProvider,
-  // Resource,
-  TerrainProvider,
-} from 'cesium';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { CesiumMap, CesiumViewer, useCesiumMap } from '../map';
-import { CesiumSceneMode } from '../map.types';
-import { InspectorTool } from '../tools/inspector.tool';
-import { TerrainianHeightTool } from '../tools/terranian-height.tool';
-import { Cesium3DTileset } from '../layers';
-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({});
-
-//#region TILER MATERIALS
-// const TTCesiumProviderSrtm30 = new CesiumTerrainProvider({
-//   url: new Resource({
-//     url: 'http://localhost:8002/srtm30',
-//   }),
-// });
-// const TTCesiumProviderSrtm100 = new CesiumTerrainProvider({
-//   url: new Resource({
-//     url: 'http://localhost:8002/srtm100',
-//   }),
-// });
-// const TTCesiumProviderMergedDescending = new CesiumTerrainProvider({
-//   url: new Resource({
-//     url: 'http://localhost:8002/mergedDescending',
-//   }),
-// });
-//#endregion
-
-//#region CTBD MATERIALS
-// const CTBDCesiumProviderSrtm30 = new CesiumTerrainProvider({
-//   url: new Resource({
-//     url: 'http://localhost:3000/srtm30',
-//   }),
-// });
-// const CTBDCesiumProviderSrtm100 = new CesiumTerrainProvider({
-//   url: new Resource({
-//     url: 'http://localhost:3000/srtm100',
-//   }),
-// });
-// const CTBDCesiumProviderMergedAscending = new CesiumTerrainProvider({
-//   url: new Resource({
-//     url: 'http://localhost:3000/mergedAscending',
-//   }),
-// });
-//#endregion
-
-const ArcGisProvider = new ArcGISTiledElevationTerrainProvider({
-  url:
-    'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
-});
-
-const terrainProviderListQmesh = [
-  {
-    id: 'NONE',
-    value: EllipsoidProvider,
-  },
-  {
-    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: CesiumViewer = 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]>([34.817, 31.911]);
-  return (
-    <div style={mapDivStyle}>
-      <CesiumMap
-        center={center}
-        zoom={5}
-        imageryProvider={false}
-        sceneModes={[CesiumSceneMode.SCENE3D, CesiumSceneMode.COLUMBUS_VIEW]}
-        baseMaps={BASE_MAPS}
-      >
-        <Cesium3DTileset
-          url="https://3d.ofek-air.com/3d/Jeru_Old_City_Cesium/ACT/Jeru_Old_City_Cesium_ACT.json"
-          isZoomTo={true}
-        />
-        <TerrainProviderSelector
-          terrainProviderList={terrainProviderListQmesh}
-        />
-        <TerrainianHeightTool />
-        <InspectorTool />
-      </CesiumMap>
-    </div>
-  );
-};
-QuantizedMeshHeightsTool.storyName = 'Heights Tool';

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

@@ -1,187 +0,0 @@
-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 { InspectorTool } from '../tools/inspector.tool';
-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 [depthTest, setDepthTest] = useState<boolean>(false);
-  const mapViewer = useCesiumMap();
-
-  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} />
-        <InspectorTool />
-      </CesiumMap>
-    </div>
-  );
-};
-QuantizedMeshProviders.storyName = 'Providers';

package/src/lib/cesium-map/tools/cesium/primitives-conversions.cesium.ts

@@ -1,15 +0,0 @@
-import { Rectangle, Cartesian3 } from 'cesium';
-import * as turf from '@turf/helpers';
-import bbox from '@turf/bbox';
-import bboxPolygon from '@turf/bbox-polygon';
-
-export const rectangleToPositions = (positions: Rectangle): Cartesian3[] => {
-  const line = turf.lineString([
-    [positions.west, positions.south],
-    [positions.east, positions.north],
-  ]);
-  const polygon = bboxPolygon(bbox(line));
-  return polygon.geometry.coordinates[0].map(
-    (coord) => Cartesian3.fromRadiansArray(coord)[0]
-  );
-};

package/src/lib/cesium-map/tools/coordinates-tracker.tool.css

@@ -1,11 +0,0 @@
-.trackerPosition {
-  background-color: var(--mdc-theme-surface);
-  z-index: 2000;
-  padding: 2px 2px;
-  border-radius: 2px;
-  font-size: 12px;
-  height: 24px;
-  text-align: center;
-  line-height: 20px;
-  white-space: nowrap;
-}

package/src/lib/cesium-map/tools/coordinates-tracker.tool.tsx

@@ -1,85 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import {
-  Cartesian3,
-  Math as CesiumMath,
-  WebMercatorProjection,
-  ScreenSpaceEventType,
-} from 'cesium';
-import { CesiumViewer, useCesiumMap } from '../map';
-
-import './coordinates-tracker.tool.css';
-import {
-  Proj,
-  COORDINATES_WGS_FRACTION_DIGITS,
-  COORDINATES_MERCATOR_FRACTION_DIGITS,
-} from '../../utils/projections';
-
-export interface RCoordinatesTrackerToolProps {
-  projection?: Proj;
-}
-
-export const CoordinatesTrackerTool: React.FC<RCoordinatesTrackerToolProps> = (
-  props
-) => {
-  const mapViewer: CesiumViewer = useCesiumMap();
-  const ref = useRef<HTMLDivElement>(null);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-
-  useEffect(() => {
-    mapViewer.screenSpaceEventHandler.setInputAction(
-      (evt?: Record<string, unknown>) => {
-        if (evt?.endPosition) {
-          setPosition({ ...(evt.endPosition as { x: number; y: number }) } as {
-            x: number;
-            y: number;
-          });
-        }
-      },
-      ScreenSpaceEventType.MOUSE_MOVE
-    );
-  }, [ref, mapViewer]);
-
-  useEffect(() => {
-    const ellipsoid = mapViewer.scene.globe.ellipsoid;
-    // Mouse over the globe to see the cartographic position
-    const cartesian = mapViewer.camera.pickEllipsoid(
-      new Cartesian3(position.x, position.y),
-      ellipsoid
-    );
-
-    if (cartesian) {
-      const cartographic = ellipsoid.cartesianToCartographic(cartesian);
-      if (ref.current) {
-        let coordinatesText = '';
-        switch (props.projection) {
-          case Proj.WEB_MERCATOR: {
-            const wmProjection = new WebMercatorProjection(ellipsoid);
-            const res = wmProjection.project(cartographic);
-            coordinatesText = `Mercator: ${res.y.toFixed(
-              COORDINATES_MERCATOR_FRACTION_DIGITS
-            )}m, ${res.x.toFixed(COORDINATES_MERCATOR_FRACTION_DIGITS)}m`;
-            ref.current.style.width = '220px';
-            break;
-          }
-          case Proj.WGS84: {
-            const longitudeString = CesiumMath.toDegrees(
-              cartographic.longitude
-            ).toFixed(COORDINATES_WGS_FRACTION_DIGITS);
-            const latitudeString = CesiumMath.toDegrees(
-              cartographic.latitude
-            ).toFixed(COORDINATES_WGS_FRACTION_DIGITS);
-
-            coordinatesText = `WGS84: ${latitudeString}°N ${longitudeString}°E`;
-            ref.current.style.width = '200px';
-            break;
-          }
-          default:
-            break;
-        }
-        ref.current.innerHTML = coordinatesText;
-      }
-    }
-  }, [position, ref, mapViewer, props.projection]);
-
-  return <div className="trackerPosition" ref={ref}></div>;
-};