@reearth/core 0.0.1

package/src/engines/Cesium/core/labels/JapanGSIOptimalBVmapVectorMapLabel/JapanGSIOptimalBVmapLabelImagery.tsx

@@ -0,0 +1,321 @@
+import {
+  Cartesian3,
+  Cartographic,
+  Color,
+  HeightReference,
+  HorizontalOrigin,
+  LabelStyle,
+  NearFarScalar,
+  LabelCollection,
+  Rectangle,
+  VerticalOrigin,
+  type Ellipsoid,
+  type Label,
+} from "@cesium/engine";
+import { merge, omit } from "lodash-es";
+import { type Feature } from "protomaps";
+import { memo, useCallback, useEffect, useMemo, useRef, type FC } from "react";
+import { useCesium } from "resium";
+import { suspend } from "suspend-react";
+
+import { isNotNullish } from "../../../../Cesium/utils/polygon";
+import { isColor, toColor } from "../../../common";
+
+import { getAnnotationType, type AnnotationType } from "./getAnnotationType";
+import { getTileCoords } from "./helpers";
+import { type JapanGSIOptimalBVmapLabelImageryProvider } from "./JapanGSIOptimalBVmapLabelImageryProvider";
+import { type Imagery, type ImageryCoords, type KeyedImagery } from "./types";
+
+type LabelOptions = Partial<
+  Pick<
+    Label,
+    {
+      [K in keyof Label]: Label[K] extends (...args: any[]) => any ? never : K;
+    }[keyof Label]
+  >
+>;
+
+export type AnnotationStyle = Partial<
+  Record<
+    AnnotationType | "default",
+    | (Omit<LabelOptions, "id" | "position" | "text" | "font" | "show"> & {
+        fontSize?: number;
+        fontFamily?: string;
+      })
+    | false
+  >
+>;
+
+const fontScale = 5;
+const scaleByDistance = new NearFarScalar(
+  0,
+  1 / fontScale,
+  Number.POSITIVE_INFINITY,
+  1 / fontScale,
+);
+
+const defaultStyle: AnnotationStyle = {
+  default: {
+    fontFamily: "sans-serif",
+    fillColor: Color.BLACK,
+    outlineColor: Color.WHITE.withAlpha(0.8),
+    outlineWidth: 5,
+  },
+  municipalities: {
+    fontSize: 12,
+  },
+  towns: {
+    fontSize: 8,
+    fillColor: Color.BLACK.withAlpha(0.6),
+  },
+  roads: {
+    fontSize: 8,
+  },
+  railways: {
+    fontSize: 8,
+  },
+  stations: {
+    fontSize: 9,
+  },
+  landmarks: {
+    fontSize: 8,
+  },
+  topography: {
+    fontSize: 8,
+    fillColor: Color.BLACK.withAlpha(0.6),
+  },
+};
+
+function resolveStyle(code: number, style?: AnnotationStyle): Partial<LabelOptions> | undefined {
+  const type = getAnnotationType(code);
+  if (type == null) {
+    return;
+  }
+  const typeStyle = style?.[type];
+  if (typeStyle === false) {
+    return;
+  }
+  const mergedStyle = merge(
+    {},
+    defaultStyle.default,
+    defaultStyle[type],
+    style?.default,
+    typeStyle,
+  );
+  const convertedStyle = Object.fromEntries(
+    Object.entries(mergedStyle).map(([k, v]) => [
+      k,
+      typeof v === "string" && isColor(v) ? toColor(v) : v,
+    ]),
+  );
+  return {
+    scaleByDistance,
+    ...omit(convertedStyle, ["fontSize", "fontFamily"]),
+    font:
+      convertedStyle?.fontSize != null && convertedStyle.fontFamily != null
+        ? `${convertedStyle.fontSize * fontScale}pt ${convertedStyle.fontFamily}`
+        : undefined,
+  };
+}
+
+interface AnnotationFeature extends Feature {
+  props: {
+    vt_code: number;
+    vt_text: string;
+    vt_arrng?: number;
+    vt_arrngagl?: number;
+  };
+}
+
+const positionScratch = new Cartesian3();
+const cartographicScratch = new Cartographic();
+
+function getPosition(
+  coords: ImageryCoords,
+  feature: Feature,
+  bounds: Rectangle,
+  descendantsBounds: Rectangle[] | undefined,
+  tileSize: number,
+  height?: number,
+  ellipsoid?: Ellipsoid,
+  result = new Cartesian3(),
+): Cartesian3 | undefined {
+  let x = feature.geom[0][0].x / tileSize;
+  let y = feature.geom[0][0].y / tileSize;
+  if (coords.level === 17) {
+    // Tiles at 16 level includes features for level 17.
+    // https://github.com/gsi-cyberjapan/optimal_bvmap
+    x = x * 2 - (coords.x % 2);
+    y = y * 2 - (coords.y % 2);
+  }
+  if (x < 0 || x > 1 || y < 0 || y > 1) {
+    return;
+  }
+  const cartographic = Cartographic.fromRadians(
+    bounds.west + bounds.width * x,
+    bounds.south + bounds.height * (1 - y),
+    height,
+    cartographicScratch,
+  );
+  if (descendantsBounds?.some(bounds => Rectangle.contains(bounds, cartographic)) === true) {
+    return;
+  }
+  return Cartographic.toCartesian(cartographic, ellipsoid, result);
+}
+
+export interface JapanGSIOptimalBVmapLabelImageryProps {
+  imageryProvider: JapanGSIOptimalBVmapLabelImageryProvider;
+  imagery: KeyedImagery;
+  descendants?: readonly Imagery[];
+  height?: number;
+  style?: AnnotationStyle;
+  labelCollection?: LabelCollection;
+}
+
+export const JapanGSIOptimalBVmapLabelImagery: FC<JapanGSIOptimalBVmapLabelImageryProps> = memo(
+  ({
+    imageryProvider,
+    imagery,
+    descendants,
+    height = 50,
+    style = defaultStyle,
+    labelCollection,
+  }) => {
+    const cesiumContext = useCesium();
+
+    const tile = suspend(
+      async () => await imageryProvider.tileCache.get(getTileCoords(imagery, 16)),
+      [JapanGSIOptimalBVmapLabelImagery, imagery.key],
+    );
+
+    const bounds = useMemo(
+      () => imageryProvider.tilingScheme.tileXYToRectangle(imagery.x, imagery.y, imagery.level),
+      [imageryProvider, imagery],
+    );
+
+    const descendantsBounds = useMemo(
+      () =>
+        descendants?.map(descendant =>
+          imageryProvider.tilingScheme.tileXYToRectangle(
+            descendant.x,
+            descendant.y,
+            descendant.level,
+          ),
+        ),
+      [imageryProvider, descendants],
+    );
+
+    const annotations = useMemo(() => {
+      const features = tile.get("Anno");
+      if (features == null) {
+        return [];
+      }
+      return features.filter(
+        (feature): feature is AnnotationFeature =>
+          typeof feature.props.vt_code === "number" &&
+          // Look for annotations with 3-digits code only.
+          // https://maps.gsi.go.jp/help/pdf/vector/optbv_featurecodes.pdf
+          `${feature.props.vt_code}`.length === 3 &&
+          typeof feature.props.vt_text === "string" &&
+          (feature.props.vt_arrng == null || typeof feature.props.vt_arrng === "number") &&
+          (feature.props.vt_arrngagl == null || typeof feature.props.vt_arrngagl === "number") &&
+          // `vt_flag17` property determines the visibility of features inside
+          // tiles at level 16.
+          // https://maps.gsi.go.jp/help/pdf/vector/optbv_attribute.pdf
+          (imagery.level < 16 ||
+            (imagery.level === 16 && feature.props.vt_flag17 !== 2) ||
+            (imagery.level === 17 && feature.props.vr_flag17 !== 0)),
+      );
+    }, [tile, imagery]);
+
+    const labelsRef = useRef<Array<[AnnotationFeature, Label]>>();
+    const scene = cesiumContext?.scene;
+
+    const updateVisibility = useCallback(() => {
+      const labels = labelsRef.current;
+      if (labels == null) {
+        return;
+      }
+      labels.forEach(([feature, label]) => {
+        const position = getPosition(
+          imagery,
+          feature,
+          bounds,
+          descendantsBounds,
+          imageryProvider.tileCache.tileSize,
+          height,
+          scene?.globe?.ellipsoid,
+          positionScratch,
+        );
+        if (position != null) {
+          label.position = position;
+          label.show = true;
+        } else {
+          label.show = false;
+        }
+      });
+      scene?.requestRender();
+    }, [imageryProvider, imagery, height, bounds, descendantsBounds, scene]);
+
+    const updateVisibilityRef = useRef(updateVisibility);
+    updateVisibilityRef.current = updateVisibility;
+
+    useEffect(() => {
+      if (!scene || !labelCollection) {
+        return;
+      }
+      const texts: string[] = [];
+      const labels = annotations
+        .map((feature): [AnnotationFeature, Label] | undefined => {
+          const styleOptions = resolveStyle(feature.props.vt_code, style);
+          if (styleOptions == null) {
+            return undefined;
+          }
+          const text = feature.props.vt_text;
+          if (texts.includes(text)) {
+            return undefined; // Basic dedupe, mostly for stations.
+          }
+          texts.push(text);
+          const options: LabelOptions = {
+            text,
+            style: LabelStyle.FILL_AND_OUTLINE,
+            horizontalOrigin: HorizontalOrigin.CENTER,
+            verticalOrigin: VerticalOrigin.BOTTOM,
+            heightReference: HeightReference.CLAMP_TO_GROUND,
+            disableDepthTestDistance: Infinity,
+            ...styleOptions,
+          };
+          return [feature, labelCollection.add(options as Label)];
+        })
+        .filter(isNotNullish);
+
+      labelsRef.current = labels;
+      updateVisibilityRef.current();
+
+      const removeLabels = (): void => {
+        if (!labelCollection.isDestroyed()) {
+          labels.forEach(([, label]) => {
+            labelCollection.remove(label);
+          });
+        }
+        if (!scene.isDestroyed()) {
+          scene?.postRender.removeEventListener(removeLabels);
+        }
+      };
+      return () => {
+        labelsRef.current = undefined;
+        if (!scene.isDestroyed()) {
+          scene?.postRender.addEventListener(removeLabels);
+        }
+      };
+    }, [style, annotations, scene, labelCollection]);
+
+    useEffect(() => {
+      updateVisibility();
+    }, [updateVisibility]);
+
+    return null;
+  },
+);
+
+JapanGSIOptimalBVmapLabelImagery.displayName = "JapanGSIOptimalBVmapLabelImagery";

