React-Leaflet v3 如何绑定 tileload、tileloadstart 事件？

你可以通过获取原生Leaflet TileLayer实例手动绑定事件的方式实现监听，react-leaflet v3 提供了两种常用的获取原生实例的方式： #

方法1：通过 whenCreated 回调获取（推荐） #

TileLayer 组件自带whenCreated属性，会在组件初始化完成后返回对应的原生Leaflet图层实例，直接绑定事件即可：

import { MapContainer, TileLayer } from 'react-leaflet';
import { useEffect, useState } from 'react';

function YourMapComponent() {
  const [tileLayerInstance, setTileLayerInstance] = useState(null);

  useEffect(() => {
    if (!tileLayerInstance) return;

    // 定义事件处理函数
    const handleTileLoadStart = () => {
      console.log('瓦片开始加载');
      // 你的自定义逻辑
    };

    const handleTileLoad = () => {
      console.log('单张瓦片加载完成');
      // 你的自定义逻辑
    };

    // 针对你的场景，推荐额外监听tileloadend事件，所有瓦片加载完成后触发，逻辑触发精度更高
    const handleTileLoadEnd = () => {
      console.log('当前视图所有瓦片加载完成');
      // 重新加载标记点的逻辑写在这里更合适
    };

    // 绑定事件
    tileLayerInstance.on('tileloadstart', handleTileLoadStart);
    tileLayerInstance.on('tileload', handleTileLoad);
    tileLayerInstance.on('tileloadend', handleTileLoadEnd);

    // 组件卸载时解绑事件，避免内存泄漏
    return () => {
      tileLayerInstance.off('tileloadstart', handleTileLoadStart);
      tileLayerInstance.off('tileload', handleTileLoad);
      tileLayerInstance.off('tileloadend', handleTileLoadEnd);
    };
  }, [tileLayerInstance]);

  return (
    <MapContainer center={[39.9, 116.4]} zoom={10} style={{ height: '100vh' }}>
      <TileLayer
        attribution='&copy; OpenStreetMap contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        whenCreated={setTileLayerInstance} {/* 在这里获取原生实例 */}
      />
      {/* 其他地图组件 */}
    </MapContainer>
  );
}

方法2：通过 ref 获取 #

你也可以通过ref拿到TileLayer组件实例，再通过element属性获取原生Leaflet图层实例：

import { useRef, useEffect } from 'react';
import { MapContainer, TileLayer } from 'react-leaflet';

function YourMapComponent() {
  const tileLayerRef = useRef(null);

  useEffect(() => {
    const tileLayerInstance = tileLayerRef.current?.element;
    if (!tileLayerInstance) return;

    // 事件绑定、解绑逻辑和方法1完全一致
    const handleTileLoadEnd = () => {
      // 加载标记点逻辑
    };
    tileLayerInstance.on('tileloadend', handleTileLoadEnd);

    return () => {
      tileLayerInstance.off('tileloadend', handleTileLoadEnd);
    };
  }, []);

  return (
    <MapContainer center={[39.9, 116.4]} zoom={10} style={{ height: '100vh' }}>
      <TileLayer
        ref={tileLayerRef} {/* 在这里挂载ref */}
        attribution='&copy; OpenStreetMap contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
    </MapContainer>
  );
}

额外优化建议 #

针对你的场景，为了避免瓦片加载过程中事件频繁触发导致标记点多次重绘，可以给事件处理函数加100-300ms的防抖处理，进一步提升性能。

内容的提问来源于stack exchange，提问作者Jörg Rech