React Leaflet矢量图层Polygon如何适配未知数量的坐标点实现渲染

你当前代码的核心问题是将坐标点拼接为了字符串格式，而React Leaflet的Polygon组件要求传入的坐标参数是多维数字数组，字符串格式无法被组件正确解析。

可行实现方案 #

1. 首先处理数据源，直接生成数字格式的坐标数组，不要做字符串拼接：

const polygonPoints = data.map(el => [el.coordinates[0], el.coordinates[1]])

2. 单多边形场景直接传入组件即可：

import { Polygon } from 'react-leaflet'

// 组件内渲染
<Polygon 
  positions={polygonPoints} 
  pathOptions={{ color: '#3388ff', weight: 2 }}
/>

3. 如果是多多边形/带洞多边形场景，按要求再包裹对应层级的数组即可：

// 带洞多边形示例：第一个子元素为外边界，后续为内边界（洞）坐标
const polygonWithHole = [
  polygonPoints,
  // 内边界坐标数组
  [[35.7, 139.7], [35.6, 139.8], [35.6, 139.7]]
]

// 多多边形示例：每一个子元素对应一个独立多边形
const multiPolygon = [
  polygonPoints,
  [[36.1, 140.2], [36.0, 140.3], [36.0, 140.2]]
]

注意事项 #

• Leaflet默认坐标顺序为[纬度, 经度]，如果你的数据源是GeoJSON标准的[经度, 纬度]格式，需要调换两个坐标值的顺序：

const polygonPoints = data.map(el => [el.coordinates[1], el.coordinates[0]])

• 坐标点数量不需要提前确定，map遍历生成的动态数组可以直接被组件正常识别。

内容的提问来源于stack exchange，提问作者Kacper Ratyśki