@reearth/core 0.0.7-alpha.12 → 0.0.7-alpha.14

package/dist/index.d.ts

@@ -1581,6 +1581,8 @@ export declare type TileLabelProperty = {
     id: string;
     labelType: "japan_gsi_optimal_bvmap";
     style: Record<string, any>;
+    near?: number;
+    far?: number;
 };
 
 export declare type TileProperty = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reearth/core",
-  "version": "0.0.7-alpha.12",
+  "version": "0.0.7-alpha.14",
   "author": "Re:Earth contributors <community@reearth.io>",
   "license": "Apache-2.0",
   "description": "A library that abstracts a map engine as one common API.",

package/src/Map/types/viewerProperty.ts

@@ -132,6 +132,8 @@ export type TileLabelProperty = {
   id: string;
   labelType: "japan_gsi_optimal_bvmap";
   style: Record<string, any>;
+  near?: number;
+  far?: number;
 };
 
 export type SkyProperty = {

package/src/engines/Cesium/common.ts

@@ -36,7 +36,7 @@ import {
   CameraEventType,
   KeyboardEventModifier,
 } from "cesium";
-import { useCallback, MutableRefObject } from "react";
+import { MutableRefObject, useMemo } from "react";
 
 import type { Camera, Clock } from "..";
 import { ClassificationType } from "../../mantle";
@@ -48,7 +48,7 @@ import type {
   OverideKeyboardEventModifier,
   ScreenSpaceCameraControllerOptions,
 } from "../../types";
-import { tweenInterval, useCanvas, useImage, LatLngHeight } from "../../utils";
+import { tweenInterval, useImage, LatLngHeight } from "../../utils";
 
 import { DEFAULT_SCREEN_SPACE_CAMERA_ASSIGNMENTS } from "./constants";
 
@@ -56,8 +56,7 @@ export const layerIdField = `__reearth_layer_id`;
 
 const defaultImageSize = 50;
 
-export const drawIcon = (
-  c: HTMLCanvasElement,
+const drawIcon = (
   image: HTMLImageElement | undefined,
   w: number,
   h: number,
@@ -68,6 +67,7 @@ export const drawIcon = (
   shadowOffsetX = 0,
   shadowOffsetY = 0,
 ) => {
+  const c = document.createElement("canvas");
   const ctx = c.getContext("2d");
   if (!image || !ctx) return;
 
@@ -104,6 +104,7 @@ export const drawIcon = (
   }
 
   ctx.restore();
+  return c.toDataURL();
 };
 
 export const useIcon = ({
@@ -138,13 +139,11 @@ export const useIcon = ({
       ? Math.floor(img.height * imageSize)
       : Math.floor((w / img.width) * img.height);
 
-  const draw = useCallback(
-    (can: HTMLCanvasElement) =>
-      drawIcon(can, img, w, h, crop, shadow, shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY),
+  const canvas = useMemo(
+    () => drawIcon(img, w, h, crop, shadow, shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY),
     [crop, h, img, shadow, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, w],
   );
-  const canvas = useCanvas(draw);
-  return [canvas, w, h];
+  return [canvas ?? "", w, h];
 };
 
 export const ho = (o: "left" | "center" | "right" | undefined): HorizontalOrigin | undefined =>

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

@@ -12,6 +12,7 @@ import {
   type Ellipsoid,
   type Label,
 } from "@cesium/engine";
+import { DistanceDisplayCondition } from "cesium";
 import { merge, omit } from "lodash-es";
 import { type Feature } from "protomaps";
 import { memo, useCallback, useEffect, useMemo, useRef, type FC } from "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();
 
@@ -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,
           };
@@ -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/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/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;
           }

package/src/utils/image.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 
 export const useImage = (src?: string): HTMLImageElement | undefined => {
   const imgRef = useRef<HTMLImageElement>();
@@ -23,13 +23,3 @@ export const useImage = (src?: string): HTMLImageElement | undefined => {
 
   return img;
 };
-
-export const useCanvas = (cb: (canvas: HTMLCanvasElement) => void): string => {
-  const can = useMemo(() => document.createElement("canvas"), []);
-  const [data, setData] = useState<string>("");
-  useEffect(() => {
-    cb(can);
-    setData(can.toDataURL());
-  }, [can, cb]);
-  return data;
-};