Angular中Leaflet地图崩溃求助：瓦片显示异常

核心问题与修复 #

你的地图容器使用了height: max-content，这是导致瓦片渲染错乱的直接原因。Leaflet地图需要明确的固定高度才能正确计算瓦片布局，将容器高度改为具体数值或百分比即可解决：

修改模板代码：

<div style="height: 600px;" leaflet [leafletOptions]="optionsMapTraceability"
(leafletMapReady)="onMapTraceabilityReady($event)" (leafletClick)="mapClicked($event)">
</div>

也可以根据需求使用height: 100vh（占满整个视口），但要确保父容器没有设置overflow: hidden等冲突样式。

原因说明 #

Leaflet初始化时会基于容器的实际尺寸计算瓦片的排列位置和加载范围。max-content会让容器高度随地图内容动态变化，地图加载过程中容器尺寸不稳定，导致瓦片的坐标计算出现偏差，最终显示错乱。其他组件正常是因为它们的地图容器设置了固定高度。

额外排查点（若上述修复无效） #

• 检查当前组件是否有特殊CSS样式干扰地图容器，比如transform属性、错误的position定位，或者overflow设置异常
• 确认全局样式中已正确引入Leaflet的CSS文件（leaflet/dist/leaflet.css），避免因样式缺失导致渲染问题
• 若组件存在异步加载逻辑，确保地图容器已完全渲染后再初始化地图（angular-leaflet-directive通常会自动处理，但可通过*ngIf控制容器渲染时机）

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