Vue3集成Leaflet首次渲染异常：图标与图例Props不显示求助

现象 #

Vue3单文件组件中使用Leaflet开发，首次加载或页面刷新时，地图可正常渲染，但标记图标和图例中的Props值（available、unavailable）无法显示，仅在轻微滚动页面后才会正常显示。

核心原因 #

1. IntersectionObserver触发时机过晚：当前设置threshold: [1]，要求元素100%进入视口才会执行地图初始化。首次加载时页面布局未完全稳定，元素未达到100%可见状态，导致初始化时Props的响应式值尚未同步就绪。
2. 图例值初始化时机错误：图例的label在legend.onAdd外部定义，提前读取了未就绪的Props值；滚动时Observer重新触发，此时Props值已更新，所以显示正常。
3. Vue响应式与Leaflet DOM初始化时机差：Leaflet初始化时，Vue的Props可能还未完成异步更新或DOM渲染，导致动态值无法被正确注入。

解决方案 #

1. 调整IntersectionObserver触发阈值 #

将阈值从[1]改为[0]，让元素刚进入视口就触发初始化，避免等待完全可见：

const observer = new IntersectionObserver(
  (entries) => {
    if (entries[0].isIntersecting && mapElement.value) {
      // 确保核心Props值已就绪再初始化
      if (coords.value.length && available.value !== undefined && unavailable.value !== undefined) {
        removeMap()
        leafletMap = initMap(mapElement.value)
      }
    }
  },
  { threshold: [0] } // 降低触发条件
)

2. 延迟图例值的读取时机 #

将图例label的定义移到legend.onAdd内部，确保每次创建图例时读取最新的Props值：

const initMap = (element: HTMLElement) => {
  const map = L.map(element).setView([41, 0], 5)
  leafletMap = map

  L.tileLayer(import.meta.env.VITE_OPENSTREETMAP, {
    maxZoom: 19,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  }).addTo(map)

  const legend = L.control({ position: 'bottomright' })
  const div = L.DomUtil.create('div', 'legend')
  const color = ['green', 'red']

  legend.onAdd = () => {
    // 移到此处，确保读取最新Props值
    const label = [
      `${available.value} ${i18n.global.t('status.available')}`,
      `${unavailable.value} ${i18n.global.t('status.unavailable')}`
    ]
    const rows = color.map((item, index) => createLegendRow(item, label[index]))
    div.innerHTML = rows.join('')
    return div
  }
  legend.addTo(map)

  // 标记创建逻辑不变
  coords.value.forEach((crd) => {
    const [id, popupContent, active, latitude, longitude] = crd
    const marker = L.marker([latitude, longitude], { icon: colorMarker() }).bindPopup(
      `<a href="${RouteNamespace.locations}/${id}">
        <div>
          <h6>${popupContent}</h6>
          <div class="flex">
            <div class="status status__available mr-2"></div>
            <span>Disponible</span>
          </div>
        </div>
      </a>`
    )
    marker.addTo(map)
  })

  return map
}

3. 移除懒加载（若无需） #

如果没有地图懒加载需求，直接在onMounted中配合nextTick初始化，确保Vue DOM更新完成：

import { onMounted, ref, toRefs, nextTick } from 'vue'

// ... 其他代码不变

onMounted(async () => {
  if (mapElement.value) {
    await nextTick() // 等待Vue完成DOM渲染
    leafletMap = initMap(mapElement.value)
  } else {
    console.error('map element not found')
  }
})

// 移除原有的IntersectionObserver相关代码

4. 监听Props变化（异步场景） #

如果Props是异步获取的（如接口请求），添加监听确保Props更新后重新渲染地图：

import { watch } from 'vue'

// ... 其他代码不变

watch([coords, available, unavailable], () => {
  if (mapElement.value && coords.value.length && available.value !== undefined && unavailable.value !== undefined) {
    removeMap()
    leafletMap = initMap(mapElement.value)
  }
}, { deep: true })

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