import { useMemo } from "react";
import { ImageryLayer } from "resium";
import { WebMapServiceImageryProvider } from "cesium";

const url = "http://analysis.tpdc.ac.cn/gs/geoserver/phitrellis/wms";
const name = "phitrellis:4_3_hadisst_1822";

function OceanImageLayer() {
  const tempProvider = useMemo(
    () =>
      new WebMapServiceImageryProvider({
        url: url,
        layers: name,
        parameters: {
          service: "WMS",
          format: "image/png",
          transparent: true,
        },
      }),
    [name, url]
  );
  return (
    <ImageryLayer
      key={`ImageryLayer-${name}`}
      imageryProvider={tempProvider}
      show={true}
      opacity={0.5}
    />
  );
}

export default OceanImageLayer;
