feat: add alpha property to raster appearance on reearth/core (#555)

* feat: add alpha property to raster appearance on reearth/core * fix
reearth · Mar 17, 2023 · 541f301 · 541f301
1 parent f95d27a
commit 541f301
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/src/core/engines/Cesium/Feature/Model/index.tsx b/src/core/engines/Cesium/Feature/Model/index.tsx
@@ -64,7 +64,7 @@ export default function Model({ id, isVisible, property, geometry, layer, featur
     silhouetteSize = 1,
   } = property ?? {};
 
-  const actualUrl = useMemo(() => model || url || data?.url, [layer, model, url]);
+  const actualUrl = useMemo(() => model || url || data?.url, [model, url, data?.url]);
   const orientation = useMemo(
     () =>
       bearing

diff --git a/src/core/engines/Cesium/Feature/Raster/hooks.ts b/src/core/engines/Cesium/Feature/Raster/hooks.ts
@@ -10,7 +10,13 @@ import { isEqual, pick } from "lodash-es";
 import { useEffect, useMemo, useRef } from "react";
 import { useCesium } from "resium";
 
-import type { ComputedFeature, ComputedLayer, Feature, PolygonAppearance } from "../../..";
+import type {
+  ComputedFeature,
+  ComputedLayer,
+  Feature,
+  PolygonAppearance,
+  RasterAppearance,
+} from "../../..";
 import { usePick } from "../hooks";
 import { attachTag, extractSimpleLayer, extractSimpleLayerData, generateIDWithMD5 } from "../utils";
 
@@ -19,17 +25,22 @@ import { Props } from "./types";
 const useImageryProvider = (
   imageryProvider: ImageryProvider | undefined,
   layerId: string | undefined,
+  property: RasterAppearance | undefined,
 ) => {
   const { viewer } = useCesium();
+  const alpha = property?.alpha;
   useEffect(() => {
     if (!imageryProvider) return;
     const imageryLayers: ImageryLayerCollection = viewer.imageryLayers;
-    const layer = imageryLayers.addImageryProvider(imageryProvider);
-    attachTag(layer, { layerId });
+    const imageryLayer = imageryLayers.addImageryProvider(imageryProvider);
+    if (alpha !== undefined && typeof alpha === "number") {
+      imageryLayer.alpha = alpha;
+    }
+    attachTag(imageryLayer, { layerId });
     return () => {
-      imageryLayers.remove(layer);
+      imageryLayers.remove(imageryLayer);
     };
-  }, [imageryProvider, viewer, layerId]);
+  }, [imageryProvider, viewer, layerId, alpha]);
 };
 
 const useData = (layer: ComputedLayer | undefined) => {
@@ -68,7 +79,7 @@ export const useWMS = ({
     });
   }, [isVisible, show, url, layers, type, minimumLevel, maximumLevel, credit, parameters]);
 
-  useImageryProvider(imageryProvider, layer?.id);
+  useImageryProvider(imageryProvider, layer?.id, property);
 };
 
 type TileCoords = { x: number; y: number; level: number };
@@ -202,7 +213,7 @@ export const useMVT = ({
     cachedCalculatedLayerRef.current = layer;
   }, [layer]);
 
-  useImageryProvider(imageryProvider, layer?.id);
+  useImageryProvider(imageryProvider, layer?.id, property);
 };
 
 const polygonAppearanceFields: (keyof PolygonAppearance)[] = [

diff --git a/src/core/mantle/types/appearance.ts b/src/core/mantle/types/appearance.ts
@@ -173,6 +173,7 @@ export type RasterAppearance = {
   minimumLevel?: number;
   maximumLevel?: number;
   credit?: string;
+  alpha?: number;
 };
 
 export type BoxAppearance = {