feat: support wmts in reearth/core

.storybook/main.ts

@@ -33,6 +33,7 @@ const config: StorybookViteConfig = {
             }
           : {},
       resolve: {
+        dedupe: ["@storybook/client-api"],
         alias: [
           { find: "crypto", replacement: "crypto-js" }, // quickjs-emscripten
           { find: "@reearth", replacement: resolve(__dirname, "..", "src") },

src/config/index.ts

@@ -1,6 +1,6 @@
 import { Viewer } from "cesium";
 
-import { Extensions, loadExtensions } from "./extensions";
+import { Extensions } from "./extensions";
 
 export type Config = {
   version?: string;
@@ -152,10 +152,10 @@ export default async function loadConfig() {
     );
   }
 
-  if (config?.extensionUrls) {
-    const extensions = await loadExtensions(config.extensionUrls);
-    config.extensions = extensions;
-  }
+  // if (config?.extensionUrls) {
+  //   const extensions = await loadExtensions(config.extensionUrls);
+  //   config.extensions = extensions;
+  // }
 
   window.REEARTH_CONFIG = config;
 }

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,30 @@ export const useWMS = ({
   useImageryProvider(imageryProvider);
 };
 
+export const useWMTS = ({
+  isVisible,
+  layer,
+  property,
+}: Pick<Props, "isVisible" | "property" | "layer">) => {
+  const { credit } = property ?? {};
+
+  const { type, url, layers } = useData(layer);
+  const [imageryProvider, setImageryProvider] = useState<ImageryProvider>();
+
+  useEffect(() => {
+    const getImageryProvider = async () => {
+      console.log("getImageryProvider called");
+      const provider = await getWMTSImageryProvider(url, layers, credit);
+      setImageryProvider(provider);
+    };
+    if (isVisible && type === "wmts") {
+      getImageryProvider();
+    }
+  }, [isVisible, type, url, layers, credit]);
+
+  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: "http://basemap.nationalmap.gov/arcgis/rest/services/USGSShadedReliefOnly/MapServer/WMTS",
+        layers: "USGSShadedReliefOnly",
+      },
+      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, property });
   useWMS({ isVisible, layer, property });
   useMVT({ isVisible, layer, property, evalFeature, onComputedFeatureFetch, onFeatureDelete });