perf: improve mvt rendering on reearth/core (#501)

* perf: improve mvt rendering on reearth/core * feat: upgrade mvt lib
reearth · Mar 1, 2023 · 8a681de · 8a681de
1 parent f8e1293
commit 8a681de
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -113,7 +113,7 @@
         "axios": "1.2.2",
         "cesium": "1.101.0",
         "cesium-dnd": "1.1.0",
-        "cesium-mvt-imagery-provider": "1.1.0",
+        "cesium-mvt-imagery-provider": "1.1.3",
         "core-js": "3.27.1",
         "crypto-js": "4.1.1",
         "csv-parse": "5.3.3",

diff --git a/src/core/engines/Cesium/Feature/Raster/hooks.ts b/src/core/engines/Cesium/Feature/Raster/hooks.ts
@@ -140,23 +140,28 @@ export const useMVT = ({
       credit,
       urlTemplate: url as `http${"s" | ""}://${string}/{z}/{x}/{y}${string}`,
       layerName: layers,
-      onRenderFeature: (mvtFeature, tile) => {
-        const id = idFromGeometry(mvtFeature.loadGeometry(), tile);
-        if (!cachedFeatureIdsRef.current.has(id)) {
-          shouldSyncFeatureRef.current = true;
-        }
+      onRenderFeature: () => {
         return true;
       },
       onFeaturesRendered: () => {
         if (shouldSyncFeatureRef.current) {
-          onComputedFeatureFetch?.(tempFeaturesRef.current, tempComputedFeaturesRef.current);
+          const features = tempFeaturesRef.current;
+          const computedFeatures = tempComputedFeaturesRef.current;
+          requestAnimationFrame(() => {
+            onComputedFeatureFetch?.(features, computedFeatures);
+          });
           tempFeaturesRef.current = [];
           tempComputedFeaturesRef.current = [];
           shouldSyncFeatureRef.current = false;
         }
       },
       style: (mvtFeature, tile) => {
         const id = idFromGeometry(mvtFeature.loadGeometry(), tile);
+        if (!cachedFeatureIdsRef.current.has(id)) {
+          shouldSyncFeatureRef.current = true;
+          cachedFeatureIdsRef.current.add(id);
+        }
+
         const [feature, computedFeature] =
           ((): [Feature | undefined, ComputedFeature | undefined] | void => {
             const layer = cachedCalculatedLayerRef.current?.layer;

diff --git a/yarn.lock b/yarn.lock
@@ -8140,10 +8140,10 @@ cesium-dnd@1.1.0:
   resolved "https://registry.yarnpkg.com/cesium-dnd/-/cesium-dnd-1.1.0.tgz#30c7232eec9f84ad0d4f2c959cbd61ac29028086"
   integrity sha512-Peo0bGIg5eOO/BrVDCovkPhQnWW3GBAjVnghh5NVmavDZjqS+A5R4Yj3IOG9tmYNSdtunsDqj5yxnMxQWx/KAA==
 
-cesium-mvt-imagery-provider@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/cesium-mvt-imagery-provider/-/cesium-mvt-imagery-provider-1.1.0.tgz#46d69a063168eb91268316d59463f59bdaab9e35"
-  integrity sha512-0fzwdesDZ6IdfBSQNQInlKY0D6tZ32Q5E66rX2l/Vrhp+UXaa4/O+MA8iB/5uP+thzq1lDTT2jYJHrNEcFMqHA==
+cesium-mvt-imagery-provider@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/cesium-mvt-imagery-provider/-/cesium-mvt-imagery-provider-1.1.3.tgz#e6ca1c8341925b416ed3dbff80fc94ad8524c952"
+  integrity sha512-UEP/AZbyy678UKKt1T6FXIHtLAyYg21Jnh9xSeHTCjhh4I9zz0bJaoVekwUk5qgsohhj/ouwS3s9Om6CVLmr9w==
   dependencies:
     "@mapbox/vector-tile" "^1.3.1"
     pbf "^3.2.1"