D3.js 错误绘制 GeoJSON:缠绕顺序问题
当尝试使用 geoJSON 数据可视化俄罗斯地区时,程序员遇到了一个问题其中 D3.js 绘制单个黑色矩形而不是所需的地图轮廓。这种差异是由于 geoJSON 文件中坐标的缠绕顺序问题引起的。
了解缠绕顺序
GeoJSON 坐标可以按顺时针或逆时针顺序排列,表示形状的内部或外部。大多数工具和验证器都会忽略此顺序,但 D3.js 使用椭圆体数学,这需要正确缠绕以避免创建覆盖整个地球的倒置多边形。
识别问题
检查 SVG 路径后,很明显,有些路径是准确绘制的,而另一些路径覆盖了除预期空间之外的整个星球。这是因为数据包含顺时针和逆时针缠绕的组合,导致 D3.js 将倒多边形视为地球上非目标区域的所有物体。
解决问题
要解决此问题,必须重新排序坐标。一个方便的解决方案是利用 turf.js 库:
var fixed = features.map(function(feature) {
return turf.rewind(feature,{reverse:true});
});
这将倒转每个多边形以遵循 geoJSON 规范指定的正确缠绕顺序。然而,D3.js 使用相反的缠绕顺序,因此反向参数设置为 true。
调整地图视图
固定缠绕顺序后,进一步调整可以用来增强地图的外观。通过在投影中添加 fitSize 方法,可以对地图进行缩放和平移,以获得更合适的视图。
免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。
Copyright© 2022 湘ICP备2022001581号-3