Electron中Leaflet地图瓦片加载不全且窗口缩放错乱问题排查

你遇到的是Leaflet在Electron环境里很常见的容器尺寸识别问题，主要有两个核心调整点，咱们一步步来解决：

1. 给地图容器设置明确的尺寸 #

你的#map元素没有定义宽高样式，Leaflet没法正确计算瓦片的加载范围，这是瓦片加载不全的核心原因。修改你的index.html，在<head>里添加样式：

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style>
    body { margin: 0; padding: 0; }
    #map { width: 100vw; height: 100vh; }
  </style>
</head>
<body>
  <div id="map"></div>
</body>
<script> require('./renderer') </script>
</html>

这里把body的边距清零，让地图容器直接占满整个窗口，避免留白干扰尺寸计算。

2. 监听窗口resize事件，触发Leaflet重新计算尺寸 #

Electron窗口缩放时，Leaflet不会自动感知容器的尺寸变化，这就导致了瓦片错乱。你需要在renderer.js里添加resize监听，调用Leaflet的invalidateSize()方法强制重新计算：

window.L = require('leaflet')
// 这步很容易忘！必须引入Leaflet的官方样式文件
require('leaflet/dist/leaflet.css')

var map = L.map('map').setView([51.0420175, 13.7358889], 12)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// 监听窗口缩放，让Leaflet同步更新地图尺寸
window.addEventListener('resize', () => {
  map.invalidateSize();
});

另外补充个小细节：如果初始化时还是偶尔出现瓦片加载不全，可以在地图创建后延迟调用一次invalidateSize，确保Electron完全渲染完容器：

setTimeout(() => {
  map.invalidateSize();
}, 100);

调整完这几点，地图应该就能正常加载瓦片，窗口缩放时也不会出现错乱了。

内容的提问来源于stack exchange，提问作者Trevirius