@reearth/core 0.0.1

package/src/engines/Cesium/Sketch/SurfaceMeasurement.tsx

@@ -0,0 +1,80 @@
+import {
+  CallbackProperty,
+  Cartesian3,
+  ClassificationType,
+  PolylineDashMaterialProperty,
+  type Color,
+  type PositionProperty,
+} from "@cesium/engine";
+import { useMemo, useRef, type FC } from "react";
+
+import { useConstant } from "../../../utils";
+import { useContext } from "../Feature/context";
+
+import { Entity, type EntityProps } from "./Entity";
+import { MeasurementText } from "./MeasurementText";
+import ScreenSpaceElement from "./ScreenSpaceElement";
+
+const MeasurementLine: FC<{
+  a: Cartesian3;
+  b: Cartesian3;
+  color?: Color;
+}> = ({ a, b, color }) => {
+  const controlPointsRef = useRef([a, b]);
+  controlPointsRef.current = [a, b];
+  const positionsProperty = useConstant(
+    () =>
+      new CallbackProperty(() => controlPointsRef.current, false) as unknown as PositionProperty,
+  );
+
+  const options = useMemo(
+    (): EntityProps => ({
+      polyline: {
+        positions: positionsProperty,
+        width: 1.5,
+        material: new PolylineDashMaterialProperty({
+          color,
+          dashLength: 8,
+        }),
+        classificationType: ClassificationType.TERRAIN,
+        clampToGround: true,
+      },
+    }),
+    [color, positionsProperty],
+  );
+
+  const { requestRender } = useContext();
+  requestRender?.();
+
+  return <Entity {...options} />;
+};
+
+export interface SurfaceMeasurementProps {
+  a: Cartesian3;
+  b: Cartesian3;
+  color?: Color;
+  showLine?: boolean;
+}
+
+export const SurfaceMeasurement: FC<SurfaceMeasurementProps> = ({
+  a,
+  b,
+  color,
+  showLine = false,
+}) => {
+  const position = useConstant(() => new Cartesian3());
+
+  const { getSurfaceDistance } = useContext();
+  const distance = getSurfaceDistance?.(a, b);
+
+  return distance !== undefined ? (
+    <>
+      <ScreenSpaceElement position={Cartesian3.midpoint(a, b, position)}>
+        <MeasurementText>
+          {distance < 1000 ? `${distance.toFixed(1)} m` : `${(distance / 1000).toFixed(1)} km`}
+        </MeasurementText>
+      </ScreenSpaceElement>
+      {showLine && <MeasurementLine a={a} b={b} color={color} />}
+    </>
+  ) : null;
+};

package/src/engines/Cesium/Sketch/createGeometry.ts

