1

所以我从一个运行良好的非常小的例子开始。我使用QGIS画了一条线,然后使用mapshaper将其转换为topojson。然后我使用D3.js来加载和可视化它。这是更大但不起作用的示例:

jsfiddle.net/kwoxer/kpL1uyy2/2/

正如您所看到的,它不只显示一行,而是显示疯狂的线条,好像转换出错了。已经测试过不同的浏览器。

但正如我所说,我之前已经用 QGIS 做了一条小线,转换它,一切都很好。那么这是线路大小的问题吗?还是通过转换器?

这是来自 QGIS 的图片在浏览器中的样子:http: //i.imgur.com/s1FPn2P.png

那么创建(巨大的)自己的地图并在 D3.js 中使用它的好方法是什么?

4

1 回答 1

4

我看了你的小提琴,我想我看到了问题。您正在使用 d3 的 Equirectangular 地图投影,它需要 x 值在 [-180, 180] 范围内和 y 值在 [-90, 90] 范围内的经纬度坐标。数据集的实际 x 和 y 范围是 [-991.4407052281722, 6787.6906928973385] 和 [-4789.571699454693, -155.32649155239142]。当 d3 遇到超出预期范围的坐标时,它会将它们包裹起来——这就是线条看起来“疯狂”的原因。

根据您的坐标值,我猜您在 QGIS 项目中使用的是投影坐标系。要使用 d3 显示数据,您可以在经纬度坐标中导出形状(例如,在保存 QGIS 图层时选择“WGS 84”作为 CRS),或者您可以将 d3 与投影数据一起使用(请参阅绘制已投影的 geoJSON d3.js 中的地图

于 2015-01-22T22:35:56.897 回答