经mapshaper简化的GeoJSON在D3.js中显示异常求助

问题核心 #

原始GeoJSON可在D3.js正常渲染，但经Mapshaper简化后出现方形、半环形等异常图形，且该简化文件可在Leaflet、Mapbox正常显示。本质原因是D3的geoPath对GeoJSON拓扑规范的要求更严格，而其他地图库会自动修复拓扑问题。

原因分析 #

• Mapshaper简化过程中可能破坏了多边形环的方向（GeoJSON要求外环顺时针、内环逆时针，D3严格遵循，其他库会自动调整）
• 简化操作产生了自相交的几何图形，D3无法解析，而其他库会自动修复
• 拓扑结构丢失或损坏，导致D3投影计算出错

解决步骤 #

1. 预处理修复GeoJSON拓扑 #

在Mapshaper中对简化后的文件执行拓扑修复：

• 打开文件后，在命令行输入：

  clean
  

• 导出时勾选「Fix topology」选项，重新生成GeoJSON文件。

2. 代码中自动修正环方向 #

利用D3的geoIdentity工具自动调整多边形环的方向，修改原有代码：

const geojson = await d3.json(geojsonUrl);
// 自动修正多边形环的顺时针/逆时针方向
const fixedGeojson = d3.geoIdentity().autoOrient(true)(geojson);

const projection = d3.geoMercator().fitSize([width, height], fixedGeojson);

const path = d3
    .geoPath()
    .projection(projection)
    .context(canvas.getContext("2d"));

const context = canvas.getContext("2d");

context.clearRect(0, 0, width, height);

context.strokeStyle = "#333";
context.lineWidth = 1;
context.fillStyle = "#69b3a2";

fixedGeojson.features.forEach((feature) => {
    context.beginPath();
    path(feature);
    context.fill();
    context.stroke();
});

3. 清理异常小图形 #

若简化后存在细碎的自相交图形，可在Mapshaper中执行命令过滤：

filter-islands min-area=10
remove-slivers

（min-area值可根据实际地图尺度调整）

4. 验证GeoJSON有效性 #

使用GeoJSON规范验证工具检查文件，确保没有语法或拓扑错误。

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