NextJS Leaflet地图缩放与位置追踪异常问题求助

核心问题分析 #

你遇到的两个异常（缩放跳回初始值、位置追踪无限循环）根源是组件重新挂载导致地图状态重置：

• 你在Map组件内部定义了CustomCRS对象，每次父组件状态更新（比如zoomLevel变化）都会重新创建这个对象，导致MapContainer的crs prop引用改变，触发MapContainer完全重新挂载，地图回到初始的缩放级别和位置。
• 地图重置会触发moveend事件，调用setCameraPosition更新父组件状态，再次触发MapContainer重新挂载，形成无限循环。

代码修复步骤 #

1. 修复CustomCRS的定义位置

将CustomCRS移到Map组件外部，确保它只被创建一次，避免crs prop引用频繁变化：

'use client';

import 'leaflet/dist/leaflet.css'

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

import Mark from '@/components/map/Mark';
import CameraPositionTracker from '@/components/map/CameraPositionTracker';
import ViewBounds from '@/components/map/ViewBounds';

const mapMaxResolution = 1.00000000;
const mapMinZoom = 3;
const mapMaxZoom = 5;
// 移到组件外部，保证引用稳定
const CustomCRS = {
  ...CRS.Simple,
  transformation: new L.Transformation(1, 0.00000000, -1, 0.00000000),
  scale: (zoom) => Math.pow(2, zoom) / (Math.pow(2, mapMaxZoom) * mapMaxResolution),
  zoom: (scale) => Math.log(scale * ((Math.pow(2, mapMaxZoom) * mapMaxResolution))) / Math.LN2,
}

const Map = ({ markers }) => {
  const [map, setMap] = useState(null);
  const mapExtent = [0.00000000, -7500.00000000, 7500.00000000, 0.00000000];
  
  const [zoomLevel, setZoomLevel]  = useState(3)
  const [cameraPosition, setCameraPosition] = useState(null);

  useEffect(() => {    
    console.log("zoom : ",zoomLevel);
  }, [zoomLevel]);  

  return (
    <div className="">
      <MapContainer
        crs={CustomCRS}
        center={[0, 0]}
        minZoom={mapMinZoom}
        maxZoom={mapMaxZoom}
        zoomControl={false}
        style={{ height: '100vh', width: '100%', position: 'relative'}}
        attributionControl={false}
      >
        <TileLayer
          url="http://localhost:3000/images/tiles/{z}/{y}/{x}.png"
          tileSize={256}
          minZoom={mapMinZoom}
          maxZoom={mapMaxZoom}
          noWrap={true}
          tms={false}
          maxBounds={[
            [-7500, 0],
            [0, 7500],
          ]}
          maxBoundsViscosity={1.0}
          bounds={[
            {lat: 0, lng: 7500},
            {lat: -7500, lng: 0},
          ]}
        />

        <CameraPositionTracker setZoomLevel={setZoomLevel} setCameraPosition={setCameraPosition}/>
        <ViewBounds mapExtent={mapExtent} />

        {markers.filter((marker) => marker.isDisplayed).map(marker => (
          <Mark key={marker.id} position={[marker.coordinates.lat,marker.coordinates.long]} data={marker}/>
        ))}
      </MapContainer>
    </div>
  );
}

export default Map;

2. 优化CameraPositionTracker的事件监听

将事件处理函数定义在useEffect内部，并添加正确的依赖项，确保监听逻辑稳定：

import { useMap, useEffect } from 'react-leaflet';

const CameraPositionTracker = ({ setZoomLevel, setCameraPosition }) => {
  const map = useMap();

  useEffect(() => {
    // 内部定义事件处理函数，避免外部依赖变化导致的重复绑定
    const onZoom = () => {
      const currentZoomLevel = map.getZoom();
      setZoomLevel(currentZoomLevel);
    };

    const onMove = () => {
      const currentCameraPosition = map.getCenter(); 
      setCameraPosition({ lat: currentCameraPosition.lat, lng: currentCameraPosition.lng });
    };

    map.on("moveend", onMove);
    map.on("zoomend", onZoom);

    // 清理函数，组件卸载时移除监听
    return () => {
      map.off("moveend", onMove);
      map.off("zoomend", onZoom);
    };
  }, [map, setZoomLevel, setCameraPosition]); // 添加所有依赖项，保证逻辑一致性

  return null;
};

export default CameraPositionTracker;

修复效果说明 #

• 缩放级别追踪正常：MapContainer不再因为crs prop变化重新挂载，缩放后不会跳回初始值，zoomLevel状态能正确更新。
• 位置追踪无循环：只有用户手动移动地图时才会触发moveend事件，不会因组件重新挂载引发无限循环，页面不再崩溃。

内容的提问来源于stack exchange，提问作者Swen De Bentzmann