@@ -0,0 +1,224 @@
+import { Cartesian3, Cartographic, Math as CesiumMath, type Ellipsoid } from "@cesium/engine";
+import ellipse from "@turf/ellipse";
+import { lineString, polygon, point } from "@turf/helpers";
+import { type LineString, type MultiPolygon, type Polygon, type Point } from "geojson";
+
+import { type SketchType } from "../../../Map/Sketch/types";
+
+const cartographicScratch = new Cartographic();
+const cartesianScratch1 = new Cartesian3();
+const cartesianScratch2 = new Cartesian3();
+
+function createPoint(
+  controlPoints: readonly Cartesian3[],
+  ellipsoid?: Ellipsoid,
+): Point | undefined {
+  if (controlPoints.length !== 1) {
+    return;
+  }
+  try {
+    const cartographic = Cartographic.fromCartesian(
+      controlPoints[0],
+      ellipsoid,
+      cartographicScratch,
+    );
+    const feature = point([
+      CesiumMath.toDegrees(cartographic.longitude),
+      CesiumMath.toDegrees(cartographic.latitude),
+    ]);
+    return feature.geometry;
+  } catch (error) {
+    console.error(error);
+  }
+  return;
+}
+
+function createCircle(
+  controlPoints: readonly Cartesian3[],
+  ellipsoid?: Ellipsoid,
+): Polygon | undefined {
+  if (controlPoints.length !== 2) {
+    return;
+  }
+  const radius = Cartesian3.distance(controlPoints[0], controlPoints[1]);
+  if (radius === 0) {
+    return;
+  }
+  try {
+    const cartographic = Cartographic.fromCartesian(
+      controlPoints[0],
+      ellipsoid,
+      cartographicScratch,
+    );
+    const feature = ellipse(
+      [CesiumMath.toDegrees(cartographic.longitude), CesiumMath.toDegrees(cartographic.latitude)],
+      radius,
+      radius,
+      { units: "meters" },
+    );
+    return feature.geometry;
+  } catch (error) {
+    console.error(error);
+  }
+  return;
+}
+
+function createRectangle(
+  controlPoints: readonly Cartesian3[],
+  ellipsoid?: Ellipsoid,
+): LineString | Polygon | undefined {
+  if (controlPoints.length !== 2 && controlPoints.length !== 3) {
+    return;
+  }
+  try {
+    if (controlPoints.length === 2) {
+      const feature = lineString(
+        controlPoints.map(controlPoint => {
+          const cartographic = Cartographic.fromCartesian(
+            controlPoint,
+            ellipsoid,
+            cartographicScratch,
+          );
+          return [
+            CesiumMath.toDegrees(cartographic.longitude),
+            CesiumMath.toDegrees(cartographic.latitude),
+          ];
+        }),
+      );
+      return feature.geometry;
+    }
+
+    // Rectangle from 3 points.
+    const [p1, p2, p3] = controlPoints;
+    const projection = Cartesian3.projectVector(
+      Cartesian3.subtract(p3, p1, cartesianScratch1),
+      Cartesian3.subtract(p2, p1, cartesianScratch2),
+      cartesianScratch1,
+    );
+    const offset = Cartesian3.subtract(
+      p3,
+      Cartesian3.add(p1, projection, cartesianScratch1),
+      cartesianScratch2,
+    );
+    const p4 = Cartesian3.add(p1, offset, cartesianScratch1);
+    const p5 = Cartesian3.add(p2, offset, cartesianScratch2);
+    const feature = polygon([
+      [p1, p2, p5, p4, p1].map(controlPoint => {
+        const cartographic = Cartographic.fromCartesian(
+          controlPoint,
+          ellipsoid,
+          cartographicScratch,
+        );
+        return [
+          CesiumMath.toDegrees(cartographic.longitude),
+          CesiumMath.toDegrees(cartographic.latitude),
+        ];
+      }),
+    ]);
+    return feature.geometry;
+  } catch (error) {
+    console.error(error);
+  }
+  return;
+}
+
+function createPolyline(
+  controlPoints: readonly Cartesian3[],
+  ellipsoid?: Ellipsoid,
+): LineString | undefined {
+  if (controlPoints.length < 2) {
+    return;
+  }
+  try {
+    const feature = lineString(
+      controlPoints.map(controlPoint => {
+        const cartographic = Cartographic.fromCartesian(
+          controlPoint,
+          ellipsoid,
+          cartographicScratch,
+        );
+        return [
+          CesiumMath.toDegrees(cartographic.longitude),
+          CesiumMath.toDegrees(cartographic.latitude),
+        ];
+      }),
+    );
+    return feature.geometry;
+  } catch (error) {
+    console.error(error);
+  }
+  return;
+}
+
+function createPolygon(
+  controlPoints: readonly Cartesian3[],
+  ellipsoid?: Ellipsoid,
+): LineString | Polygon | undefined {
+  if (controlPoints.length < 2) {
+    return;
+  }
+  try {
+    if (controlPoints.length === 2) {
+      const feature = lineString(
+        controlPoints.map(controlPoint => {
+          const cartographic = Cartographic.fromCartesian(
+            controlPoint,
+            ellipsoid,
+            cartographicScratch,
+          );
+          return [
+            CesiumMath.toDegrees(cartographic.longitude),
+            CesiumMath.toDegrees(cartographic.latitude),
+          ];
+        }),
+      );
+      return feature.geometry;
+    }
+
+    const feature = polygon([
+      [...controlPoints, controlPoints[0]].map(controlPoint => {
+        const cartographic = Cartographic.fromCartesian(
+          controlPoint,
+          ellipsoid,
+          cartographicScratch,
+        );
+        return [
+          CesiumMath.toDegrees(cartographic.longitude),
+          CesiumMath.toDegrees(cartographic.latitude),
+        ];
+      }),
+    ]);
+    return feature.geometry;
+  } catch (error) {
+    console.error(error);
+  }
+  return;
+}
+
+export interface GeometryOptions {
+  type: SketchType;
+  controlPoints: readonly Cartesian3[];
+}
+
+export function createGeometry({
+  type,
+  controlPoints,
+}: GeometryOptions): LineString | Polygon | MultiPolygon | Point | undefined {
+  switch (type) {
+    case "marker":
+      return createPoint(controlPoints);
+    case "polyline":
+      return createPolyline(controlPoints);
+    case "circle":
+    case "extrudedCircle":
+      return createCircle(controlPoints);
+    case "rectangle":
+    case "extrudedRectangle":
+      return createRectangle(controlPoints);
+    case "polygon":
+    case "extrudedPolygon":
+      return createPolygon(controlPoints);
+    default:
+      return;
+  }
+}

