vue-leaflet渲染OpenStreetMap出现部分加载无法完整显示问题

• 1 给地图容器设置明确宽高
  Leaflet渲染地图前需要获取容器的准确尺寸，未设置固定宽高会导致瓦片计算范围错误。在全局样式或当前组件样式中添加如下代码：

/* 若使用vue2需加/deep/深度选择器，vue3用:deep() */
:deep(.leaflet-container) {
  width: 100%;
  /* 高度不能仅设为百分比，需设置固定像素值，或确保父容器有明确高度 */
  height: 600px;
}

• 2 修复v-show触发的尺寸计算异常
  你当前使用v-show控制地图显隐，v-show底层是修改display: none，当地图初始化时如果处于隐藏状态，Leaflet无法获取容器尺寸就会出现瓦片加载不全的问题。
  可选两种修复方案：
  • 方案一：将v-show替换为v-if，每次显示地图时重新初始化实例
  • 方案二：在loadingMap变为true后，手动触发地图重绘
    首先给地图组件添加ref属性：

  <l-map
    ref="mapRef"
    v-show="loadingMap"
    :zoom="zoom"
    :center="center"
    :options="{ zoomControl: false }"
  >
    <l-tile-layer :url="url"></l-tile-layer>
  </l-map>
  

  在修改loadingMap为true的逻辑后添加重绘代码：

  this.loadingMap = true
  this.$nextTick(() => {
    // 调用leaflet原生方法刷新尺寸
    this.$refs.mapRef.leafletObject.invalidateSize()
  })
  

• 3 确认Leaflet样式正确引入
  检查main.js中引入的CSS路径是否正确，正确引入方式为：

import 'leaflet/dist/leaflet.css'

• 4 校验初始参数合法性
  确认zoom和center的初始值为合法数值，zoom不要超过OpenStreetMap支持的最大缩放等级（通常为18），center为符合规范的经纬度值，不要为空或非数值类型。

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