@reearth/core 0.0.1

package/src/engines/Cesium/cameraLimiter.ts

@@ -0,0 +1,256 @@
+import {
+  Cartesian3,
+  Cartographic,
+  Color,
+  EllipsoidGeodesic,
+  PolylineDashMaterialProperty,
+  Math,
+  Camera as CesiumCamera,
+  Rectangle,
+} from "cesium";
+import type { Viewer as CesiumViewer } from "cesium";
+import { useEffect, useMemo, useState, RefObject } from "react";
+import { CesiumComponentRef } from "resium";
+
+import type { SceneProperty } from "..";
+import { Camera } from "../../utils";
+
+import { getCamera } from "./common";
+
+const targetWidth = 1000000;
+const targetLength = 1000000;
+
+export function useCameraLimiter(
+  cesium: RefObject<CesiumComponentRef<CesiumViewer>>,
+  camera: Camera | undefined,
+  property: SceneProperty["cameraLimiter"] | undefined,
+) {
+  const geodesic = useMemo(() => {
+    const viewer = cesium.current?.cesiumElement;
+    if (
+      !viewer ||
+      viewer.isDestroyed() ||
+      !property?.cameraLimitterEnabled ||
+      !property.cameraLimitterTargetArea?.lng ||
+      !property.cameraLimitterTargetArea.lat
+    ) {
+      return undefined;
+    }
+
+    return getGeodesic(
+      viewer,
+      property.cameraLimitterTargetArea.lng,
+      property.cameraLimitterTargetArea.lat,
+    );
+  }, [
+    cesium,
+    property?.cameraLimitterEnabled,
+    property?.cameraLimitterTargetArea?.lng,
+    property?.cameraLimitterTargetArea?.lat,
+  ]);
+
+  // calculate inner limiter dimensions
+  const limiterDimensions = useMemo((): InnerLimiterDimensions | undefined => {
+    if (!geodesic) return undefined;
+
+    const width =
+      typeof property?.cameraLimitterTargetWidth === "number"
+        ? property.cameraLimitterTargetWidth
+        : targetWidth;
+    const length =
+      typeof property?.cameraLimitterTargetLength === "number"
+        ? property.cameraLimitterTargetLength
+        : targetLength;
+
+    const { cartesianArray, cartographicDimensions } = calcBoundaryBox(
+      geodesic,
+      length / 2,
+      width / 2,
+    );
+
+    return {
+      cartographicDimensions,
+      cartesianArray,
+    };
+  }, [property?.cameraLimitterTargetWidth, property?.cameraLimitterTargetLength, geodesic]);
+
+  // calculate maximum camera view (outer boundaries)
+  const [cameraViewOuterBoundaries, setCameraViewOuterBoundaries] = useState<
+    Cartesian3[] | undefined
+  >();
+
+  useEffect(() => {
+    const viewer = cesium.current?.cesiumElement;
+    if (!viewer || viewer.isDestroyed() || !property?.cameraLimitterTargetArea || !geodesic) return;
+
+    const camera = new CesiumCamera(viewer.scene);
+    camera.setView({
+      destination: Cartesian3.fromDegrees(
+        property.cameraLimitterTargetArea.lng,
+        property.cameraLimitterTargetArea.lat,
+        property.cameraLimitterTargetArea.height,
+      ),
+      orientation: {
+        heading: property?.cameraLimitterTargetArea.heading,
+        pitch: property?.cameraLimitterTargetArea.pitch,
+        roll: property?.cameraLimitterTargetArea.roll,
+        up: camera.up,
+      },
+    });
+
+    const computedViewRectangle = camera.computeViewRectangle();
+    if (!computedViewRectangle) return;
+    const rectangleHalfWidth = Rectangle.computeWidth(computedViewRectangle) * Math.PI * 1000000;
+    const rectangleHalfHeight = Rectangle.computeHeight(computedViewRectangle) * Math.PI * 1000000;
+
+    const {
+      cameraLimitterTargetWidth: width = targetWidth,
+      cameraLimitterTargetLength: length = targetLength,
+    } = property ?? {};
+
+    const { cartesianArray } = calcBoundaryBox(
+      geodesic,
+      length / 2 + rectangleHalfHeight,
+      width / 2 + rectangleHalfWidth,
+    );
+
+    setCameraViewOuterBoundaries(cartesianArray);
+  }, [cesium, property, geodesic]);
+
+  // Manage camera limiter conditions
+  useEffect(() => {
+    const viewer = cesium?.current?.cesiumElement;
+    const camera = getCamera(cesium?.current?.cesiumElement);
+    if (
+      !viewer ||
+      viewer.isDestroyed() ||
+      !camera ||
+      !property?.cameraLimitterEnabled ||
+      !limiterDimensions
+    )
+      return;
+    viewer.camera.setView({
+      destination: getAllowedCameraDestination(camera, limiterDimensions),
+      orientation: {
+        heading: viewer.camera.heading,
+        pitch: viewer.camera.pitch,
+        roll: viewer.camera.roll,
+        up: viewer.camera.up,
+      },
+    });
+  }, [camera, cesium, property, limiterDimensions]);
+
+  return {
+    cameraViewBoundaries: limiterDimensions?.cartesianArray,
+    cameraViewOuterBoundaries,
+    cameraViewBoundariesMaterial,
+  };
+}
+
+export const cameraViewBoundariesMaterial = new PolylineDashMaterialProperty({
+  color: Color.RED,
+});
+
+export type InnerLimiterDimensions = {
+  cartographicDimensions: {
+    rightDimension: Cartographic;
+    leftDimension: Cartographic;
+    topDimension: Cartographic;
+    bottomDimension: Cartographic;
+  };
+  cartesianArray: Cartesian3[];
+};
+
+export const getGeodesic = (
+  viewer: CesiumViewer,
+  lng: number,
+  lat: number,
+): { vertical: EllipsoidGeodesic; horizontal: EllipsoidGeodesic } | undefined => {
+  const ellipsoid = viewer.scene.globe.ellipsoid;
+
+  const centerPoint = Cartesian3.fromDegrees(lng, lat, 0);
+
+  const cartographicCenterPoint = Cartographic.fromCartesian(centerPoint);
+  const normal = ellipsoid.geodeticSurfaceNormal(centerPoint);
+  const east = Cartesian3.normalize(
+    Cartesian3.cross(Cartesian3.UNIT_Z, normal, new Cartesian3()),
+    new Cartesian3(),
+  );
+  const north = Cartesian3.normalize(
+    Cartesian3.cross(normal, east, new Cartesian3()),
+    new Cartesian3(),
+  );
+
+  const vertical = new EllipsoidGeodesic(
+    cartographicCenterPoint,
+    Cartographic.fromCartesian(north),
+    ellipsoid,
+  );
+  const horizontal = new EllipsoidGeodesic(
+    cartographicCenterPoint,
+    Cartographic.fromCartesian(east),
+    ellipsoid,
+  );
+  return { vertical, horizontal };
+};
+
+export const calcBoundaryBox = (
+  geodesic: { vertical: EllipsoidGeodesic; horizontal: EllipsoidGeodesic },
+  halfLength: number,
+  halfWidth: number,
+): {
+  cartographicDimensions: {
+    rightDimension: Cartographic;
+    leftDimension: Cartographic;
+    topDimension: Cartographic;
+    bottomDimension: Cartographic;
+  };
+  cartesianArray: Cartesian3[];
+} => {
+  const topDimension = geodesic.vertical.interpolateUsingSurfaceDistance(halfLength);
+  const bottomDimension = geodesic.vertical.interpolateUsingSurfaceDistance(-halfLength);
+  const rightDimension = geodesic.horizontal.interpolateUsingSurfaceDistance(halfWidth);
+  const leftDimension = geodesic.horizontal.interpolateUsingSurfaceDistance(-halfWidth);
+
+  const rightTop = new Cartographic(rightDimension.longitude, topDimension.latitude, 0);
+  const leftTop = new Cartographic(leftDimension.longitude, topDimension.latitude, 0);
+  const rightBottom = new Cartographic(rightDimension.longitude, bottomDimension.latitude, 0);
+  const leftBottom = new Cartographic(leftDimension.longitude, bottomDimension.latitude, 0);
+  return {
+    cartographicDimensions: {
+      rightDimension,
+      leftDimension,
+      topDimension,
+      bottomDimension,
+    },
+    cartesianArray: [
+      Cartographic.toCartesian(rightTop),
+      Cartographic.toCartesian(leftTop),
+      Cartographic.toCartesian(leftBottom),
+      Cartographic.toCartesian(rightBottom),
+      Cartographic.toCartesian(rightTop),
+    ],
+  };
+};
+
+export const getAllowedCameraDestination = (
+  camera: Camera,
+  limiterDimensions: InnerLimiterDimensions,
+): Cartesian3 => {
+  const cameraPosition = Cartographic.fromDegrees(camera?.lng, camera?.lat, camera?.height);
+
+  const destination = new Cartographic(
+    Math.clamp(
+      cameraPosition.longitude,
+      limiterDimensions.cartographicDimensions.leftDimension.longitude,
+      limiterDimensions.cartographicDimensions.rightDimension.longitude,
+    ),
+    Math.clamp(
+      cameraPosition.latitude,
+      limiterDimensions.cartographicDimensions.bottomDimension.latitude,
+      limiterDimensions.cartographicDimensions.topDimension.latitude,
+    ),
+    cameraPosition.height,
+  );
+  return Cartographic.toCartesian(destination);
+};

