From 541f30147b30fa6d6ec26a1b6411767f84253eff Mon Sep 17 00:00:00 2001
From: keiya sasaki <keiya.s.0210@gmail.com>
Date: Fri, 17 Mar 2023 12:10:01 +0900
Subject: [PATCH] feat: add alpha property to raster appearance on reearth/core
 (#555)

* feat: add alpha property to raster appearance on reearth/core

* fix
---
 .../engines/Cesium/Feature/Model/index.tsx    |  2 +-
 .../engines/Cesium/Feature/Raster/hooks.ts    | 25 +++++++++++++------
 src/core/mantle/types/appearance.ts           |  1 +
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/core/engines/Cesium/Feature/Model/index.tsx b/src/core/engines/Cesium/Feature/Model/index.tsx
index 81a2d773a6..badfca8ef5 100644
--- 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
index 7c49aa6fa4..775a9eb438 100644
--- 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
index da405cb2f0..a989561c99 100644
--- 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 = {