@reearth/core 0.0.1

package/src/engines/Cesium/Feature/Raster/index.stories.tsx

@@ -0,0 +1,77 @@
+import { Meta, StoryFn } from "@storybook/react";
+
+import { engine } from "../..";
+import { Map, Props } from "../../../../Map";
+
+export default {
+  component: Map,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: StoryFn<Props> = args => <Map {...args} />;
+
+export const WMS = Template.bind([]);
+WMS.args = {
+  engine: "cesium",
+  engines: {
+    cesium: engine,
+  },
+  ready: true,
+  layers: [
+    {
+      id: "l",
+      type: "simple",
+      data: {
+        type: "wms",
+        url: "https://gibs.earthdata.nasa.gov/wms/epsg3857/best/wms.cgi",
+        layers: "IMERG_Precipitation_Rate",
+      },
+      raster: {
+        maximumLevel: 100,
+      },
+    },
+  ],
+  property: {
+    tiles: [
+      {
+        id: "default",
+        tile_type: "default",
+      },
+    ],
+  },
+};
+
+export const MVT = Template.bind([]);
+MVT.args = {
+  engine: "cesium",
+  engines: {
+    cesium: engine,
+  },
+  ready: true,
+  layers: [
+    {
+      id: "l",
+      type: "simple",
+      data: {
+        type: "mvt",
+        url: "https://example.com/exmaple.mvt", // You need to set MVT URL.
+        layers: "road",
+      },
+      polygon: {
+        fillColor: "white",
+        strokeColor: "white",
+        strokeWidth: 1,
+        lineJoin: "round",
+      },
+      raster: {},
+    },
+  ],
+  property: {
+    tiles: [
+      {
+        id: "default",
+        tile_type: "default",
+      },
+    ],
+  },
+};

package/src/engines/Cesium/Feature/Raster/index.tsx

@@ -0,0 +1,37 @@
+import { isEqual } from "lodash-es";
+import { memo } from "react";
+
+import { extractSimpleLayer, extractSimpleLayerData, type FeatureComponentConfig } from "../utils";
+
+import { useMVT } from "./mvt";
+import { useTiles } from "./tiles";
+import { useTMS } from "./tms";
+import type { Props } from "./types";
+import { useWMS } from "./wms";
+
+function Raster({ isVisible, layer, property }: Props) {
+  useWMS({ isVisible, layer, property });
+  useTiles({ isVisible, layer, property });
+  useTMS({ isVisible, layer, property });
+  useMVT({ isVisible, layer, property });
+
+  return null;
+}
+
+export default memo(
+  Raster,
+  (prev, next) =>
+    // In Raster component, we only use polygon, polyline and marker, so we only check polygon in layer props.
+    isEqual(extractSimpleLayer(prev.layer)?.polygon, extractSimpleLayer(next.layer)?.polygon) &&
+    isEqual(extractSimpleLayer(prev.layer)?.polyline, extractSimpleLayer(next.layer)?.polyline) &&
+    isEqual(extractSimpleLayer(prev.layer)?.marker, extractSimpleLayer(next.layer)?.marker) &&
+    isEqual(extractSimpleLayerData(prev.layer), extractSimpleLayerData(next.layer)) &&
+    isEqual(prev.property, next.property) &&
+    prev.isVisible === next.isVisible &&
+    prev.evalFeature === next.evalFeature &&
+    prev.onComputedFeatureFetch === next.onComputedFeatureFetch,
+);
+
+export const config: FeatureComponentConfig = {
+  noFeature: true,
+};

package/src/engines/Cesium/Feature/Raster/mvt.ts

@@ -0,0 +1,33 @@
+import { MVTImageryProvider } from "@reearth/cesium-mvt-imagery-provider";
+import { useMemo } from "react";
+
+import { extractSimpleLayer } from "../utils";
+
+import { useData, useImageryProvider } from "./hooks";
+import type { Props } from "./types";
+import { normalizeUrl } from "./utils";
+
+export const useMVT = ({
+  isVisible,
+  property,
+  layer,
+}: Pick<Props, "isVisible" | "property" | "layer">) => {
+  const { show = true, minimumLevel, maximumLevel, credit } = property ?? {};
+  const { type, url, layers } = useData(layer);
+
+  const currentLayer = extractSimpleLayer(layer) || undefined;
+  const imageryProvider = useMemo(() => {
+    if (!isVisible || !show || !url || !layers || type !== "mvt") return;
+    return new MVTImageryProvider({
+      minimumLevel,
+      maximumLevel,
+      credit,
+      urlTemplate: normalizeUrl(url, "mvt") as `http${"s" | ""}://${string}/{z}/{x}/{y}${string}`,
+      layerName: layers,
+      layer: currentLayer,
+      worker: true,
+    });
+  }, [isVisible, show, url, layers, type, minimumLevel, maximumLevel, credit, currentLayer]);
+
+  useImageryProvider(imageryProvider, layer?.id, property);
+};

package/src/engines/Cesium/Feature/Raster/tiles.ts

@@ -0,0 +1,27 @@
+import { UrlTemplateImageryProvider } from "cesium";
+import { useMemo } from "react";
+
+import { useData, useImageryProvider } from "./hooks";
+import type { Props } from "./types";
+import { normalizeUrl } from "./utils";
+
+export const useTiles = ({
+  isVisible,
+  property,
+  layer,
+}: Pick<Props, "isVisible" | "property" | "layer">) => {
+  const { show = true, minimumLevel, maximumLevel, credit } = property ?? {};
+  const { type, url } = useData(layer);
+
+  const imageryProvider = useMemo(() => {
+    if (!isVisible || !show || !url || type !== "tiles") return;
+    return new UrlTemplateImageryProvider({
+      url: normalizeUrl(url, "png"),
+      minimumLevel,
+      maximumLevel,
+      credit,
+    });
+  }, [isVisible, show, url, type, minimumLevel, maximumLevel, credit]);
+
+  useImageryProvider(imageryProvider, layer?.id, property);
+};

package/src/engines/Cesium/Feature/Raster/tms.ts

@@ -0,0 +1,31 @@
+import { TileMapServiceImageryProvider } from "cesium";
+import { useEffect, useState } from "react";
+
+import { useData, useImageryProvider } from "./hooks";
+import type { Props } from "./types";
+
+export const useTMS = ({
+  isVisible,
+  property,
+  layer,
+}: Pick<Props, "isVisible" | "property" | "layer">) => {
+  const { show = true, minimumLevel, maximumLevel, credit } = property ?? {};
+  const { type, url } = useData(layer);
+  const [imageryProvider, setImageryProvider] = useState<TileMapServiceImageryProvider>();
+
+  useEffect(() => {
+    if (!isVisible || !show || !url || type !== "tms") return;
+    const create = async () => {
+      setImageryProvider(
+        await TileMapServiceImageryProvider.fromUrl(url, {
+          minimumLevel,
+          maximumLevel,
+          credit,
+        }),
+      );
+    };
+    create();
+  }, [isVisible, show, url, type, minimumLevel, maximumLevel, credit]);
+
+  useImageryProvider(imageryProvider, layer?.id, property);
+};

package/src/engines/Cesium/Feature/Raster/types.ts

@@ -0,0 +1,5 @@
+import { RasterAppearance } from "../../../../mantle";
+import { FeatureProps } from "../utils";
+
+export type Props = FeatureProps<Property>;
+export type Property = RasterAppearance;

package/src/engines/Cesium/Feature/Raster/utils.test.ts

@@ -0,0 +1,14 @@
+import { expect, test } from "vitest";
+
+import { normalizeUrl } from "./utils";
+
+test("normalizeUrl", () => {
+  expect(normalizeUrl("https://aaaa", "png")).toBe("https://aaaa/{z}/{x}/{y}.png");
+  expect(normalizeUrl("https://aaaa/bbbb/", "png")).toBe("https://aaaa/bbbb/{z}/{x}/{y}.png");
+  expect(normalizeUrl("https://aaaa/bbbb/{z}/{x}/{y}.png", "png")).toBe(
+    "https://aaaa/bbbb/{z}/{x}/{y}.png",
+  );
+  expect(normalizeUrl("https://aaaa/bbbb/%7Bz%7D/%7Bx%7D/%7By%7D.png", "png")).toBe(
+    "https://aaaa/bbbb/{z}/{x}/{y}.png",
+  );
+});

package/src/engines/Cesium/Feature/Raster/utils.ts

@@ -0,0 +1,10 @@
+export function normalizeUrl(url: string, ext: string): string {
+  if (!url) return "";
+  let u = url.replace("/%7Bz%7D", "/{z}").replace("/%7Bx%7D", "/{x}").replace("/%7By%7D", "/{y}");
+  if (!u.includes("/{z}/{x}/{y}.")) {
+    if (u[u.length - 1] !== "/") u += "/";
+    u += "{z}/{x}/{y}." + ext;
+  }
+
+  return u;
+}

package/src/engines/Cesium/Feature/Raster/wms.ts

@@ -0,0 +1,28 @@
+import { WebMapServiceImageryProvider } from "cesium";
+import { useMemo } from "react";
+
+import { useData, useImageryProvider } from "./hooks";
+import type { Props } from "./types";
+
+export const useWMS = ({
+  isVisible,
+  property,
+  layer,
+}: Pick<Props, "isVisible" | "property" | "layer">) => {
+  const { show = true, minimumLevel, maximumLevel, credit } = property ?? {};
+  const { type, url, layers, parameters } = useData(layer);
+
+  const imageryProvider = useMemo(() => {
+    if (!isVisible || !show || !url || !layers || type !== "wms") return;
+    return new WebMapServiceImageryProvider({
+      url,
+      layers,
+      minimumLevel,
+      maximumLevel,
+      credit,
+      parameters,
+    });
+  }, [isVisible, show, url, layers, type, minimumLevel, maximumLevel, credit, parameters]);
+
+  useImageryProvider(imageryProvider, layer?.id, property);
+};

package/src/engines/Cesium/Feature/Resource/index.stories.tsx

@@ -0,0 +1,46 @@
+import { Meta, StoryFn } from "@storybook/react";
+
+import { engine } from "../..";
+import { Map, Props } from "../../../../Map";
+
+export default {
+  component: Map,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: StoryFn<Props> = args => <Map {...args} />;
+
+export const Default = Template.bind([]);
+Default.args = {
+  engine: "cesium",
+  engines: {
+    cesium: engine,
+  },
+  ready: true,
+  layers: [
+    {
+      id: "l",
+      type: "simple",
+      data: {
+        type: "czml",
+        url: "/testdata/sample.czml",
+      },
+      resource: {},
+      marker: {
+        pointColor: {
+          expression: {
+            conditions: [["${id} === '1'", "color('red')"]],
+          },
+        },
+      },
+    },
+  ],
+  property: {
+    tiles: [
+      {
+        id: "default",
+        tile_type: "default",
+      },
+    ],
+  },
+};

package/src/engines/Cesium/Feature/Resource/index.tsx

@@ -0,0 +1,218 @@
+import { Entity, type DataSource, Color, JulianDate } from "cesium";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { KmlDataSource, CzmlDataSource, GeoJsonDataSource, useCesium } from "resium";
+
+import type { ResourceAppearance } from "../../..";
+import { ComputedFeature, evalFeature, Feature, guessType } from "../../../../mantle";
+import { requestIdleCallbackWithRequiredWork } from "../../../../utils";
+import { useContext } from "../context";
+import {
+  attachTag,
+  getTag,
+  extractSimpleLayerData,
+  type FeatureComponentConfig,
+  type FeatureProps,
+} from "../utils";
+
+import { attachStyle, makeFeatureId } from "./utils";
+
+export type Props = FeatureProps<Property>;
+export type Property = ResourceAppearance;
+const types: Record<string, "geojson" | "kml" | "czml"> = {
+  kml: "kml",
+  geojson: "geojson",
+  czml: "czml",
+};
+
+const comps = {
+  kml: KmlDataSource,
+  czml: CzmlDataSource,
+  geojson: GeoJsonDataSource,
+};
+
+type CachedFeature = {
+  feature: Feature;
+  raw: Entity;
+};
+
+export default function Resource({
+  isVisible,
+  property,
+  layer,
+  onComputedFeatureFetch,
+  onComputedFeatureDelete,
+}: Props) {
+  const {
+    show = true,
+    clampToGround,
+    stroke,
+    strokeWidth,
+    markerColor,
+    markerSize,
+    fill,
+    hideIndicator,
+  } = property ?? {};
+  const [type, url, updateClock] = useMemo((): [
+    ResourceAppearance["type"],
+    string | undefined,
+    boolean,
+  ] => {
+    const data = extractSimpleLayerData(layer);
+    const type = property?.type;
+    const url = property?.url;
+    return [
+      type ?? (data?.type as ResourceAppearance["type"]),
+      url ?? data?.url,
+      data?.time?.updateClockOnLoad ?? true,
+    ];
+  }, [property, layer]);
+  const { viewer } = useCesium();
+  const cachedFeatures = useRef<CachedFeature[]>([]);
+  const cachedFeatureIds = useRef(new Set<string>());
+
+  const ext = useMemo(() => (!type || type === "auto" ? guessType(url) : undefined), [type, url]);
+  const actualType = ext ? types[ext] : type !== "auto" ? type : undefined;
+  const Component = actualType ? comps[actualType] : undefined;
+
+  const { requestRender, timelineManagerRef } = useContext();
+
+  const handleChange = useCallback(
+    (e: DataSource) => {
+      if (!viewer) return;
+      const features: Feature[] = [];
+      const computedFeatures: ComputedFeature[] = [];
+      e.entities.values.forEach(e => {
+        const res = attachStyle(e, layer, evalFeature, viewer.clock.currentTime);
+        const [feature, computedFeature] = res || [];
+
+        attachTag(e, {
+          layerId: layer?.id,
+          featureId: feature?.id,
+          hideIndicator: computedFeature?.resource?.hideIndicator,
+        });
+
+        if (feature && !cachedFeatureIds.current.has(feature.id)) {
+          features.push(feature);
+          cachedFeatures.current.push({ feature, raw: e });
+          cachedFeatureIds.current.add(feature.id);
+        }
+        if (computedFeature) {
+          computedFeatures.push(computedFeature);
+        }
+      });
+
+      // GeoJSON is not delegated data, so we need to skip.
+      if (type !== "geojson") {
+        onComputedFeatureFetch?.(features, computedFeatures);
+      }
+
+      requestRender?.();
+    },
+    [layer, viewer, onComputedFeatureFetch, type, requestRender],
+  );
+
+  const initialClock = useRef({
+    start: timelineManagerRef?.current?.timeline?.start,
+    stop: timelineManagerRef?.current?.timeline?.stop,
+    current: timelineManagerRef?.current?.timeline?.current,
+  });
+  const handleLoad = useCallback(
+    (ds: DataSource) => {
+      ds.entities.values.forEach(e =>
+        requestAnimationFrame(() => {
+          const tag = getTag(e);
+          attachTag(e, {
+            layerId: layer?.id,
+            featureId: makeFeatureId(e),
+            hideIndicator: hideIndicator ?? tag?.hideIndicator,
+          });
+        }),
+      );
+      if (!updateClock) {
+        if (
+          initialClock.current.current &&
+          initialClock.current.start &&
+          initialClock.current.stop
+        ) {
+          timelineManagerRef?.current?.commit({
+            cmd: "SET_TIME",
+            payload: {
+              start: initialClock.current.start,
+              stop: initialClock.current.stop,
+              current: initialClock.current.current,
+            },
+            committer: {
+              source: "featureResource",
+              id: layer?.id,
+            },
+          });
+        }
+        return;
+      }
+      if (ds.clock) {
+        timelineManagerRef?.current?.commit({
+          cmd: "SET_TIME",
+          payload: {
+            start: JulianDate.toDate(ds.clock.startTime),
+            stop: JulianDate.toDate(ds.clock.stopTime),
+            current: JulianDate.toDate(ds.clock.currentTime),
+          },
+          committer: {
+            source: "featureResource",
+            id: layer?.id,
+          },
+        });
+      }
+      requestRender?.();
+    },
+    [updateClock, timelineManagerRef, layer?.id, requestRender, hideIndicator],
+  );
+
+  // convert hexCodeColorString to ColorValue?s
+  const strokeValue = useMemo(
+    () => (stroke ? Color.fromCssColorString(stroke) : undefined),
+    [stroke],
+  );
+  const fillValue = useMemo(() => (fill ? Color.fromCssColorString(fill) : undefined), [fill]);
+  const markerColorValue = useMemo(
+    () => (markerColor ? Color.fromCssColorString(markerColor) : undefined),
+    [markerColor],
+  );
+
+  useEffect(() => {
+    if (!viewer) return;
+    cachedFeatures.current.forEach(f => {
+      attachStyle(f.raw, layer, evalFeature, viewer.clock.currentTime);
+    });
+  }, [layer, viewer]);
+
+  useEffect(
+    () => () => {
+      requestIdleCallbackWithRequiredWork(() => {
+        onComputedFeatureDelete?.(Array.from(cachedFeatureIds.current.values()));
+      });
+    },
+    [], // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  if (!isVisible || !show || !Component || !url) return null;
+
+  return (
+    <Component
+      data={url}
+      show={true}
+      clampToGround={clampToGround}
+      onChange={handleChange}
+      onLoad={handleLoad}
+      stroke={strokeValue}
+      fill={fillValue}
+      strokeWidth={strokeWidth}
+      markerSize={markerSize}
+      markerColor={markerColorValue}
+    />
+  );
+}
+
+export const config: FeatureComponentConfig = {
+  noFeature: true,
+};

package/src/engines/Cesium/Feature/Resource/utils.test.ts

@@ -0,0 +1,69 @@
+import { expect, test } from "vitest";
+
+import { heightReference, shadowMode } from "../../common";
+import { toColor } from "../utils";
+
+import { attachProperties } from "./utils";
+
+test("attachProperties()", () => {
+  const mockEntity: any = {
+    polygon: {
+      outlineWidth: 100,
+      material: toColor("blue"),
+    },
+  };
+  const mockComputedFeature: any = {
+    polygon: {
+      fillColor: "red",
+      shadows: "enabled",
+      heightReference: "clamp",
+      outlineColor: "red",
+    },
+  };
+
+  attachProperties(mockEntity, mockComputedFeature, ["polygon", "polygon"], {
+    material: {
+      name: "fillColor",
+      type: "color",
+    },
+    outlineWidth: {
+      name: "strokeWidth",
+    },
+    shadows: {
+      name: "shadows",
+      type: "shadows",
+    },
+    heightReference: {
+      name: "heightReference",
+      type: "heightReference",
+    },
+    outlineColor: {
+      name: "strokeColor",
+      override: "blue",
+    },
+  });
+
+  expect(mockEntity.polygon).toEqual({
+    material: toColor("red"),
+    shadows: shadowMode("enabled"),
+    heightReference: heightReference("clamp"),
+    outlineWidth: 100,
+    outlineColor: "blue",
+  });
+  expect(mockEntity.properties.reearth_originalProperties).toEqual({
+    polygon: {
+      material: toColor("blue"),
+      outlineWidth: 100,
+    },
+  });
+
+  // Computed feature should not be changed.
+  expect(mockComputedFeature).toEqual({
+    polygon: {
+      fillColor: "red",
+      shadows: "enabled",
+      heightReference: "clamp",
+      outlineColor: "red",
+    },
+  });
+});