项目topojson的方法? [英] Ways to project 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屋!