@map-colonies/react-components 3.12.2 → 3.13.0

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

@@ -1,187 +1,187 @@
-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';
+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 +1,15 @@
-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]
-  );
-};
+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 +1,11 @@
-.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;
-}
+.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,79 +1,81 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Cartesian3, Math as CesiumMath, WebMercatorProjection } 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(() => {
-    const setFromEvent = (e: MouseEvent): void =>
-      setPosition({ x: e.clientX, y: e.clientY });
-    mapViewer.scene.canvas.addEventListener('mousemove', setFromEvent);
-
-    return (): void => {
-      try {
-        mapViewer.scene.canvas.removeEventListener('mousemove', setFromEvent);
-      } catch (e) {
-        console.log('CESIUM canvas "mousemove" remove listener failed', e);
-      }
-    };
-  }, [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>;
-};
+import React, { useEffect, useRef, useState } from 'react';
+import { Cartesian3, Math as CesiumMath, WebMercatorProjection } from 'cesium';
+import ScreenSpaceEventType from 'cesium/Source/Core/ScreenSpaceEventType';
+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>;
+};