Speed up loading

Author: siyuanZHANG01

docs/js/map.js

@@ -5,7 +5,9 @@ const MapView = (() => {
   let anchorLayer     = null;
   let portLayer       = null;
   let portMarkers     = {};
-  let globalCanvas    = null;
+  let _globalLayer    = null;
+  let _globalRenderer = null;
+  let _portRenderer   = null;
   let _heatLayer      = null;
 
   // ── Land mask ──────────────────────────────────────────────────────────────
@@ -20,7 +22,6 @@ const MapView = (() => {
       const ctx = c.getContext("2d");
       ctx.drawImage(img, 0, 0, _LM_W, _LM_H);
       _landMaskData = ctx.getImageData(0, 0, _LM_W, _LM_H).data;
-      if (globalCanvas) globalCanvas._requestDraw();
     };
     img.src = "data/land_mask.png";
   }
@@ -189,94 +190,55 @@ const MapView = (() => {
   }
   function clearAnchorZones() { anchorLayer.clearLayers(); }
 
-  // ── Global overlay — L.canvas renderer lives inside leaflet-overlay-pane,
-  //    so it participates in Leaflet's CSS zoom animation with zero lag.
-  const GlobalCanvasOverlay = L.Layer.extend({
-    _data: [], _filters: {}, _renderer: null, _layer: null,
-
-    setData(data, filters) {
-      this._data    = data;
-      this._filters = filters;
-      if (this._map) this._redraw();
-    },
-
-    onAdd(map) {
-      this._map      = map;
-      this._renderer = L.canvas({ padding: 0.5 });
-      this._layer    = L.layerGroup().addTo(map);
-      this._redraw();
-    },
-
-    onRemove(map) {
-      if (this._layer)    { this._layer.clearLayers(); map.removeLayer(this._layer); }
-      if (this._renderer) { this._renderer.remove(); }
-      this._layer = this._renderer = this._map = null;
-    },
-
-    _redraw() {
-      if (!this._layer || !this._renderer) return;
-      this._layer.clearLayers();
-
-      const { activeTypes, currentTimeOfDay, timeWindow, currentMonth, dateRange } = this._filters;
-
-      for (const traj of this._data) {
-        if (activeTypes && !activeTypes.has(traj.vessel_type))           continue;
-        if (!_passesTodFilter(traj, currentTimeOfDay, timeWindow ?? 30)) continue;
-        if (!_passesMonthFilter(traj, currentMonth))                     continue;
-        if (!_passesDateFilter(traj, dateRange))                         continue;
-
-        const pts = traj.points;
-        if (!pts || pts.length < 2) continue;
-        if (pts.reduce((s, p) => s + (p.sog || 0), 0) / pts.length > 50) continue;
-
-        // Accumulate consecutive same-color points into one polyline.
-        // Break on: distance gap, land crossing, or SOG color change.
-        let seg      = [pts[0]];
-        let segColor = _sogColor(pts[0].sog || 0);
-
-        const flush = (color) => {
-          if (seg.length >= 2) {
-            L.polyline(seg.map(p => [p.lat, p.lon]), {
-              renderer:            this._renderer,
-              interactive:         false,
-              bubblingMouseEvents: false,
-              color,
-              weight:      1.1,
-              opacity:     0.45,
-              smoothFactor: 1.0,
-            }).addTo(this._layer);
-          }
-        };
-
-        for (let i = 1; i < pts.length; i++) {
-          const a = pts[i - 1], b = pts[i];
-          const tooFar = haversineKm(a, b) > GLOBAL_MAX_STEP_KM;
-          const onLand = _crossesLand(a, b);
-          const col    = _sogColor(((a.sog || 0) + (b.sog || 0)) / 2);
-
-          if (tooFar || onLand) {
-            flush(segColor);
-            seg = [b];
-            segColor = _sogColor(b.sog || 0);
-          } else if (col !== segColor) {
-            seg.push(b);           // include b for visual continuity
-            flush(segColor);
-            seg = [b];
-            segColor = col;
-          } else {
-            seg.push(b);
-          }
-        }
-        flush(segColor);
-      }
-    },
-  });
+  // ── Global trajectory layer ────────────────────────────────────────────────
+  // Six L.polyline multipolylines — one per SOG colour — each holding ALL
+  // visible segments of that colour as an array of 2-point sub-arrays.
+  // Leaflet renders each as a single canvas/SVG path (M…L M…L …).
+  // Clearing costs 6 removeLayer calls ≈ zero.  L.canvas renderer keeps the
+  // drawing canvas in overlayPane, so CSS zoom-animation syncs natively.
 
-  function _ensureGlobalCanvas() {
-    if (!globalCanvas) { globalCanvas = new GlobalCanvasOverlay(); globalCanvas.addTo(map); }
+  function _ensureGlobalLayer() {
+    if (!_globalRenderer) _globalRenderer = L.canvas({ padding: 0.5 });
+    if (!_globalLayer)    _globalLayer    = L.layerGroup().addTo(map);
   }
-  function _removeGlobalCanvas() {
-    if (globalCanvas) { map.removeLayer(globalCanvas); globalCanvas = null; }
+
+  function _removeGlobalLayer() {
+    if (_globalLayer) {
+      map.removeLayer(_globalLayer);   // only 6 multipolylines — near-instant
+      _globalLayer    = null;
+      _globalRenderer = null;
+    }
+  }
+
+  function _buildGlobalPolylines(trajectories, f) {
+    const { activeTypes, currentTimeOfDay, timeWindow, currentMonth, dateRange } = f;
+    const byColor = {};
+
+    for (const traj of trajectories) {
+      if (activeTypes && !activeTypes.has(traj.vessel_type))           continue;
+      if (!_passesTodFilter(traj, currentTimeOfDay, timeWindow ?? 30)) continue;
+      if (!_passesMonthFilter(traj, currentMonth))                     continue;
+      if (!_passesDateFilter(traj, dateRange))                         continue;
+
+      const pts = traj.points;
+      if (!pts || pts.length < 2) continue;
+      if (pts.reduce((s, p) => s + (p.sog || 0), 0) / pts.length > 50) continue;
+
+      for (let i = 0; i < pts.length - 1; i++) {
+        const a = pts[i], b = pts[i + 1];
+        if (haversineKm(a, b) > GLOBAL_MAX_STEP_KM || _crossesLand(a, b)) continue;
+        const col = _sogColor(((a.sog || 0) + (b.sog || 0)) / 2);
+        if (!byColor[col]) byColor[col] = [];
+        byColor[col].push([[a.lat, a.lon], [b.lat, b.lon]]);
+      }
+    }
+
+    for (const [col, segs] of Object.entries(byColor)) {
+      L.polyline(segs, {
+        renderer: _globalRenderer, color: col,
+        weight: 1.1, opacity: 0.45, interactive: false, smoothFactor: 0,
+      }).addTo(_globalLayer);
+    }
   }
 
   function _drawPortTraj(traj, f) {
@@ -302,34 +264,40 @@ const MapView = (() => {
         <div class="vp-row">Avg SOG <span>${avgSog} kn</span></div>
       </div>`;
 
+    if (!_portRenderer) _portRenderer = L.canvas();
     segs.forEach(seg => {
       L.polyline(seg.map(p => [p.lat, p.lon]), {
+        renderer: _portRenderer,
         color: style.color, weight: style.weight, opacity: style.opacity, smoothFactor: 1.2,
       }).addTo(trajectoryLayer).bindPopup(popup, { maxWidth: 200 });
     });
   }
 
   function drawTrajectories(trajectories, filters = {}, isGlobal = false) {
-    trajectoryLayer.clearLayers();
     const f = {
       activeTypes:      filters.activeTypes      || null,
       activePatterns:   filters.activePatterns   || null,
       currentTimeOfDay: filters.currentTimeOfDay != null ? filters.currentTimeOfDay : null,
       timeWindow:       filters.timeWindow       != null ? filters.timeWindow       : 30,
       dateRange:        filters.dateRange        || null,
     };
+
     if (isGlobal) {
-      _ensureGlobalCanvas();
-      globalCanvas.setData(trajectories, f);
+      trajectoryLayer.clearLayers();
+      _removeGlobalLayer();
+      if (!trajectories.length) return;
+      _ensureGlobalLayer();
+      _buildGlobalPolylines(trajectories, f);   // synchronous: builds 6 multipolylines
     } else {
-      _removeGlobalCanvas();
-      trajectories.forEach(t => _drawPortTraj(t, f));
+      _removeGlobalLayer();
+      trajectoryLayer.clearLayers();
+      trajectories.forEach(traj => _drawPortTraj(traj, f));  // synchronous: L.Canvas, no DOM
     }
   }
 
   function clearTrajectories() {
     trajectoryLayer.clearLayers();
-    _removeGlobalCanvas();
+    _removeGlobalLayer();
   }
 
   function setHeatData(points) {