当使用 Leaflet 初始化地图并在后续操作中动态更改地图容器的宽度时，可能会出现地图新增加的部分没有请求瓦片的情况。这是因为 Leaflet 在初始化时计算并缓存了地图的尺寸，当容器的尺寸发生变化时，地图没有自动刷新来适应新的尺寸。

为了解决这个问题，需要在动态更改容器宽度后调用 Leaflet 的 invalidateSize 方法来通知地图重新计算和刷新其尺寸。以下是一个示例，演示了如何正确地动态更改地图容器的宽度并刷新地图：

解决Leaflet地图初始化后更改容器宽度，新增部分瓦片没有请求问题_html

关键步骤：

  1. 初始化地图：创建一个 Leaflet 地图实例并添加瓦片图层。
  2. 动态更改宽度：通过按钮点击事件动态更改地图容器的宽度。
  3. 调用 invalidateSize 方法：在更改容器宽度后调用 map.invalidateSize()，强制地图重新计算并刷新其尺寸。这一步很重要，否则新增加的部分不会加载瓦片。

注意事项：

  • 在调整容器大小后，添加适当的延时（如示例中的 500 毫秒），确保 invalidateSize 在过渡完成后被调用，以便 Leaflet 正确处理新的尺寸。
  • 使用 CSS 过渡效果来平滑宽度变化，提高用户体验。

 map-invalidatesize文档介绍