package/src/engines/Cesium/core/labels/JapanGSIOptimalBVmapVectorMapLabel/JapanGSIOptimalBVmapLabelImageryLayer.tsx

@@ -0,0 +1,56 @@
+import { WebMercatorTilingScheme, ImageryLayer as CesiumImageryLayer } from "cesium";
+import { forwardRef } from "react";
+import { CesiumComponentRef, ImageryLayer } from "resium";
+
+import { useInstance } from "../../../hooks/useInstance";
+
+import {
+  JapanGSIOptimalBVmapLabelImageryProvider,
+  type JapanGSIOptimalBVmapLabelImageryProviderOptions,
+} from "./JapanGSIOptimalBVmapLabelImageryProvider";
+import { ImageryLayerProps } from "./types";
+
+export interface LabelImageryLayerProps
+  extends Omit<ImageryLayerProps, "imageryProvider">,
+    JapanGSIOptimalBVmapLabelImageryProviderOptions {
+  minimumLevel?: number;
+  maximumLevel?: number;
+  minimumDataLevel: number;
+  maximumDataLevel: number;
+}
+
+export const LabelImageryLayer = forwardRef<
+  CesiumComponentRef<CesiumImageryLayer>,
+  LabelImageryLayerProps
+>(function LabelImageryLayerPresenter(
+  {
+    url,
+    tilingScheme,
+    tileWidth,
+    tileHeight,
+    minimumLevel,
+    maximumLevel,
+    minimumDataLevel,
+    maximumDataLevel,
+    ...props
+  },
+  ref,
+) {
+  const imageryProvider = useInstance({
+    keys: [url, tilingScheme, tileWidth, tileHeight, minimumDataLevel, maximumDataLevel],
+    create: () =>
+      new JapanGSIOptimalBVmapLabelImageryProvider({
+        url,
+        tilingScheme: tilingScheme ?? new WebMercatorTilingScheme(),
+        tileWidth,
+        tileHeight,
+        minimumDataLevel,
+        maximumDataLevel,
+      }),
+  });
+  Object.assign(imageryProvider, {
+    minimumLevel,
+    maximumLevel,
+  });
+  return <ImageryLayer ref={ref} imageryProvider={imageryProvider} {...props} />;
+});

