如何格式化GeoJSON数据适配Mapbox？H3六边形渲染报错求助

你的代码出现格式错误的核心原因是生成的GeoJSON不符合Mapbox的解析规范，以下是具体修复步骤：

1. 修正坐标顺序 #

H3的h3ToGeoBoundary方法返回的坐标是**[纬度, 经度]，但GeoJSON标准要求坐标必须是[经度, 纬度]**，这是触发解析错误的主要原因，需要将每个坐标对的顺序反转。

2. 修正Polygon结构 #

GeoJSON的Polygon类型要求coordinates是双层数组结构（外层数组用于容纳多边形的环，比如主多边形和洞），你当前直接使用了H3返回的单层数组，缺少外层包裹。另外，规范建议多边形首尾坐标保持一致（闭合），可以通过拼接第一个坐标来实现。

3. 修复其他小问题 #

• 代码中console.log(hex)会报错，因为hex未定义，可改为console.log(hexagons)或直接删除。
• h3ToGeoBoundary不需要传入resolution参数，H3索引本身已包含分辨率信息，该参数多余。

修正后的完整构造函数代码 #

constructor() {
  super();
  const hexagons = ['8928308280fffff', '8928308281fffff', '8928308282fffff'];
  this.state = {
    route: {
      type: 'FeatureCollection',
      features: hexagons.map(hex => ({
        type: 'Feature',
        geometry: {
          type: 'Polygon',
          coordinates: [
            // 反转经纬度顺序，并闭合多边形
            h3ToGeoBoundary(hex).map(([lat, lng]) => [lng, lat])
              .concat([h3ToGeoBoundary(hex)[0].reverse()])
          ]
        }
      }))
    }
  }
}

修改后生成的GeoJSON将完全符合Mapbox的解析要求，错误提示中的"dataCorrupted"问题会消失，六边形可以正常在地图上渲染。

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