Next.js中用Leaflet.js仅显示喀麦隆地图却无法加载的求助

你的代码核心问题是混用了原生Leaflet API和react-leaflet组件，同时遮罩层的GeoJSON结构不符合Leaflet要求，导致地图无法正常渲染。以下是具体修复步骤和代码：

1. 核心问题分析 #

• 导入了react-leaflet的MapContainer但未使用，反而通过L.map直接创建地图实例，这会和react-leaflet的组件生命周期冲突，导致地图DOM无法正确初始化。
• 遮罩层的多边形结构错误：Leaflet要求多边形的"洞"需要作为独立坐标数组嵌套在外环数组中，而非直接拼接。

2. 修复后的代码 #

Map.tsx #

"use client";
import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css";
import "leaflet-defaulticon-compatibility";
import { MapContainer, TileLayer, GeoJSON } from "react-leaflet";

// 喀麦隆GeoJSON数据
const cameroon: GeoJSON.Feature<GeoJSON.Polygon> = {
  type: "Feature",
  properties: {
    name: "Cameroon",
    code: "CMR",
    group: "Countries",
  },
  geometry: {
    type: "Polygon",
    coordinates: [
      [
        [13.075822, 2.267097],
        [12.951334, 2.321616],
        [12.35938, 2.192812],
        [11.751665, 2.326758],
        [11.276449, 2.261051],
        [9.649158, 2.283866],
        [9.795196, 3.073404],
        [9.404367, 3.734527],
        [8.948116, 3.904129],
        [8.744924, 4.352215],
        [8.488816, 4.495617],
        [8.500288, 4.771983],
        [8.757533, 5.479666],
        [9.233163, 6.444491],
        [9.522706, 6.453482],
        [10.118277, 7.038775],
        [10.497375, 7.055358],
        [11.058788, 6.644427],
        [11.745774, 6.981383],
        [11.839309, 7.397042],
        [12.063946, 7.799808],
        [12.218872, 8.305824],
        [12.753672, 8.717763],
        [12.955468, 9.417772],
        [13.1676, 9.640626],
        [13.308676, 10.160362],
        [13.57295, 10.798566],
        [14.415379, 11.572369],
        [14.468192, 11.904752],
        [14.577178, 12.085361],
        [14.181336, 12.483657],
        [14.213531, 12.802035],
        [14.495787, 12.859396],
        [14.893386, 12.219048],
        [14.960152, 11.555574],
        [14.923565, 10.891325],
        [15.467873, 9.982337],
        [14.909354, 9.992129],
        [14.627201, 9.920919],
        [14.171466, 10.021378],
        [13.954218, 9.549495],
        [14.544467, 8.965861],
        [14.979996, 8.796104],
        [15.120866, 8.38215],
        [15.436092, 7.692812],
        [15.27946, 7.421925],
        [14.776545, 6.408498],
        [14.53656, 6.226959],
        [14.459407, 5.451761],
        [14.558936, 5.030598],
        [14.478372, 4.732605],
        [14.950953, 4.210389],
        [15.03622, 3.851367],
        [15.405396, 3.335301],
        [15.862732, 3.013537],
        [15.907381, 2.557389],
        [16.012852, 2.26764],
        [15.940919, 1.727673],
        [15.146342, 1.964015],
        [14.337813, 2.227875],
        [13.075822, 2.267097],
      ],
    ],
  },
};

// 遮罩层GeoJSON：外环+喀麦隆作为洞
const mask: GeoJSON.Feature<GeoJSON.Polygon> = {
  type: "Feature",
  properties: {},
  geometry: {
    type: "Polygon",
    coordinates: [
      // 覆盖全球的外环（顺时针）
      [
        [-180, -90],
        [180, -90],
        [180, 90],
        [-180, 90],
        [-180, -90],
      ],
      // 喀麦隆坐标反转（逆时针，作为洞）
      cameroon.geometry.coordinates[0].reverse(),
    ],
  },
};

export default function Map() {
  return (
    <MapContainer
      center={[7.369722, 12.354722]}
      zoom={6}
      style={{ height: "100vh", width: "100%" }}
    >
      {/* 底图瓦片层 */}
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution="© OpenStreetMap contributors"
      />
      {/* 喀麦隆边界 */}
      <GeoJSON data={cameroon} style={{ color: "#2ecc71", weight: 2 }} />
      {/* 遮罩层：隐藏其他区域 */}
      <GeoJSON
        data={mask}
        style={{
          interactive: false,
          color: "#000",
          fillColor: "#000",
          fillOpacity: 0.6,
        }}
      />
    </MapContainer>
  );
}

page.tsx #

"use client";
import dynamic from "next/dynamic";

// 动态导入地图组件，禁用SSR
const LazyMap = dynamic(() => import("../../../app/dashboard/Cartographie/Map"), {
  ssr: false,
  loading: () => <p>Chargement...</p>,
});

export default function Home() {
  return (
    <main style={{ margin: 0, padding: 0 }}>
      <LazyMap />
    </main>
  );
}

3. 关键修改说明 #

• 移除原生Leaflet的L.map实例创建，完全使用react-leaflet的MapContainer组件，遵循React组件生命周期。
• 修复遮罩层的GeoJSON结构：将喀麦隆坐标作为多边形的"洞"（嵌套在coordinates数组中），同时反转喀麦隆坐标顺序，符合Leaflet对多边形洞的逆时针方向要求。
• 简化代码结构，直接通过react-leaflet的GeoJSON组件渲染边界和遮罩层，无需手动调用addTo方法。
• 给main标签添加样式，避免默认边距导致地图显示不全。

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