From 55b1d0a7a235dadc7d3ecb1d6fb8ac7fca61c2f0 Mon Sep 17 00:00:00 2001
From: TianXuan Developer <developer@tianxuan.local>
Date: Sat, 25 Jul 2026 09:24:45 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20canvas=E5=9B=9Emap=E5=86=85+position:rel?=
 =?UTF-8?q?ative=E9=81=BF=E5=85=8D=E9=94=99=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

_ensureFlowLayer: canvas作为#saMap子元素,
position:absolute;top:0;left:0, resize事件同步尺寸
不再需要在map外部计算偏移

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../simple_analysis/simple_analysis.html      | 21 ++++---------------
 1 file changed, 4 insertions(+), 17 deletions(-)

diff --git a/simple_analysis/templates/simple_analysis/simple_analysis.html b/simple_analysis/templates/simple_analysis/simple_analysis.html
index f475d40..4854f72 100644
--- a/simple_analysis/templates/simple_analysis/simple_analysis.html
+++ b/simple_analysis/templates/simple_analysis/simple_analysis.html
@@ -2759,32 +2759,19 @@ let _trafficCanvasCtx = null;
 
 function _ensureFlowLayer() {
     if (!SA.map) return null;
-    if (_trafficFlowLayer) return _trafficFlowLayer;
-    // Insert canvas AFTER map container, positioned to cover the map
+    if (_trafficFlowLayer && _trafficFlowLayer.parentNode) return _trafficFlowLayer;
     const mapEl = SA.map.getContainer();
     const c = document.createElement('canvas');
     c.id = 'saTrafficCanvasOverlay';
-    c.style.cssText = 'position:absolute; top:0; left:0; pointer-events:none; z-index:99999;';
-    // Insert after map container in DOM
-    mapEl.parentNode.insertBefore(c, mapEl.nextSibling);
-    // Size to match map
+    c.style.cssText = 'position:absolute;top:0;left:0;pointer-events:none;z-index:10000;';
+    mapEl.appendChild(c);
     const size = SA.map.getSize();
     c.width = size.x; c.height = size.y;
     c.style.width = size.x + 'px'; c.style.height = size.y + 'px';
-    // Position overlay over map
-    const mapRect = mapEl.getBoundingClientRect();
-    const parentRect = mapEl.parentNode.getBoundingClientRect();
-    c.style.left = (mapRect.left - parentRect.left) + 'px';
-    c.style.top = (mapRect.top - parentRect.top) + 'px';
-    // Update on map changes
-    SA.map.on('resize move zoomend', () => {
+    SA.map.on('resize', () => {
         const s = SA.map.getSize();
         c.width = s.x; c.height = s.y;
         c.style.width = s.x + 'px'; c.style.height = s.y + 'px';
-        const mr = mapEl.getBoundingClientRect();
-        const pr = mapEl.parentNode.getBoundingClientRect();
-        c.style.left = (mr.left - pr.left) + 'px';
-        c.style.top = (mr.top - pr.top) + 'px';
     });
     _trafficCanvasCtx = c.getContext('2d');
     _trafficFlowLayer = c;