@reearth/core 0.0.7-alpha.7 → 0.0.7-alpha.70

package/src/engines/Cesium/core/Imagery.tsx

@@ -1,14 +1,18 @@
 import {
   Color,
+  ImageryLayer as CesiumImageryLayer,
   ImageryProvider,
   TextureMagnificationFilter,
   TextureMinificationFilter,
+  UrlTemplateImageryProvider,
 } from "cesium";
 import { isEqual } from "lodash-es";
-import { useCallback, useMemo, useRef, useLayoutEffect, useState } from "react";
-import { ImageryLayer } from "resium";
+import { useCallback, useMemo, useRef, useEffect } from "react";
+import { useCesium } from "resium";
 
-import { tiles as tilePresets } from "./presets";
+import type { CustomProviderConfig } from "../../../Map/types/customProvider";
+
+import { isValidPresetTileType, PresetTileType, tiles as tilePresets } from "./presets";
 
 export type ImageryLayerData = {
   id: string;
@@ -22,6 +26,7 @@ export type Tile = {
   id: string;
   url?: string;
   type?: string;
+  cesiumIonAssetId?: number;
   opacity?: number;
   zoomLevel?: number[];
   zoomLevelForURL?: number[];
@@ -31,61 +36,223 @@ export type Tile = {
 export type Props = {
   tiles?: Tile[];
   cesiumIonAccessToken?: string;
+  customProvider?: CustomProviderConfig;
+  onTilesChange?: () => void;
 };
 
-export default function ImageryLayers({ tiles, cesiumIonAccessToken }: Props) {
-  const { providers, updated } = useImageryProviders({
-    tiles,
+// NOTE: This component intentionally bypasses Resium's declarative <ImageryLayer />.
+// Resium wraps provider creation in queueMicrotask; under React 18 Strict Mode the effect
+// cleanup runs before that microtask resolves, so the layer reference is undefined at cleanup
+// time and old layers are never removed — they accumulate silently behind new ones.
+// Direct imageryLayerCollection management with a `cancelled` flag is the only safe fix.
+export default function ImageryLayers({
+  tiles,
+  cesiumIonAccessToken,
+  customProvider,
+  onTilesChange,
+}: Props) {
+  const { imageryLayerCollection, scene } = useCesium();
+
+  // Create a stable tiles reference that only changes when the content actually changes
+  // Normalize `undefined` to a stable empty array so `useImageryProviders` doesn't allocate a new default `[]` each render.
+  const emptyTiles = useMemo<Tile[]>(() => [], []);
+  const tilesValue = tiles ?? emptyTiles;
+
+  const prevTilesRef = useRef<Tile[]>(tilesValue);
+  const stableTiles = useMemo(() => {
+    if (!isEqual(prevTilesRef.current, tilesValue)) {
+      prevTilesRef.current = tilesValue;
+    }
+    return prevTilesRef.current;
+  }, [tilesValue]);
+
+  // Pass stableTiles to useImageryProviders to prevent providers from being recreated
+  // when tiles reference changes but content is the same
+  const { providers } = useImageryProviders({
+    tiles: stableTiles,
     cesiumIonAccessToken,
+    customProvider,
     presets: tilePresets,
   });
 
-  // force rerendering all layers when any provider is updated
-  // since Resium does not sort layers according to ImageryLayer component order
-  const [counter, setCounter] = useState(0);
-  useLayoutEffect(() => {
-    if (updated) setCounter(c => c + 1);
-  }, [providers, updated]);
-
-  return (
-    <>
-      {tiles
-        ?.map(({ id, ...tile }) => ({
-          ...tile,
-          id,
-          provider: providers[id]?.[2],
-        }))
-        .map(({ id, opacity, zoomLevel, provider, heatmap }, i) =>
-          provider ? (
-            <ImageryLayer
-              key={`${id}_${i}_${counter}`}
-              imageryProvider={provider}
-              minimumTerrainLevel={zoomLevel?.[0]}
-              maximumTerrainLevel={zoomLevel?.[1]}
-              alpha={opacity}
-              index={i}
-              colorToAlpha={heatmap ? Color.WHITE : undefined}
-              colorToAlphaThreshold={heatmap ? 1 : undefined}
-              magnificationFilter={heatmap ? TextureMagnificationFilter.LINEAR : undefined}
-              minificationFilter={heatmap ? TextureMinificationFilter.NEAREST : undefined}
-            />
-          ) : null,
-        )}
-    </>
-  );
+  // Store layers keyed by tile ID to allow incremental updates
+  const layersRef = useRef<
+    Map<
+      string,
+      {
+        layer: CesiumImageryLayer;
+        tile: Tile;
+        provider: Promise<ImageryProvider> | ImageryProvider;
+      }
+    >
+  >(new Map());
+
+  useEffect(() => {
+    if (!imageryLayerCollection || !scene) return;
+
+    let cancelled = false;
+    const currentTileIds = new Set(stableTiles?.map(t => t.id) || []);
+
+    // Remove layers for tiles that no longer exist
+    layersRef.current.forEach(({ layer }, id) => {
+      if (!currentTileIds.has(id)) {
+        if (imageryLayerCollection.contains(layer)) {
+          imageryLayerCollection.remove(layer);
+        }
+        layersRef.current.delete(id);
+      }
+    });
+
+    // Track layers by their intended index to maintain order with async loading
+    const layersByIndex: (CesiumImageryLayer | null)[] = new Array(stableTiles?.length || 0).fill(
+      null,
+    );
+
+    const reorderLayers = () => {
+      if (cancelled || scene.isDestroyed()) return;
+
+      // Move each layer to its correct position based on layersByIndex
+      layersByIndex.forEach((layer, targetIndex) => {
+        if (!layer) return;
+
+        const currentIndex = imageryLayerCollection.indexOf(layer);
+        if (currentIndex === -1) return; // Layer not in collection
+
+        // Calculate where this layer should be: count non-null layers before it
+        const desiredIndex = layersByIndex.slice(0, targetIndex).filter(l => l !== null).length;
+
+        if (currentIndex !== desiredIndex) {
+          // Move layer to correct position
+          imageryLayerCollection.remove(layer, false); // Don't destroy
+          imageryLayerCollection.add(layer, desiredIndex);
+        }
+      });
+
+      scene.requestRender();
+    };
+
+    stableTiles?.forEach((tile, i) => {
+      const { id, zoomLevel, opacity, heatmap } = tile;
+      const existing = layersRef.current.get(id);
+      const providerOrPromise = providers[id]?.[3];
+
+      if (!providerOrPromise) return;
+
+      // Check if we can reuse the existing layer with just an opacity update
+      if (existing) {
+        const prevTile = existing.tile;
+        const prevProvider = existing.provider;
+        // Must check provider reference - if provider changed (e.g. cesiumIonAccessToken updated),
+        // the layer needs to be recreated even if tile properties are the same
+        const canReuseLayer =
+          prevProvider === providerOrPromise &&
+          prevTile.type === tile.type &&
+          prevTile.url === tile.url &&
+          prevTile.cesiumIonAssetId === tile.cesiumIonAssetId &&
+          prevTile.zoomLevel?.[0] === zoomLevel?.[0] &&
+          prevTile.zoomLevel?.[1] === zoomLevel?.[1] &&
+          prevTile.heatmap === heatmap;
+
+        if (canReuseLayer) {
+          // Only opacity might have changed - update it directly if needed
+          const nextAlpha = opacity ?? 1;
+          if (existing.layer.alpha !== nextAlpha) {
+            existing.layer.alpha = nextAlpha;
+            scene.requestRender();
+          }
+          // Update stored tile and provider for next comparison
+          existing.tile = tile;
+          existing.provider = providerOrPromise;
+          layersByIndex[i] = existing.layer;
+          reorderLayers();
+          return;
+        }
+
+        // Need to recreate the layer - remove the old one
+        if (imageryLayerCollection.contains(existing.layer)) {
+          imageryLayerCollection.remove(existing.layer);
+        }
+        layersRef.current.delete(id);
+      }
+
+      const doAdd = (provider: ImageryProvider) => {
+        if (!provider || cancelled || scene.isDestroyed()) return;
+        const layer = new CesiumImageryLayer(provider, {
+          minimumTerrainLevel: zoomLevel?.[0],
+          maximumTerrainLevel: zoomLevel?.[1],
+          alpha: opacity,
+          colorToAlpha: heatmap ? Color.WHITE : undefined,
+          colorToAlphaThreshold: heatmap ? 1 : undefined,
+          magnificationFilter: heatmap ? TextureMagnificationFilter.LINEAR : undefined,
+          minificationFilter: heatmap ? TextureMinificationFilter.NEAREST : undefined,
+        });
+
+        // Always append to avoid index out of bounds
+        imageryLayerCollection.add(layer);
+        layersByIndex[i] = layer;
+        // Store the provider reference to detect when provider changes (e.g. token update)
+        layersRef.current.set(id, { layer, tile, provider: providerOrPromise });
+
+        // Reorder all layers after each addition
+        reorderLayers();
+      };
+
+      if (providerOrPromise instanceof Promise) {
+        providerOrPromise
+          .then(doAdd)
+          .catch(err => console.error("Failed to load imagery provider:", err));
+      } else {
+        doAdd(providerOrPromise);
+      }
+    });
+
+    scene.requestRender();
+    onTilesChange?.();
+
+    return () => {
+      cancelled = true;
+      // Don't remove layers on cleanup - they'll be managed by the next render
+      // This prevents flickering when tiles change
+    };
+  }, [providers, stableTiles, imageryLayerCollection, scene, onTilesChange]);
+
+  // Cleanup all layers on unmount
+  useEffect(() => {
+    const layers = layersRef.current;
+    return () => {
+      if (!imageryLayerCollection || !scene || scene.isDestroyed()) return;
+      layers.forEach(({ layer }) => {
+        if (imageryLayerCollection.contains(layer)) {
+          imageryLayerCollection.remove(layer);
+        }
+      });
+      layers.clear();
+    };
+  }, [imageryLayerCollection, scene]);
+
+  return null;
 }
 
-type Providers = { [id: string]: [string | undefined, string | undefined, ImageryProvider] };
+type Providers = {
+  [id: string]: [
+    string | undefined,
+    string | undefined,
+    number | undefined,
+    Promise<ImageryProvider> | ImageryProvider,
+  ];
+};
 
 export function useImageryProviders({
   tiles = [],
   cesiumIonAccessToken,
+  customProvider,
   presets,
 }: {
   tiles?: Tile[];
   cesiumIonAccessToken?: string;
+  customProvider?: CustomProviderConfig;
   presets: {
-    [key: string]: (opts?: {
+    [K in PresetTileType]: (opts?: {
       url?: string;
       cesiumIonAccessToken?: string;
       heatmap?: boolean;
@@ -94,24 +261,51 @@ export function useImageryProviders({
   };
 }): { providers: Providers; updated: boolean } {
   const newTile = useCallback(
-    (t: Tile, ciat?: string) =>
-      presets[t.type || "default"]({
+    (t: Tile, ciat?: string, tp?: CustomProviderConfig) => {
+      const opts = {
         url: t.url,
         cesiumIonAccessToken: ciat,
+        cesiumIonAssetId: t.cesiumIonAssetId,
         heatmap: t.heatmap,
-        zoomLevel: t.zoomLevelForURL,
-      }),
+        tile_zoomLevel: t.zoomLevelForURL,
+      };
+      if (isValidPresetTileType(t.type)) {
+        return presets[t.type](opts);
+      }
+      // Dynamic: check customProvider.imagery.providers for a matching id
+      const customEntry = tp?.imagery?.providers?.find(p => p.id === t.type);
+      if (customEntry) {
+        return new UrlTemplateImageryProvider({
+          url: customEntry.url,
+          credit: customEntry.credit,
+          maximumLevel: customEntry.maximumLevel,
+          minimumLevel: customEntry.minimumLevel,
+        });
+      }
+      return presets["open_street_map"](opts);
+    },
     [presets],
   );
 
   const prevCesiumIonAccessToken = useRef(cesiumIonAccessToken);
+  const prevCustomProvider = useRef(customProvider);
   const tileKeys = tiles.map(t => t.id).join(",");
   const prevTileKeys = useRef(tileKeys);
   const prevProviders = useRef<Providers>({});
+  const zoomLevels = useMemo(
+    () =>
+      tiles.map(t => {
+        if (t.id && t.zoomLevel) return { [t.id]: t.zoomLevel };
+        return;
+      }),
+    [tiles],
+  );
+  const prevZoomLevels = useRef(zoomLevels);
 
-  // Manage TileProviders so that TileProvider does not need to be recreated each time tiles are updated.
+  // Manage CustomProviders so that CustomProvider does not need to be recreated each time tiles are updated.
   const { providers, updated } = useMemo(() => {
     const isCesiumAccessTokenUpdated = prevCesiumIonAccessToken.current !== cesiumIonAccessToken;
+    const isTileProviderUpdated = prevCustomProvider.current !== customProvider;
     const prevProvidersKeys = Object.keys(prevProviders.current);
     const added = tiles.map(t => t.id).filter(t => t && !prevProvidersKeys.includes(t));
 
@@ -123,7 +317,8 @@ export function useImageryProviders({
       added: added.includes(k),
       prevType: v?.[0],
       prevUrl: v?.[1],
-      prevProvider: v?.[2],
+      prevIonAssetId: v?.[2],
+      prevProvider: v?.[3],
       tile: tiles.find(t => t.id === k),
     }));
 
@@ -135,6 +330,7 @@ export function useImageryProviders({
             added,
             prevType,
             prevUrl,
+            prevIonAssetId,
             prevProvider,
             tile,
           }):
@@ -143,6 +339,7 @@ export function useImageryProviders({
                 [
                   string | undefined,
                   string | undefined,
+                  number | undefined,
                   Promise<ImageryProvider> | ImageryProvider | null | undefined,
                 ],
               ]
@@ -154,28 +351,59 @@ export function useImageryProviders({
                   added ||
                   prevType !== tile.type ||
                   prevUrl !== tile.url ||
-                  (isCesiumAccessTokenUpdated && (!tile.type || tile.type === "default"))
-                    ? [tile.type, tile.url, newTile(tile, cesiumIonAccessToken)]
-                    : [prevType, prevUrl, prevProvider],
+                  prevIonAssetId !== tile.cesiumIonAssetId ||
+                  isTileProviderUpdated ||
+                  (isCesiumAccessTokenUpdated &&
+                    (tile.type?.startsWith("cesium_ion") ||
+                      tile.type === "default" ||
+                      tile.type === "default_road" ||
+                      tile.type === "default_label" ||
+                      tile.type === "black_marble"))
+                    ? [
+                        tile.type,
+                        tile.url,
+                        tile.cesiumIonAssetId,
+                        newTile(tile, cesiumIonAccessToken, customProvider),
+                      ]
+                    : [prevType, prevUrl, prevIonAssetId, prevProvider],
                 ],
         )
         .filter(
-          (e): e is [string, [string | undefined, string | undefined, ImageryProvider]] =>
-            !!e?.[1][2],
+          (
+            e,
+          ): e is [
+            string,
+            [
+              string | undefined,
+              string | undefined,
+              number | undefined,
+              Promise<ImageryProvider> | ImageryProvider,
+            ],
+          ] => !!e?.[1][3],
         ),
     );
 
     const updated =
       !!added.length ||
       !!isCesiumAccessTokenUpdated ||
+      !!isTileProviderUpdated ||
       !isEqual(prevTileKeys.current, tileKeys) ||
-      rawProviders.some(p => p.tile && (p.prevType !== p.tile.type || p.prevUrl !== p.tile.url));
+      !isEqual(prevZoomLevels.current, zoomLevels) ||
+      rawProviders.some(
+        p =>
+          p.tile &&
+          (p.prevType !== p.tile.type ||
+            p.prevUrl !== p.tile.url ||
+            p.prevIonAssetId !== p.tile.cesiumIonAssetId),
+      );
 
     prevTileKeys.current = tileKeys;
+    prevZoomLevels.current = zoomLevels;
     prevCesiumIonAccessToken.current = cesiumIonAccessToken;
+    prevCustomProvider.current = customProvider;
 
     return { providers, updated };
-  }, [cesiumIonAccessToken, tiles, tileKeys, newTile]);
+  }, [cesiumIonAccessToken, customProvider, tiles, tileKeys, newTile, zoomLevels]);
 
   prevProviders.current = providers;
   return { providers, updated };

package/src/engines/Cesium/core/Indicator/Indicator.tsx

@@ -1,7 +1,7 @@
 /// <reference types="vite-plugin-svgr/client" />
 import useTransition from "@rot1024/use-transition";
 import { BoundingSphere, Cartesian3, SceneTransforms, Cartesian2, JulianDate } from "cesium";
-import { useEffect, useState } from "react";
+import { useEffect, useState, type JSX } from "react";
 import { useCesium } from "resium";
 
 import type { ViewerProperty } from "../../..";
@@ -74,7 +74,7 @@ export default function Indicator({
       }
 
       if (position) {
-        const pos = SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, position);
+        const pos = SceneTransforms.worldToWindowCoordinates(viewer.scene, position);
         setPos(pos);
         setIsVisible(true);
       } else {

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

@@ -12,8 +12,9 @@ import {
   type Ellipsoid,
   type Label,
 } from "@cesium/engine";
+import { DistanceDisplayCondition } from "cesium";
 import { merge, omit } from "lodash-es";
-import { type Feature } from "protomaps";
+import { type Feature } from "protomaps-leaflet";
 import { memo, useCallback, useEffect, useMemo, useRef, type FC } from "react";
 import { useCesium } from "resium";
 import { suspend } from "suspend-react";
@@ -170,6 +171,8 @@ export interface JapanGSIOptimalBVmapLabelImageryProps {
   height?: number;
   style?: AnnotationStyle;
   labelCollection?: LabelCollection;
+  near?: number;
+  far?: number;
 }
 
 export const JapanGSIOptimalBVmapLabelImagery: FC<JapanGSIOptimalBVmapLabelImageryProps> = memo(
@@ -180,6 +183,8 @@ export const JapanGSIOptimalBVmapLabelImagery: FC<JapanGSIOptimalBVmapLabelImage
     height = 50,
     style = defaultStyle,
     labelCollection,
+    near,
+    far,
   }) => {
     const cesiumContext = useCesium();
 
@@ -211,7 +216,7 @@ export const JapanGSIOptimalBVmapLabelImagery: FC<JapanGSIOptimalBVmapLabelImage
         return [];
       }
       return features.filter(
-        (feature): feature is AnnotationFeature =>
+        (feature: 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
@@ -228,7 +233,7 @@ export const JapanGSIOptimalBVmapLabelImagery: FC<JapanGSIOptimalBVmapLabelImage
       );
     }, [tile, imagery]);
 
-    const labelsRef = useRef<Array<[AnnotationFeature, Label]>>();
+    const labelsRef = useRef<Array<[AnnotationFeature, Label]>>(undefined);
     const scene = cesiumContext?.scene;
 
     const updateVisibility = useCallback(() => {
@@ -266,7 +271,7 @@ export const JapanGSIOptimalBVmapLabelImagery: FC<JapanGSIOptimalBVmapLabelImage
       }
       const texts: string[] = [];
       const labels = annotations
-        .map((feature): [AnnotationFeature, Label] | undefined => {
+        .map((feature: AnnotationFeature): [AnnotationFeature, Label] | undefined => {
           const styleOptions = resolveStyle(feature.props.vt_code, style);
           if (styleOptions == null) {
             return undefined;
@@ -282,6 +287,8 @@ export const JapanGSIOptimalBVmapLabelImagery: FC<JapanGSIOptimalBVmapLabelImage
             horizontalOrigin: HorizontalOrigin.CENTER,
             verticalOrigin: VerticalOrigin.BOTTOM,
             heightReference: HeightReference.CLAMP_TO_GROUND,
+            distanceDisplayCondition:
+              near || far ? new DistanceDisplayCondition(near, far) : undefined,
             disableDepthTestDistance: Infinity,
             ...styleOptions,
           };
@@ -294,7 +301,7 @@ export const JapanGSIOptimalBVmapLabelImagery: FC<JapanGSIOptimalBVmapLabelImage
 
       const removeLabels = (): void => {
         if (!labelCollection.isDestroyed()) {
-          labels.forEach(([, label]) => {
+          labels.forEach(([, label]: [AnnotationFeature, Label]) => {
             labelCollection.remove(label);
           });
         }
@@ -308,7 +315,7 @@ export const JapanGSIOptimalBVmapLabelImagery: FC<JapanGSIOptimalBVmapLabelImage
           scene?.postRender.addEventListener(removeLabels);
         }
       };
-    }, [style, annotations, scene, labelCollection]);
+    }, [style, annotations, scene, labelCollection, near, far]);
 
     useEffect(() => {
       updateVisibility();

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

@@ -11,7 +11,8 @@ import {
 import { ImageryLayerProps } from "./types";
 
 export interface LabelImageryLayerProps
-  extends Omit<ImageryLayerProps, "imageryProvider">,
+  extends
+    Omit<ImageryLayerProps, "imageryProvider">,
     JapanGSIOptimalBVmapLabelImageryProviderOptions {
   minimumLevel?: number;
   maximumLevel?: number;

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

@@ -11,7 +11,7 @@ import {
   type TileDiscardPolicy,
   type TilingScheme,
 } from "@cesium/engine";
-import { TileCache, ZxySource } from "protomaps";
+import { TileCache, ZxySource } from "protomaps-leaflet";
 
 import { getTileCoords, makeKey } from "./helpers";
 
@@ -93,8 +93,7 @@ export abstract class JapanGSIOptimalBVmapImageryProviderBase implements Imagery
   }
 }
 
-export interface JapanGSIOptimalBVmapLabelImageryProviderOptions
-  extends JapanGSIOptimalBVmapImageryProviderBaseOptions {
+export interface JapanGSIOptimalBVmapLabelImageryProviderOptions extends JapanGSIOptimalBVmapImageryProviderBaseOptions {
   url: string;
   minimumDataLevel: number;
   maximumDataLevel: number;
@@ -115,7 +114,7 @@ export class JapanGSIOptimalBVmapLabelImageryProvider extends JapanGSIOptimalBVm
     this.maximumDataLevel = options.maximumDataLevel;
 
     const source = new ZxySource(options.url, false);
-    this.tileCache = new TileCache(source, 1024);
+    this.tileCache = new TileCache(source, 256);
 
     this.image = document.createElement("canvas");
     this.image.width = 1;

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

@@ -143,7 +143,9 @@ const LabelImageryCollection: FC<{
   imageriesAtom: Atom<KeyedImagery[]>;
   style?: AnnotationStyle;
   labelCollection?: LabelCollection;
-}> = ({ imageryProvider, imageriesAtom, style, labelCollection }) => {
+  near?: number;
+  far?: number;
+}> = ({ imageryProvider, imageriesAtom, style, labelCollection, near, far }) => {
   const imageries = useAtomValue(imageriesAtom);
   return (
     <>
@@ -155,6 +157,8 @@ const LabelImageryCollection: FC<{
             descendants={imagery.descendants}
             style={style}
             labelCollection={labelCollection}
+            near={near}
+            far={far}
           />
         </Suspense>
       ))}
@@ -164,9 +168,15 @@ const LabelImageryCollection: FC<{
 
 export interface VectorMapLabelProps {
   style?: Record<string, any>;
+  near?: number;
+  far?: number;
 }
 
-export const JapanGSIOptimalBVmapVectorMapLabel: FC<VectorMapLabelProps> = ({ style }) => {
+export const JapanGSIOptimalBVmapVectorMapLabel: FC<VectorMapLabelProps> = ({
+  style,
+  near,
+  far,
+}) => {
   const [imageryProvider, setImageryProvider] =
     useState<JapanGSIOptimalBVmapLabelImageryProvider>();
   const setRef = useCallback((handle: CesiumComponentRef<CesiumImageryLayer> | null) => {
@@ -251,6 +261,8 @@ export const JapanGSIOptimalBVmapVectorMapLabel: FC<VectorMapLabelProps> = ({ st
           imageriesAtom={imageriesAtom}
           style={style}
           labelCollection={labels}
+          near={near}
+          far={far}
         />
       )}
     </>

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

@@ -1,4 +1,4 @@
-import { type Zxy } from "protomaps";
+import { type Zxy } from "protomaps-leaflet";
 
 import { type ImageryCoords } from "./types";
 

package/src/engines/Cesium/core/labels/LabelImageryLayers.tsx

@@ -8,6 +8,8 @@ export interface TileLabelConfig {
   labelType: "japan_gsi_optimal_bvmap";
   fillColor?: string;
   outlineColor?: string;
+  near?: number;
+  far?: number;
   style: Record<string, any>;
 }
 
@@ -23,7 +25,14 @@ const LabelImageryLayers = memo(
           if (!label) return null;
           switch (label.labelType) {
             case "japan_gsi_optimal_bvmap":
-              return <JapanGSIOptimalBVmapVectorMapLabel key={label.id} style={label.style} />;
+              return (
+                <JapanGSIOptimalBVmapVectorMapLabel
+                  key={label.id}
+                  style={label.style}
+                  near={label.near}
+                  far={label.far}
+                />
+              );
             default:
               return null;
           }