fix: canvas插入到Leaflet tilePane之后,确保在最上层渲染
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -2753,20 +2753,34 @@ function trafficAnimate(timestamp) {
|
||||
_trafficAnimId = requestAnimationFrame(trafficAnimate);
|
||||
}
|
||||
|
||||
let _trafficLeafletLayer = null;
|
||||
|
||||
function _ensureTrafficCanvas() {
|
||||
const container = document.getElementById('saMap');
|
||||
if (!container) return null;
|
||||
// Use Leaflet's internal renderer canvas for proper layering
|
||||
if (!SA.map) return null;
|
||||
// Access the internal canvas renderer
|
||||
const pane = SA.map.getPane('overlayPane');
|
||||
if (!pane) return null;
|
||||
let c = document.getElementById('saTrafficCanvas');
|
||||
if (!c) {
|
||||
c = document.createElement('canvas');
|
||||
c.id = 'saTrafficCanvas';
|
||||
c.style.cssText = 'position:absolute;top:0;left:0;pointer-events:none;z-index:99999;';
|
||||
container.appendChild(c);
|
||||
}
|
||||
const rect = container.getBoundingClientRect();
|
||||
if (c.width !== rect.width || c.height !== rect.height) {
|
||||
c.width = rect.width; c.height = rect.height;
|
||||
c.style.width = rect.width + 'px'; c.style.height = rect.height + 'px';
|
||||
c.width = SA.map.getSize().x; c.height = SA.map.getSize().y;
|
||||
c.style.width = c.width + 'px'; c.style.height = c.height + 'px';
|
||||
// Insert AFTER the Leaflet canvas (tile pane)
|
||||
const tilePane = SA.map.getPane('tilePane');
|
||||
if (tilePane && tilePane.parentNode) {
|
||||
tilePane.parentNode.appendChild(c);
|
||||
} else {
|
||||
pane.appendChild(c);
|
||||
}
|
||||
// Resize handler
|
||||
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';
|
||||
});
|
||||
}
|
||||
return c;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user