React-Leaflet同坐标标记点整齐排列实现及页面崩溃排查

常见崩溃原因 #

页面无响应/崩溃大概率是以下情况导致：

1. 无限重渲染：在组件render阶段实时处理大量重复坐标，且每次处理生成新的引用类型数据（如数组、对象），导致组件不断触发重渲染循环。
2. 内存溢出：偏移逻辑错误（比如无限循环生成标记点），或未对重复坐标做聚合处理，一次性渲染过多DOM元素。
3. 集群组件冲突：react-leaflet-cluster的集群计算逻辑与自定义偏移标记的动态更新相互触发，陷入循环。

正确实现方案 #

核心思路：提前预处理GeoJSON数据，对重复坐标的点计算合理偏移，并用缓存避免重复计算，具体代码如下：

import React, { useMemo } from 'react';
import { MapContainer, TileLayer, GeoJSON, Marker } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-cluster';

// 计算水平偏移量：将重复点居中排列，每个点间保持固定距离
const getPointOffset = (index, totalCount, offsetStep = 0.00005) => {
  // 起始偏移量让整个组居中
  const baseOffset = -(totalCount - 1) * offsetStep / 2;
  // 返回[经度偏移, 纬度偏移]
  return [baseOffset + index * offsetStep, 0];
};

// 预处理GeoJSON：给重复坐标的点添加偏移
const processDuplicateCoords = (rawGeoJSON) => {
  if (!rawGeoJSON?.features) return rawGeoJSON;

  // 按坐标分组，key为"经度,纬度"字符串
  const coordGroups = {};
  rawGeoJSON.features.forEach(feature => {
    const coordKey = feature.geometry.coordinates.join(',');
    coordGroups[coordKey] = [...(coordGroups[coordKey] || []), feature];
  });

  // 处理每个分组，生成带偏移的新feature
  const processedFeatures = [];
  Object.values(coordGroups).forEach(group => {
    const total = group.length;
    group.forEach((feat, idx) => {
      if (total === 1) {
        processedFeatures.push(feat);
        return;
      }
      // 深拷贝原feature，避免修改原始数据
      const newFeat = JSON.parse(JSON.stringify(feat));
      const [lon, lat] = newFeat.geometry.coordinates;
      const [offsetLon, offsetLat] = getPointOffset(idx, total);
      // 更新坐标
      newFeat.geometry.coordinates = [lon + offsetLon, lat + offsetLat];
      // 可选：保存原始坐标用于后续交互
      newFeat.properties.originalCoord = [lon, lat];
      processedFeatures.push(newFeat);
    });
  });

  return { ...rawGeoJSON, features: processedFeatures };
};

const MapComponent = ({ geojsonData }) => {
  // 用useMemo缓存处理后的数据，仅当原始数据变化时重新计算
  const processedGeoJSON = useMemo(() => {
    return processDuplicateCoords(geojsonData);
  }, [geojsonData]);

  // 自定义标记渲染（可替换为自定义图标）
  const renderMarker = (props) => {
    const { latlng } = props;
    return <Marker position={latlng} />;
  };

  return (
    <MapContainer 
      center={[39.9042, 116.4074]} 
      zoom={13} 
      style={{ height: '100vh', width: '100%' }}
    >
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; OpenStreetMap contributors'
      />
      <MarkerClusterGroup>
        <GeoJSON 
          data={processedGeoJSON} 
          pointToLayer={renderMarker} 
        />
      </MarkerClusterGroup>
    </MapContainer>
  );
};

export default MapComponent;

关键优化点 #

1. 数据预处理+缓存：用useMemo缓存处理后的GeoJSON数据，避免每次渲染都重新执行大量计算，从根源上防止无限重渲染。
2. 坐标聚合分组：通过字符串化坐标快速聚合重复点，减少遍历次数，提升处理效率。
3. 合理偏移逻辑：将重复点居中排列，偏移步长（offsetStep）可根据地图层级调整（数值越小偏移距离越短），避免点超出可视范围。
4. 不修改原始数据：深拷贝feature后再修改坐标，防止污染原始数据集导致的意外更新。

原有代码的常见坑排查 #

1. 检查是否在render中直接处理数据且未用缓存：比如每次渲染都调用处理函数，生成新的数组/对象，导致组件认为数据变化，触发重渲染循环。
2. 检查偏移计算逻辑：是否存在无限循环（比如错误的循环终止条件），或偏移量计算导致坐标不断变化，触发地图重绘循环。
3. 检查是否直接修改原始GeoJSON数据：修改原始数据会导致每次渲染时数据状态变化，进而触发组件更新。

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