如何构建React-Leaflet分级统计图并实现GeoJSON数据加载与渲染

React-Leaflet是基于React封装的Leaflet地图库，能够便捷地在React项目中实现各类地图功能，其中分级统计图是展示不同区域数值差异的常用可视化形式，核心依赖GeoJSON数据的加载与动态渲染。

环境准备与依赖安装

首先需要确保项目中已经安装了React相关依赖，之后安装React-Leaflet和Leaflet的核心包，执行以下命令：

npm install react-leaflet leaflet

安装完成后需要在项目入口文件中引入Leaflet的CSS样式，避免地图组件显示异常：

import "leaflet/dist/leaflet.css";

GeoJSON数据结构说明

分级统计图依赖的GeoJSON数据需要包含几何信息和对应的统计数值，标准结构示例如下：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "区域A",
        "value": 120
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[[116.3, 39.9], [116.4, 39.9], [116.4, 40.0], [116.3, 40.0], [116.3, 39.9]]]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "区域B",
        "value": 280
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[[116.4, 39.9], [116.5, 39.9], [116.5, 40.0], [116.4, 40.0], [116.4, 39.9]]]
      }
    }
  ]
}

基础地图组件搭建

先实现一个基础的React-Leaflet地图容器，设置合适的中心点和缩放级别：

import React from "react";
import { MapContainer, TileLayer } from "react-leaflet";

const BaseMap = () => {
  return (
    <MapContainer
      center={[39.95, 116.4]}
      zoom={12}
      style={{ width: "100%", height: "500px" }}
    >
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      />
    </MapContainer>
  );
};

export default BaseMap;

GeoJSON数据加载与分级渲染实现

定义数据分级规则

根据GeoJSON中的value属性划分不同层级，每个层级对应不同的填充颜色：

// 分级规则：根据数值范围返回对应颜色
const getColorByValue = (value) => {
  if (value < 100) return "#f7fcb9";
  if (value < 200) return "#addd8e";
  if (value < 300) return "#31a354";
  return "#006837";
};

动态绑定GeoJSON样式

使用React-Leaflet提供的<GeoJSON>组件加载数据，通过style属性动态设置每个区域的样式：

import React from "react";
import { MapContainer, TileLayer, GeoJSON } from "react-leaflet";
// 引入之前准备的GeoJSON数据
import geoJsonData from "./data/geo.json";

const ChoroplethMap = () => {
  // 定义每个feature的样式
  const geoJsonStyle = (feature) => {
    const value = feature.properties.value;
    return {
      fillColor: getColorByValue(value),
      weight: 1,
      opacity: 1,
      color: "white",
      fillOpacity: 0.7
    };
  };

  // 绑定区域点击事件，显示区域信息
  const onEachFeature = (feature, layer) => {
    const { name, value } = feature.properties;
    layer.bindPopup(`区域名称：${name}<br/>统计数值：${value}`);
  };

  return (
    <MapContainer
      center={[39.95, 116.4]}
      zoom={12}
      style={{ width: "100%", height: "500px" }}
    >
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      />
      <GeoJSON
        data={geoJsonData}
        style={geoJsonStyle}
        onEachFeature={onEachFeature}
      />
    </MapContainer>
  );
};

export default ChoroplethMap;

添加图例说明

为了方便用户理解颜色对应的数值范围，可以添加自定义图例组件：

const Legend = () => {
  const legendItems = [
    { range: "小于100", color: "#f7fcb9" },
    { range: "100-200", color: "#addd8e" },
    { range: "200-300", color: "#31a354" },
    { range: "大于300", color: "#006837" }
  ];

  return (
    <div style={{
      position: "absolute",
      bottom: "20px",
      right: "20px",
      backgroundColor: "white",
      padding: "10px",
      borderRadius: "4px",
      boxShadow: "0 2px 6px rgba(0,0,0,0.2)",
      zIndex: 1000
    }}>
      <h4 style={{ margin: "0 0 8px 0" }}>数值分级图例</h4>
      {legendItems.map((item, index) => (
        <div key={index} style={{ display: "flex", alignItems: "center", marginBottom: "4px" }}>
          <div style={{
            width: "20px",
            height: "20px",
            backgroundColor: item.color,
            marginRight: "8px",
            border: "1px solid #ccc"
          }}></div>
          <span>{item.range}</span>
        </div>
      ))}
    </div>
  );
};

将Legend组件放入MapContainer内部即可显示在地图上方。

常见问题排查

• GeoJSON数据加载失败：检查数据路径是否正确，数据格式是否符合GeoJSON规范，避免存在语法错误
• 样式不生效：确认style函数返回的对象属性名正确，fillColor、weight等属性是Leaflet支持的样式属性
• 地图显示空白：检查是否引入了Leaflet的CSS文件，MapContainer是否设置了明确的宽高样式

React-LeafletGeoJSON分级统计图数据渲染修改时间：2026-06-22 03:18:35