package/src/engines/Cesium/core/labels/JapanGSIOptimalBVmapVectorMapLabel/JapanGSIOptimalBVmapLabelImageryProvider.ts

@@ -0,0 +1,146 @@
+import {
+  Event as CesiumEvent,
+  DiscardEmptyTileImagePolicy,
+  WebMercatorTilingScheme,
+  type Credit,
+  type ImageryLayerFeatureInfo,
+  type ImageryProvider,
+  type ImageryTypes,
+  type Proxy,
+  type Request,
+  type TileDiscardPolicy,
+  type TilingScheme,
+} from "@cesium/engine";
+import { TileCache, ZxySource } from "protomaps";
+
+import { getTileCoords, makeKey } from "./helpers";
+
+export interface JapanGSIOptimalBVmapImageryProviderBaseOptions {
+  tilingScheme?: TilingScheme;
+  tileWidth?: number;
+  tileHeight?: number;
+}
+
+export abstract class JapanGSIOptimalBVmapImageryProviderBase implements ImageryProvider {
+  // Deprecated fields
+  readonly defaultAlpha = undefined;
+  readonly defaultNightAlpha = undefined;
+  readonly defaultDayAlpha = undefined;
+  readonly defaultBrightness = undefined;
+  readonly defaultContrast = undefined;
+  readonly defaultHue = undefined;
+  readonly defaultSaturation = undefined;
+  readonly defaultGamma = undefined;
+  readonly defaultMinificationFilter = undefined as any;
+  readonly defaultMagnificationFilter = undefined as any;
+  readonly ready: boolean = true;
+  readonly readyPromise: Promise<boolean> = Promise.resolve(true);
+
+  tileWidth = 256;
+  tileHeight = 256;
+  maximumLevel: number | undefined = undefined;
+  minimumLevel = 0;
+  tilingScheme: TilingScheme = new WebMercatorTilingScheme();
+  rectangle = this.tilingScheme.rectangle;
+  tileDiscardPolicy: TileDiscardPolicy = undefined as any;
+  errorEvent: CesiumEvent = new CesiumEvent();
+  credit: Credit = undefined as any;
+  proxy: Proxy = undefined as any;
+  hasAlphaChannel = true;
+
+  constructor(options?: JapanGSIOptimalBVmapImageryProviderBaseOptions) {
+    if (options?.tilingScheme != null) {
+      this.tilingScheme = options.tilingScheme;
+    }
+    if (options?.tileWidth != null) {
+      this.tileWidth = options.tileWidth;
+    }
+    if (options?.tileHeight != null) {
+      this.tileHeight = options.tileHeight;
+    }
+  }
+
+  getTileCredits(_x: number, _y: number, _level: number): Credit[] {
+    return undefined as any;
+  }
+
+  requestImage(
+    _x: number,
+    _y: number,
+    _level: number,
+    _request?: Request | undefined,
+  ): Promise<ImageryTypes> | undefined {
+    return undefined;
+  }
+
+  pickFeatures(
+    _x: number,
+    _y: number,
+    _level: number,
+    _longitude: number,
+    _latitude: number,
+  ): Promise<ImageryLayerFeatureInfo[]> | undefined {
+    return undefined;
+  }
+
+  // For backward compatibility. Remove this when targeting cesium 1.107.
+  get _ready(): boolean {
+    return this.ready;
+  }
+
+  get _readyPromise(): Promise<boolean> {
+    return this.readyPromise;
+  }
+}
+
+export interface JapanGSIOptimalBVmapLabelImageryProviderOptions
+  extends JapanGSIOptimalBVmapImageryProviderBaseOptions {
+  url: string;
+  minimumDataLevel: number;
+  maximumDataLevel: number;
+}
+
+export class JapanGSIOptimalBVmapLabelImageryProvider extends JapanGSIOptimalBVmapImageryProviderBase {
+  minimumDataLevel: number;
+  maximumDataLevel: number;
+
+  readonly tileCache: TileCache;
+  private readonly image: HTMLCanvasElement;
+  private readonly discardedTileCoords = new Set<string>();
+
+  constructor(options: JapanGSIOptimalBVmapLabelImageryProviderOptions) {
+    super(options);
+    this.tileDiscardPolicy = new DiscardEmptyTileImagePolicy();
+    this.minimumDataLevel = options.minimumDataLevel;
+    this.maximumDataLevel = options.maximumDataLevel;
+
+    const source = new ZxySource(options.url, false);
+    this.tileCache = new TileCache(source, 1024);
+
+    this.image = document.createElement("canvas");
+    this.image.width = 1;
+    this.image.height = 1;
+  }
+
+  requestImage(
+    _x: number,
+    _y: number,
+    _level: number,
+    _request?: Request | undefined,
+  ): Promise<ImageryTypes> | undefined {
+    const key = makeKey({ x: _x, y: _y, level: _level });
+    return (async () => {
+      if (_level < this.minimumDataLevel || this.discardedTileCoords.has(key)) {
+        return DiscardEmptyTileImagePolicy.EMPTY_IMAGE;
+      }
+      // Populate tile cache in advance.
+      await this.tileCache.get(
+        getTileCoords({ x: _x, y: _y, level: _level }, this.maximumDataLevel),
+      );
+      return this.image;
+    })().catch(() => {
+      this.discardedTileCoords.add(key);
+      return DiscardEmptyTileImagePolicy.EMPTY_IMAGE;
+    });
+  }
+}