5

给定一个 shapefile：

Natural_earth / ne_10m_admin_0_sovereignty.zip

鉴于我们想为 D3js 数据可视化重新投影它，我们可以在不同的层次上重新投影。

1.使用以下方法获取重新投影的 shapefile ( 1 ) ogr2ogr：

ogr2ogr -f 'ESRI Shapefile' -t_srs 'EPSG:...' output.shp input.shp

或2.使用 (npm)获取重新投影的 topojson ( 2 ) topojson.js：

topojson \
        -o output.topo.json
        --projection 'd3.geo.albersUsa()' \
        -q 1e5 \
        -s 1 \
        -- input.shp

或3.获取重新投影的 D3js 数据/SVG ( 1 )，D3js 代码包括：

var path = d3.geo.path()
    .projection(d3.geo.albersUsa())   // unsure of this syntaxe, confirmation welcome, just delete this comment.

概述：

Mike Bostock > Projected Topojson告诉我们，第一种和第二种方式“消除了在渲染时投影几何图形的需要，提高了性能 [...] 因为每个点的重要性是在屏幕上的区域而不是地球表面上测量的。” 总之，最终像素质量/文件权重比更好。

另一方面，在渲染时重新投影几何体可以在最后一刻进行更灵活的投影。

了解更多？

这就是我所知道的。如果有人可以对这些方式进行更多解释，分享有关参数的帮助资源（ogr 的 EPSG 列表，d3js 投影列表），以及每种方式的各自优势/劣势，这可能是一本非常有趣的并行手册。

注意：我会给出我的答案，但我只是开始挖掘它。我想周围有更多有经验的人。

4

1 回答 1

5

只是一点背景来补充这个问题。GeoJSON 文件包含地球上各个地方的几何描述，通常为多边形或多边形集合，其中每个顶点是一对(longitude, latitude). 要在屏幕中创建地图，我们需要计算屏幕(longitude, latitude)中的对和点之间的对应关系(column n⁰x, line n⁰y)。这个对应是一个投影。D3 包括几个投影。

在 (1)中，地球上的投影是使用 计算的ogr2ogr，但您仍然需要使用 topojson 设置宽度和高度以调整视口（参见http://bl.ocks.org/mbostock/5557726）示例.

在 (2)中，您想使用topojson直接使用原始 shapefile 生成已计算投影的 TopoJSON 文件。为此，您需要设置要使用的投影，以及一些参数（宽度和高度）：

topojson --width 960 --height 800 \
         --projection 'd3.geo.orthographic' \
         -o output.json -- input.shp

如果这样做，TopoJSON 文件 ( output.json) 将已经计算出投影，因此在设置地理路径生成器时无需再次计算：

var path = d3.geo.path()
    .projection(null);

在选项 (3)中，您在通过 D3.js 渲染时计算投影。为此，您需要 GeoJSON 或 TopoJSON 文件，并配置投影。

// Assuming GeoJSON
d3.json('output.json', function(error, geodata) {

    // Create the SVG, etc...

    // Create the projection, configure the scale, translation and rotation
    var projection = d3.geo.mercator()
        .translate([width / 2, height / 2]);

    // Create the path generator
    var path = d3.geo.path()
        .projection(projection);

    // Generate the shapes
    svg.selectAll('path.feature').data(geodata.features)
        .enter().append('path')
        .attr('class', 'feature')
        .attr('d', path);
});

问候，

于 2014-04-15T23:46:04.150 回答