Turf.js与PostGIS difference函数返回非预期结果问题排查

南北端点出现多余顶点是浮点计算精度误差导致的：

• 输入数据中poly1的最南顶点[-155.140558658,19.206650122]、最北顶点[-154.933670824,19.645287706]恰好是poly2的边界顶点，属于完全共点的情况。但空间计算引擎做差集运算时，浮点数存储的微小偏差会让引擎误判这些共点没有完全落在几何边界上，进而生成多余的锯齿状冗余顶点。
• PostGIS中ST_SnapToGrid配合极小精度值能生效，本质是把所有顶点坐标强制对齐到指定精度的网格上，让本应重合但因浮点误差存在微小偏移的坐标变得完全一致，避免计算时的误判。如果网格精度设得太大（比如0.000001），会把正常的几何顶点也拉扯变形，自然会得到错误结果。

不要直接用默认参数调用turf.difference，计算前先对两个几何做坐标对齐处理，选择以下任意一种方案即可：

• 先做顶点捕捉：用turf.snap把poly2的顶点捕捉到poly1上，捕捉容差设为和坐标精度匹配的极小值（比如1e-9，对应经纬度下约0.1毫米的误差，完全不会影响几何形状），再做差集计算。
• 后处理清理冗余顶点：如果直接计算后仍有异常，可对差集结果用turf.cleanCoords移除距离过近的重复顶点，容差同样设为1e-9即可，同时用turf.rewind修正多边形绕向避免渲染异常。

修复后的核心计算代码：

var poly1 = turf.polygon([[[-155.253325763,19.424193039],[-155.140558658,19.206650122],[-154.752533025,19.515649896],[-154.933670824,19.645287706],[-155.253325763,19.424193039]]]);
var poly2 = turf.multiPolygon([[[[-154.975609356,19.338005611],[-155.140558658,19.206650122],[-155.240053913,19.398589856],[-155.021104033,19.34867505],[-154.975609356,19.338005611]]],[[[-154.9542326,19.63106581],[-154.933670824,19.645287706],[-154.904729907,19.624575093],[-154.9542326,19.63106581]]]]);
// 新增顶点捕捉步骤
const snappedPoly2 = turf.snap(poly2, poly1, 0.000000001);
var difference = turf.difference(poly1, snappedPoly2);

注意：容差不要设置过大，否则会导致几何形状被错误扭曲，1e-8~1e-9的容差对于WGS84经纬度坐标足够覆盖浮点计算误差，不会影响实际展示和计算精度。

Javascript逻辑 #

var map = L.map("map").setView([19.42, -155], 9);

L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var poly1 = turf.polygon([[[-155.253325763,19.424193039],[-155.140558658,19.206650122],[-154.752533025,19.515649896],[-154.933670824,19.645287706],[-155.253325763,19.424193039]]]);
var poly2 = turf.multiPolygon([[[[-154.975609356,19.338005611],[-155.140558658,19.206650122],[-155.240053913,19.398589856],[-155.021104033,19.34867505],[-154.975609356,19.338005611]]],[[[-154.9542326,19.63106581],[-154.933670824,19.645287706],[-154.904729907,19.624575093],[-154.9542326,19.63106581]]]]);
const snappedPoly2 = turf.snap(poly2, poly1, 0.000000001);
var difference = turf.difference(poly1, snappedPoly2);

var myStyle = {weight: 0, fillOpacity: 0.3, fillColor: '#0000ff'};
L.geoJSON(poly1, {style: myStyle}).addTo(map);

myStyle.fillColor = '#00ff00';
L.geoJSON(poly2, {style: myStyle}).addTo(map);

myStyle = {weight: 1, opacity: 1, color: 'red', fillOpacity: 0.05, fillColor: '#ff0000'};
L.geoJSON(difference, {style: myStyle}).addTo(map);

CSS样式 #

#map {
  height: 200px;
}

HTML结构 #

<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6.5.0/turf.min.js"></script>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" rel="stylesheet"/>
<div id="map"></div>

内容的提问来源于stack exchange，提问作者A. Mort