Enhance map updates and component performance

- Updated API documentation to clarify the initial data message structure for real-time tile updates.
- Modified MapView component to load configuration and user data in parallel, improving map loading speed.
- Implemented asynchronous loading for markers after the map is visible, enhancing user experience.
- Introduced batching for tile updates to optimize rendering performance during map updates.
- Refactored character and marker creation functions to utilize dynamic Leaflet imports, improving modularity.

frontend-nuxt/composables/useMapUpdates.ts

@@ -53,6 +53,32 @@ export function startMapUpdates(options: UseMapUpdatesOptions): UseMapUpdatesRet
     if (connectionStateRef) connectionStateRef.value = 'error'
   }
 
+  const BATCH_MS = 50
+  let batch: TileUpdate[] = []
+  let batchScheduled = false
+
+  function applyBatch() {
+    batchScheduled = false
+    if (batch.length === 0) return
+    const updates = batch
+    batch = []
+    for (const u of updates) {
+      const key = `${u.M}:${u.X}:${u.Y}:${u.Z}`
+      layer.cache[key] = u.T
+      overlayLayer.cache[key] = u.T
+    }
+    for (const u of updates) {
+      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)
+    }
+  }
+
+  function scheduleBatch() {
+    if (batchScheduled) return
+    batchScheduled = true
+    setTimeout(applyBatch, BATCH_MS)
+  }
+
   source.onmessage = (event: MessageEvent) => {
     if (connectionStateRef) connectionStateRef.value = 'open'
     try {
@@ -61,12 +87,9 @@ export function startMapUpdates(options: UseMapUpdatesOptions): UseMapUpdatesRet
       const updates: unknown = JSON.parse(raw)
       if (!Array.isArray(updates)) return
       for (const u of updates as TileUpdate[]) {
-        const key = `${u.M}:${u.X}:${u.Y}:${u.Z}`
-        layer.cache[key] = u.T
-        overlayLayer.cache[key] = u.T
-        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)
+        batch.push(u)
       }
+      scheduleBatch()
     } catch {
       // Ignore parse errors from SSE
     }