react-mapbox-gl中GeoJSONLayer能否绘制多边形？渲染循环问题求助

我明白你遇到的<Layer>组件渲染循环问题——通常这是因为每次组件渲染时都生成了新的GeoJSON对象作为source的数据源，导致react-mapbox-gl不断重建图层，触发重复渲染。而GeoJSONLayer确实可以完美解决这个问题，同时支持绘制多边形，下面是具体的实现方法：

1. 准备多边形的GeoJSON数据 #

首先你需要构造符合GeoJSON规范的Polygon类型数据，注意坐标格式是嵌套数组：外层是多边形的环（如果没有洞，一个环即可），每个环由经纬度坐标对组成，格式为[经度, 纬度]，且最后一个坐标需要和第一个一致来闭合多边形。

比如一个简单的多边形GeoJSON示例：

const polygonGeoJSON = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {}, // 可添加自定义属性，用于后续样式或交互逻辑
      geometry: {
        type: "Polygon",
        coordinates: [
          [
            [-74.0060, 40.7128],
            [-73.9969, 40.7071],
            [-73.9942, 40.7103],
            [-74.0060, 40.7128]
          ]
        ]
      }
    }
  ]
};

2. 使用GeoJSONLayer组件渲染多边形 #

在你的组件中导入GeoJSONLayer，将准备好的GeoJSON数据传给它的data属性，同时通过paint属性设置多边形的填充颜色、边框样式等。

关键优化：为了彻底避免渲染循环，建议用useMemo缓存GeoJSON数据，确保只有当数据实际变化时才重新生成对象引用：

import React, { useMemo } from 'react';
import ReactMapboxGl, { GeoJSONLayer } from 'react-mapbox-gl';

// 初始化地图实例
const Map = ReactMapboxGl({
  accessToken: '你的Mapbox Access Token'
});

const PolygonMap = () => {
  // 用useMemo缓存GeoJSON数据，避免每次渲染生成新对象
  const polygonData = useMemo(() => ({
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        properties: {},
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [-74.0060, 40.7128],
              [-73.9969, 40.7071],
              [-73.9942, 40.7103],
              [-74.0060, 40.7128]
            ]
          ]
        }
      }
    ]
  }), []); // 依赖项为空，只会初始化一次

  return (
    <Map
      style="mapbox://styles/mapbox/streets-v12"
      containerStyle={{
        height: '100vh',
        width: '100vw'
      }}
      center={[-74.0060, 40.7128]}
      zoom={[14]}
    >
      <GeoJSONLayer
        data={polygonData}
        paint={{
          'fill-color': '#4287f5',
          'fill-opacity': 0.4,
          'line-color': '#204ba1',
          'line-width': 2
        }}
      />
    </Map>
  );
};

export default PolygonMap;

3. 为什么之前的组件会出现渲染循环？ #

当你使用<Layer>组件时，如果在render函数内直接创建GeoJSON对象（比如source={{ type: 'geojson', data: { ... } }}），每次组件渲染都会生成一个新的对象引用，react-mapbox-gl会认为source属性发生了变化，从而销毁旧图层并创建新图层，触发组件重新渲染，形成循环。

而GeoJSONLayer内部对数据源的处理更优化，加上我们用useMemo缓存了数据引用，就能彻底避免这个问题。

扩展：动态更新多边形 #

如果需要动态修改多边形的位置或样式，可以调整useMemo的依赖项，当依赖变化时，polygonData会自动更新，GeoJSONLayer也会同步渲染新的多边形：

import React, { useMemo, useState } from 'react';

const PolygonMap = () => {
  // 用状态管理多边形坐标
  const [polygonCoords, setPolygonCoords] = useState([
    [-74.0060, 40.7128],
    [-73.9969, 40.7071],
    [-73.9942, 40.7103],
    [-74.0060, 40.7128]
  ]);

  // 依赖polygonCoords，状态变化时自动更新数据
  const polygonData = useMemo(() => ({
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        properties: {},
        geometry: {
          type: "Polygon",
          coordinates: [polygonCoords]
        }
      }
    ]
  }), [polygonCoords]);

  // 示例：点击按钮修改多边形坐标
  const updatePolygon = () => {
    setPolygonCoords([
      [-74.0100, 40.7150],
      [-73.9980, 40.7090],
      [-73.9950, 40.7120],
      [-74.0100, 40.7150]
    ]);
  };

  return (
    <>
      <button onClick={updatePolygon}>更新多边形</button>
      <Map
        style="mapbox://styles/mapbox/streets-v12"
        containerStyle={{ height: '90vh', width: '100vw' }}
        center={[-74.0060, 40.7128]}
        zoom={[14]}
      >
        <GeoJSONLayer data={polygonData} paint={{ 'fill-color': '#4287f5', 'fill-opacity': 0.4 }} />
      </Map>
    </>
  );
};

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