feat: support wmts in reearth/core

src/core/engines/Cesium/Feature/Raster/hooks.ts

@@ -7,13 +7,14 @@ import {
 } from "cesium";
 import { MVTImageryProvider } from "cesium-mvt-imagery-provider";
 import md5 from "js-md5";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useCesium } from "resium";
 
 import type { ComputedFeature, ComputedLayer, Feature } from "../../..";
 import { extractSimpleLayer, extractSimpleLayerData } from "../utils";
 
 import { Props } from "./types";
+import { getWMTSImageryProvider } from "./wmts";
 
 const useImageryProvider = (imageryProvider: ImageryProvider | undefined) => {
   const { viewer } = useCesium();
@@ -64,6 +65,25 @@ export const useWMS = ({
   useImageryProvider(imageryProvider);
 };
 
+export const useWMTS = async ({ isVisible, layer }: Pick<Props, "isVisible" | "layer">) => {
+  const { type, url, layers } = useData(layer);
+  const [imageryProvider, setImageryProvider] = useState<ImageryProvider>();
+
+  console.log("Reached HERE");
+
+  useEffect(() => {
+    const getImageryProvider = async () => {
+      const provider = await getWMTSImageryProvider(url, layers);
+      setImageryProvider(provider);
+    };
+    if (isVisible && type === "wmts") {
+      getImageryProvider();
+    }
+  }, [isVisible, type, url, layers]);
+
+  useImageryProvider(imageryProvider);
+};
+
 type TileCoords = { x: number; y: number; level: number };
 
 const idFromGeometry = (

src/core/engines/Cesium/Feature/Raster/index.stories.tsx

@@ -42,6 +42,37 @@ WMS.args = {
   },
 };
 
+export const WMTS = Template.bind([]);
+WMTS.args = {
+  engine: "cesium",
+  engines: {
+    cesium: engine,
+  },
+  ready: true,
+  layers: [
+    {
+      id: "l",
+      type: "simple",
+      data: {
+        type: "wmts",
+        url: "https://soggy2.zoology.ubc.ca/geoserver/gwc/service/wmts?",
+        layers: "dem_ssea_27m",
+      },
+      raster: {
+        maximumLevel: 100,
+      },
+    },
+  ],
+  property: {
+    tiles: [
+      {
+        id: "default",
+        tile_type: "default",
+      },
+    ],
+  },
+};
+
 export const MVT = Template.bind([]);
 MVT.args = {
   engine: "cesium",

src/core/engines/Cesium/Feature/Raster/index.tsx

@@ -3,7 +3,7 @@ import { memo } from "react";
 
 import { extractSimpleLayer, extractSimpleLayerData, type FeatureComponentConfig } from "../utils";
 
-import { useMVT, useWMS } from "./hooks";
+import { useMVT, useWMS, useWMTS } from "./hooks";
 import type { Props } from "./types";
 
 function Raster({
@@ -14,6 +14,7 @@ function Raster({
   evalFeature,
   onFeatureDelete,
 }: Props) {
+  useWMTS({ isVisible, layer });
   useWMS({ isVisible, layer, property });
   useMVT({ isVisible, layer, property, evalFeature, onComputedFeatureFetch, onFeatureDelete });