首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何设计topojson?

如何设计topojson?
EN

Stack Overflow用户
提问于 2014-04-15 14:20:05
回答 1查看 2.1K关注 0票数 5

给出一个形状文件:

天然地球/sovereignty.zip

考虑到我们希望为D3js数据重新设计它,我们可以在不同的级别上进行重新设计。

1.获得一个重新投影的shapefile (1),使用ogr2ogr

代码语言:javascript
复制
ogr2ogr -f 'ESRI Shapefile' -t_srs 'EPSG:...' output.shp input.shp

2.使用(npm) topojson.js获得重新投影的topojson (2)。

代码语言:javascript
复制
topojson \
        -o output.topo.json
        --projection 'd3.geo.albersUsa()' \
        -q 1e5 \
        -s 1 \
        -- input.shp

3.获得重新投影的D3js数据/ SVG (1),D3js代码包括:

代码语言:javascript
复制
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预测列表),以及各自的优缺点,这可能是一个非常有趣的并行手册。

注:,我会给出我的回答,但我只是开始挖掘它。我想周围有更多有经验的人。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-04-15 23:46:04

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

In (1)中,地球上的投影是使用ogr2ogr计算的,但您仍然需要通过topojson设置宽度和高度来调整视图端口(参见http://bl.ocks.org/mbostock/5557726)。

在(2)中,您希望使用topojson生成一个已经计算了投影的TopoJSON文件,直接使用原始的shapefile。为此,您需要设置要使用的投影以及一些参数(宽度和高度):

代码语言:javascript
复制
topojson --width 960 --height 800 \
         --projection 'd3.geo.orthographic' \
         -o output.json -- input.shp

如果这样做,TopoJSON文件(output.json)将已经计算了投影,因此在设置地理路径生成器时不需要再次计算它:

代码语言:javascript
复制
var path = d3.geo.path()
    .projection(null);

在选项(3)中,您在通过D3.js进行呈现时计算投影。为此,您需要一个GeoJSON或TopoJSON文件,并配置投影。

代码语言:javascript
复制
// 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);
});

致以敬意,

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23086493

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档