Refine map tile updates and enhance performance

- Updated tile freshness animation to reduce flicker and improve visual clarity.
- Modified MapView component to optimize layer visibility handling and ensure proper map resizing on fullscreen toggle.
- Increased tile buffer size in map initialization for better tile loading efficiency.
- Implemented logic to limit tile updates to only visible tiles, enhancing rendering performance during map updates.

frontend-nuxt/composables/useMapInit.ts

@@ -72,7 +72,7 @@ export async function initLeafletMap(
     zoomReverse: true,
     tileSize: TileSize,
     updateWhenIdle: true,
-    keepBuffer: 2,
+    keepBuffer: 4,
   })
   layer.map = initialMapId
   layer.invalidTile =
@@ -88,7 +88,7 @@ export async function initLeafletMap(
     tileSize: TileSize,
     opacity: 0.5,
     updateWhenIdle: true,
-    keepBuffer: 2,
+    keepBuffer: 4,
   })
   overlayLayer.map = -1
   overlayLayer.invalidTile =

frontend-nuxt/composables/useMapUpdates.ts

@@ -57,6 +57,21 @@ export function startMapUpdates(options: UseMapUpdatesOptions): UseMapUpdatesRet
   let batch: TileUpdate[] = []
   let batchScheduled = false
 
+  const VISIBLE_TILE_BUFFER = 1
+
+  function getVisibleTileBounds() {
+    const zoom = map.getZoom()
+    const px = map.getPixelBounds()
+    if (!px) return null
+    return {
+      zoom,
+      minX: Math.floor(px.min.x / TileSize) - VISIBLE_TILE_BUFFER,
+      maxX: Math.ceil(px.max.x / TileSize) + VISIBLE_TILE_BUFFER,
+      minY: Math.floor(px.min.y / TileSize) - VISIBLE_TILE_BUFFER,
+      maxY: Math.ceil(px.max.y / TileSize) + VISIBLE_TILE_BUFFER,
+    }
+  }
+
   function applyBatch() {
     batchScheduled = false
     if (batch.length === 0) return
@@ -67,7 +82,14 @@ export function startMapUpdates(options: UseMapUpdatesOptions): UseMapUpdatesRet
       layer.cache[key] = u.T
       overlayLayer.cache[key] = u.T
     }
+    const visible = getVisibleTileBounds()
     for (const u of updates) {
+      if (visible && u.Z !== visible.zoom) continue
+      if (
+        visible &&
+        (u.X < visible.minX || u.X > visible.maxX || u.Y < visible.minY || u.Y > visible.maxY)
+      )
+        continue
       if (layer.map === u.M) layer.refresh(u.X, u.Y, u.Z)
       if (overlayLayer.map === u.M) overlayLayer.refresh(u.X, u.Y, u.Z)
     }