项目topojson的方法? [英] Ways to project topojson?

查看:137
本文介绍了项目topojson的方法?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

给出一个shapefile:


Natural_earth / ne_10m_admin_0_sovereignty.zip


获取一个重新投影的shape文件(

a href =http://bl.ocks.org/mbostock/5557726 =nofollow> 1 ),使用 ogr2ogr

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



2。获取重新投影的topojson( 2 ),使用(npm) 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())//不确定这个语法,确认欢迎,只是删除此评论。

概述



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



另一方面,在渲染时重新投影几何图形允许更灵活,最后一分钟的投影。



了解更多?



这就是我所知道的。如果有人能以这些方式解释更多,分享参数帮助资源(ogr的EPSG列表,d3js预测的列表)和各自的优点/弱点,它可能是一个非常有趣的并行手册。



注意:我会给出我的拍摄答案,但我只是开始挖掘它。我想有更多有经验的人。

解决方案

GeoJSON文件包含地球上的地方几何的描述,通常为多边形或多边形集合,其中每个顶点是一对(经度,纬度)。要在屏幕中创建地图,我们需要计算(经度,纬度)对和屏幕中的点(列nΟx,行n⁰y)。这种对应是投影。 D3包括几个预测



在(1)中,使用 ogr2ogr 计算地球投影,但您仍需要设置宽度和高度topojson调整视口(请参阅 http://bl.ocks.org/mbostock/5557726



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

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

如果这样做,TopoJSON文件已计算,因此您在设置地理位置生成器时不需要再次计算:

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

在选项(3) .js。为此,您需要一个GeoJSON或TopoJSON文件,并配置投影。

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

//创建SVG等...

//创建投影,缩放,平移和旋转
var projection = d3.geo.mercator()
.translate([width / 2,height / 2]);

//创建路径生成
var path = d3.geo.path()
.projection(projection);

//生成形状
svg.selectAll('path.feature ').data(geodata.features)
.enter()。append('path')
.attr('class','feature')
.attr('d' path);
});

回答:


Given a shapefile :

Natural_earth/ne_10m_admin_0_sovereignty.zip

Given we want to reproject it for a D3js data viz, we could reproject at different levels.

1. Get a reprojected shapefile (1), using ogr2ogr :

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

OR 2. get a reprojected topojson (2), using (npm) topojson.js:

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

OR 3. get a reprojected D3js data / SVG (1), D3js code including:

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

Overview:

Mike Bostock > Projected Topojson informs us that the 1st and 2nd ways "eliminates the need to project the geometry while rendering, improving performance [...] since the importance of each point is measured in area on-screen rather than on the Earth’s surface." in short, the end pixel quality/file weight ratio is better.

On the other hand, reprojecting the geometry while rendering allow a more agile, last minute projection.

Knowing more ?

This is all what I know. If someone could explain more on these ways, share helping resources for parameters (list of ogr's EPSG, list of d3js projections), and respective benefits/weakness for each, it could be a very interesting parallel manual.

Note: I will give my shoot-answer at it but I just start to dig on it. I guess there are more experienced people around.

解决方案

Just a little background to complement the question. GeoJSON files contain the description of the geometry of places on Earth, usually as polygons or collection of polygons, where each vertex is a pair of (longitude, latitude). To create a map in the screen, we need to compute a correspondence between (longitude, latitude) pairs and points in the screen (column n⁰x, line n⁰y). This correspondence is a projection. D3 includes several projections.

In (1), the projection-on-earth is computed using ogr2ogr, but you still need to set the width and height with topojson to adjust the viewport (see http://bl.ocks.org/mbostock/5557726) for an example.

In (2), you want to use topojson to generate a TopoJSON file that has the projection already computed, using the original shapefile directly. To do this, you need to set which projection you want to use, as well as some parameters (width and height):

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

If you do this, the TopoJSON file (output.json) will have the projection already computed, so you don't need to compute it again when setting the geographic path generator:

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

In option (3), you compute the projection when rendering via D3.js. To do this, you need a GeoJSON or TopoJSON files, and configure the projection.

// 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);
});

Regards,

这篇关于项目topojson的方法?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