0

我收到了一个 GeoJSON 文件,其中的特征使用 EPSG:2169 坐标参考系统。它看起来像这样:

{
    "name": "cantons",
    "type": "FeatureCollection",
    "crs": { "type": "name", "properties": { "name": "EPSG:2169" }},
    "features": […]
}

只有当我尝试使用 D3.js 显示它时,我才得到一个黑色矩形。代码非常标准:

var width = 500,
    height = 960;

var projection = d3.geo.mercator()
    .scale(50)
    .translate([width / 2, height / 2]);

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("cantons.json", function(cantons) {
    svg.selectAll("path")
        .data(cantons.features)
        .enter()
        .append("path")
        .attr("d", path)
});

我可以看到路径已正确创建,但显然坐标是不切实际的。我在想问题可能来自这个异国情调的crs,这就是我尝试使用ogr2​​ogr转换它的原因:

ogr2ogr -f "GeoJSON" -t_srs "EPSG:4326" cantons_new.json cantons.json

这给了我:

{
    "type": "FeatureCollection",
    "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
    "features": […]
}

但它似乎也不起作用。我很确定这没什么,但是当我上周末开始使用 D3.js 和 GDAL 时,我暂时被困住了。任何帮助让我弄清楚发生了什么以及如何处理这个crs参数将不胜感激。

谢谢

4

1 回答 1

0

我相信你错过了一块拼图,topojson ......

通常,当我输入 d3 geojson 数据时,我也会使用库 topojson ......

https://github.com/mbostock/topojson

前任:

var projection = d3.geo.albers();

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

svg.selectAll(".zip_code")
.data(topojson.feature(zip_codes, zip_codes.objects.zip_codes).features)
.enter().append("path")
.attr("class", function(d) { return "zipcode" + d.id; })
.attr("d", path);

.json 文件如下所示:

{"type":"Topology","transform":{"scale: 
[0.00018809317288465377,0.00017734543345821494],"translate": 
[-85.3864733089842,32.844638824851614]},"objects":{"zip_codes": 
{"type":"GeometryCollection","geometries":[{"type":"Polygon","arcs":[[0,1,2,3,4,5,6,7,8,9,10], 
[11]],"id":"30534"}
...

这是我开始使用的 d3/map 教程:

http://bost.ocks.org/mike/map/

希望这可以帮助!

于 2013-07-30T06:41:37.417 回答