当 mapshaper 转换为 topojson 时,QGIS 生成的 shapefile 格式错误
QGIS generated shapefile malformed when converted to topojson by mapshaper
所以我从一个运行良好的非常小的示例开始。我用QGIS画了一条线,然后用mapshaper把它转换成了topojson。然后我使用 D3.js 来加载和可视化它。这是更大但不起作用的示例:
jsfiddle.net/kwoxer/kpL1uyy2/2/
如您所见,它不只显示一行,而是显示疯狂的行,就好像转换出错了一样。已经测试了不同的浏览器。
但正如我所说,我之前已经用QGIS做了一个小线,转换它,一切都很好。那么这是线的大小问题吗?还是转换器?
这是一张来自 QGIS 的图片,它在浏览器中的效果如何:http://i.imgur.com/s1FPn2P.png
那么创建(巨大的)自己的地图并在 D3.js 中使用它的好方法是什么?
我查看了您的 Fiddle,我想我明白了问题所在。您正在使用 d3 的 Equirectangular 地图投影,它期望经纬度坐标的 x 值在 [-180, 180] 范围内,y 值在 [-90, 90] 范围内。数据集的实际 x 和 y 范围是 [-991.4407052281722, 6787.6906928973385] 和 [-4789.571699454693, -155.32649155239142]。当 d3 遇到超出预期范围的坐标时,它会将它们换行——这就是这些行看起来 "crazy."
的原因
根据您的坐标值,我猜您在 QGIS 项目中使用了投影坐标系。要使用 d3 显示数据,您可以在经纬度坐标中导出形状(例如,在保存 QGIS 图层时选择 "WGS 84" 作为 CRS),或者您可以将 d3 与投影数据一起使用(参见 Drawing already projected geoJSON map in d3.js)
所以我从一个运行良好的非常小的示例开始。我用QGIS画了一条线,然后用mapshaper把它转换成了topojson。然后我使用 D3.js 来加载和可视化它。这是更大但不起作用的示例:
jsfiddle.net/kwoxer/kpL1uyy2/2/
如您所见,它不只显示一行,而是显示疯狂的行,就好像转换出错了一样。已经测试了不同的浏览器。
但正如我所说,我之前已经用QGIS做了一个小线,转换它,一切都很好。那么这是线的大小问题吗?还是转换器?
这是一张来自 QGIS 的图片,它在浏览器中的效果如何:http://i.imgur.com/s1FPn2P.png
那么创建(巨大的)自己的地图并在 D3.js 中使用它的好方法是什么?
我查看了您的 Fiddle,我想我明白了问题所在。您正在使用 d3 的 Equirectangular 地图投影,它期望经纬度坐标的 x 值在 [-180, 180] 范围内,y 值在 [-90, 90] 范围内。数据集的实际 x 和 y 范围是 [-991.4407052281722, 6787.6906928973385] 和 [-4789.571699454693, -155.32649155239142]。当 d3 遇到超出预期范围的坐标时,它会将它们换行——这就是这些行看起来 "crazy."
的原因根据您的坐标值,我猜您在 QGIS 项目中使用了投影坐标系。要使用 d3 显示数据,您可以在经纬度坐标中导出形状(例如,在保存 QGIS 图层时选择 "WGS 84" 作为 CRS),或者您可以将 d3 与投影数据一起使用(参见 Drawing already projected geoJSON map in d3.js)