GeoJSON多边形有效性校验：使用Turf.js避免绘图错误

npm install @turf/boolean-valid
# 或者
yarn add @turf/boolean-valid

import { booleanValid } from '@turf/boolean-valid';
import type { Polygon } from 'geojson'; // 引入GeoJSON Polygon类型定义

/**
 * 示例：一个有效的GeoJSON多边形
 * 外环顺时针或逆时针均可，但通常建议外环逆时针（符合右手定则），内环顺时针。
 * 环的第一个和最后一个坐标必须相同以形成闭合环。
 */
const validPolygon: Polygon = {
  type: 'Polygon',
  coordinates: [
    [
      [100.0, 0.0],
      [101.0, 0.0],
      [101.0, 1.0],
      [100.0, 1.0],
      [100.0, 0.0], // 闭合
    ],
  ],
};

/**
 * 示例：一个无效的GeoJSON多边形
 * 1. 环未闭合：第一个和最后一个坐标不一致
 * 2. 可能存在自相交（虽然此例中未直接展示，但booleanValid会检查）
 * 3. 坐标顺序错误等
 */
const invalidPolygonUnclosed: Polygon = {
  type: 'Polygon',
  coordinates: [
    [
      [100.0, 0.0],
      [101.0, 0.0],
      [101.0, 1.0],
      [100.0, 1.0],
      // [100.0, 0.0] 缺失，导致环未闭合
    ],
  ],
};

const invalidPolygonSelfIntersection: Polygon = {
  type: 'Polygon',
  coordinates: [
    [
      [0, 0],
      [2, 2],
      [0, 2],
      [2, 0],
      [0, 0], // 自相交
    ],
  ],
};


// 执行校验
const isValid1 = booleanValid(validPolygon);
console.log('Valid Polygon is valid:', isValid1); // 输出: Valid Polygon is valid: true

const isValid2 = booleanValid(invalidPolygonUnclosed);
console.log('Invalid (unclosed) Polygon is valid:', isValid2); // 输出: Invalid (unclosed) Polygon is valid: false

const isValid3 = booleanValid(invalidPolygonSelfIntersection);
console.log('Invalid (self-intersecting) Polygon is valid:', isValid3); // 输出: Invalid (self-intersecting) Polygon is valid: false

// 在绘制前进行判断
function drawPolygonIfValid(map: any, polygon: Polygon) {
  if (booleanValid(polygon)) {
    console.log('多边形数据有效，可以进行绘制。');
    // 假设 map.addSource 和 map.addLayer 是Mapbox GL JS的API
    // map.addSource('my-polygon', {
    //   type: 'geojson',
    //   data: polygon,
    // });
    // map.addLayer({
    //   id: 'my-polygon-layer',
    //   type: 'fill',
    //   source: 'my-polygon',
    //   paint: {
    //     'fill-color': '#088',
    //     'fill-opacity': 0.8,
    //   },
    // });
  } else {
    console.error('错误：多边形数据无效，无法绘制。请检查坐标结构。', polygon);
    // 可以进一步处理，例如向用户显示错误消息
  }
}

// 示例调用 (假设有一个map实例)
// const myMap = new MapboxMap({ /* ... */ });
// drawPolygonIfValid(myMap, validPolygon);
// drawPolygonIfValid(myMap, invalidPolygonUnclosed);