package/src/engines/Cesium/Sketch/index.tsx

@@ -0,0 +1,119 @@
+// Reference: Sketch feature is basically referenced from https://github.com/takram-design-engineering/plateau-view/blob/main/libs/sketch/src/DynamicSketchObject.tsx
+
+import { Color } from "@cesium/engine";
+import { Cartesian3 } from "cesium";
+import { type LineString, type MultiPolygon, type Polygon } from "geojson";
+import { memo, useMemo, type FC } from "react";
+import { type RequireExactlyOne } from "type-fest";
+
+import { SketchType } from "../../../Map/Sketch/types";
+import { Position3d } from "../../../types";
+import { convertGeometryToPositionsArray, convertPolygonToHierarchyArray } from "../utils/polygon";
+
+import { createGeometry, GeometryOptions } from "./createGeometry";
+import ExtrudedControlPoints from "./ExtrudedControlPoints";
+import { ExtrudedPolygonEntity } from "./ExtrudedPolygonEntity";
+import { PolygonEntity } from "./PolygonEntity";
+import { PolylineEntity } from "./PolylineEntity";
+import SurfaceControlPoints from "./SurfaceControlPoints";
+
+export type SketchComponentProps = RequireExactlyOne<
+  {
+    geometry?: LineString | Polygon | MultiPolygon | null;
+    geometryOptions?: {
+      type: SketchType;
+      controlPoints: readonly Position3d[];
+    } | null;
+    extrudedHeight?: number;
+    disableShadow?: boolean;
+    color?: string;
+    enableRelativeHeight?: boolean;
+  },
+  "geometry" | "geometryOptions"
+>;
+
+const DEFAULT_SKETCH_COLOR = "#00bebe";
+
+const SketchComponent: FC<SketchComponentProps> = memo(
+  ({
+    geometry,
+    geometryOptions,
+    extrudedHeight,
+    disableShadow,
+    color: stringColor,
+    enableRelativeHeight,
+  }) => {
+    const cartesianGeometryOptions: GeometryOptions | null = useMemo(
+      () =>
+        geometryOptions
+          ? {
+              ...geometryOptions,
+              controlPoints: geometryOptions?.controlPoints.map(p => new Cartesian3(...p)),
+            }
+          : null,
+      [geometryOptions],
+    );
+
+    const g = useMemo(
+      () =>
+        geometry ?? (cartesianGeometryOptions ? createGeometry(cartesianGeometryOptions) : null),
+      [geometry, cartesianGeometryOptions],
+    );
+
+    const { positionsArray, hierarchyArray } = useMemo(() => {
+      if (g?.type === "Point") {
+        return {};
+      } else if (g?.type === "LineString") {
+        return { positionsArray: convertGeometryToPositionsArray(g) };
+      } else if (g != null) {
+        return {
+          positionsArray: convertGeometryToPositionsArray(g),
+          hierarchyArray: convertPolygonToHierarchyArray(g),
+        };
+      }
+      return {};
+    }, [g]);
+
+    const color = useMemo(
+      () => Color.fromCssColorString(stringColor ?? DEFAULT_SKETCH_COLOR),
+      [stringColor],
+    );
+
+    return (
+      <>
+        {positionsArray?.map((positions, index) => (
+          <PolylineEntity key={index} dynamic positions={positions} color={color} />
+        ))}
+        {hierarchyArray?.map((hierarchy, index) => (
+          <PolygonEntity key={index} dynamic hierarchy={hierarchy} color={color} />
+        ))}
+        {cartesianGeometryOptions != null && extrudedHeight == null && (
+          <SurfaceControlPoints geometryOptions={cartesianGeometryOptions} color={color} />
+        )}
+        {cartesianGeometryOptions != null && extrudedHeight != null && (
+          <ExtrudedControlPoints
+            geometryOptions={cartesianGeometryOptions}
+            extrudedHeight={extrudedHeight}
+            color={color}
+          />
+        )}
+        {extrudedHeight != null &&
+          hierarchyArray?.map((hierarchy, index) => (
+            <ExtrudedPolygonEntity
+              key={index}
+              dynamic
+              hierarchy={hierarchy}
+              extrudedHeight={extrudedHeight}
+              disableShadow={disableShadow}
+              color={color}
+              enableRelativeHeight={enableRelativeHeight}
+            />
+          ))}
+      </>
+    );
+  },
+);
+
+SketchComponent.displayName = "SketchComponent";
+
+export default SketchComponent;