package/src/engines/Cesium/common.test.ts

@@ -0,0 +1,38 @@
+import { Entity, JulianDate } from "cesium";
+import { expect, test } from "vitest";
+
+import { attachTag, isColor } from "./common";
+
+test("attachTag", () => {
+  const entity = new Entity();
+  const time = new JulianDate();
+
+  expect(entity.properties?.hasProperty("tag_a")).toBe(undefined);
+
+  attachTag(entity, "tag_a", "value_a");
+  expect(entity.properties?.hasProperty("tag_a")).toBe(true);
+  expect(entity.properties?.hasProperty("tag_b")).toBe(false);
+  const result1 = entity.properties?.getValue(time);
+  expect(result1["tag_a"]).toBe("value_a");
+
+  attachTag(entity, "tag_b", "value_b");
+  expect(entity.properties?.hasProperty("tag_b")).toBe(true);
+  const result2 = entity.properties?.getValue(time);
+  expect(result2["tag_b"]).toBe("value_b");
+
+  attachTag(entity, "tag_a", "value_a2");
+  expect(entity.properties?.hasProperty("tag_a")).toBe(true);
+  const result3 = entity.properties?.getValue(time);
+  expect(result3["tag_a"]).toBe("value_a2");
+
+  attachTag(entity, "tag_a", undefined);
+  expect(entity.properties?.hasProperty("tag_a")).toBe(false);
+});
+
+test("isColor", () => {
+  expect(isColor("#0f0f0f")).toBeTruthy();
+  expect(isColor("#0f0")).toBeTruthy();
+  expect(isColor("abc")).toBeFalsy();
+  expect(isColor("rgb(0, 0, 0)")).toBeTruthy();
+  expect(isColor("rgba(0, 0, 0, 0.5)")).toBeTruthy();
+});