如何在Next.js中重构React Leaflet GeoJSON组件以使用useMap函数并实现要素缩放功能

你遇到的核心问题其实是数据传递链断裂了，重构后points数据没有正确传到GeoJSON组件里，导致图层无数据可渲染。咱们一步步来修复：

1. 修复Map组件的props接收与传递 #

重构后的Map组件没有接收points props，也没有把它传给子组件MapContent，这是最关键的错误。修改Map组件代码：

const Map = ({ points }) => { // 接收从页面传来的points props
  return (
    <>
      <MapContainer center={[50.1109, 8.6821]} zoom={14} scrollWheelZoom={false} style={{height: "100%", width: "100%"}} renderer={L.canvas()}>
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution="&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors" />
        <MapContent points={points} /> {/* 将points传递给MapContent */}
      </MapContainer>
    </>
  )
}

2. 确保页面组件的getServerSideProps正确传值 #

你的Next.js页面文件（比如pages/map.js）需要保留getServerSideProps逻辑，把加载的GeoJSON数据传递给Map组件：

// pages/map.js
import Map from '../components/Map';
import fs from 'fs';
import path from 'path';

export async function getServerSideProps() {
  // 加载本地GeoJSON文件
  const filePath = path.join(process.cwd(), 'path/to/your/points.geojson');
  const points = JSON.parse(fs.readFileSync(filePath, 'utf8'));

  return {
    props: { points }, // 将数据传递给Map组件
  };
}

export default Map;

3. 优化zoomToFeature函数（可选但更合理） #

对于单点要素，用setView比fitBounds更直接，修改MapContent里的缩放逻辑：

const zoomToFeature = (e) => {
  // 直接定位到点击的点，设置目标缩放级别（比如16）
  map.setView(e.target.getLatLng(), 16);
}

4. 增加默认样式避免潜在问题 #

在markerStyles函数里添加默认case，防止没有匹配到type时出现样式异常：

const markerStyles = function(feature) {
  switch (feature.properties.type) {
    case 'Sticker': return {color: '#a50026'};
    case 'Mural': return {color: '#d73027'};
    case 'Marker': return {color: '#f46d43'};
    case 'Characters': return {color: '#fdae61'};
    case 'Letters': return {color: '#fee090'};
    case 'Tippex': return {color: '#ffffbf'};
    case 'Spray': return {color: '#e0f3f8'};
    case 'Chalk': return{color: '#abd9e9'};
    case 'Label maker sticker': return{color: '#74add1'};
    case 'Poster': return{color: '#4575b4'};
    default: return { color: '#999' }; // 默认灰色样式
  }
}

验证步骤 #

1. 确保本地GeoJSON文件路径正确，getServerSideProps能正常读取数据
2. 启动Next.js应用，打开地图页面，检查控制台是否有报错
3. 点击地图上的点要素，确认是否能正常缩放

这样修改后，GeoJSON图层应该能正常加载，并且点击要素的缩放功能也能正常工作了。

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