package/src/engines/Cesium/Sketch/utils.ts

@@ -0,0 +1,27 @@
+import { type Scene } from "@cesium/engine";
+import { type ForwardedRef } from "react";
+
+export function requestRenderInNextFrame(scene: Scene): void {
+  const removeListener = scene.preRender.addEventListener(() => {
+    scene.requestRender();
+    removeListener();
+  });
+}
+
+export function assignForwardedRef<T>(
+  forwardedRef: ForwardedRef<T> | undefined,
+  value: T | null,
+): (() => void) | undefined {
+  if (typeof forwardedRef === "function") {
+    forwardedRef(value);
+    return () => {
+      forwardedRef(null);
+    };
+  } else if (forwardedRef != null) {
+    forwardedRef.current = value;
+    return () => {
+      forwardedRef.current = null;
+    };
+  }
+  return;
+}

package/src/engines/Cesium/VertexTerrainElevationMaterial.ts

@@ -0,0 +1,33 @@
+import { Ellipsoid, Material } from "cesium";
+
+import { createColorMapImage } from "./Feature/HeatMap/colorMap";
+import { turboColorMap } from "./Feature/HeatMap/constants";
+import { JapanSeaLevelEllipsoid } from "./JapanSeaLevelEllipsoid";
+import source from "./vertexTerrainElevationMaterial.glsl?raw";
+
+export class VertexTerrainElevationMaterial extends Material {
+  constructor() {
+    super({
+      fabric: {
+        type: "VertexTerrainElevation",
+        uniforms: {
+          colorMap: createColorMapImage(turboColorMap),
+          minHeight: 0,
+          maxHeight: 1000,
+          logarithmic: false,
+          // The height of czm_materialInput appears to be in WGS84 even when we
+          // provide another ellipsoid in the constructor options of Globe.
+          heightDatum:
+            Math.min(Ellipsoid.WGS84.radii.x, Ellipsoid.WGS84.radii.y, Ellipsoid.WGS84.radii.z) -
+            Math.min(
+              JapanSeaLevelEllipsoid.radii.x,
+              JapanSeaLevelEllipsoid.radii.y,
+              JapanSeaLevelEllipsoid.radii.z,
+            ),
+        },
+        source,
+      },
+      translucent: false,
+    });
+  }
+}