D3で動作するGeoJSONを作成する方法は?


17

私は単に.shpファイルをgeoJSON形式に変換しようとしています:

ogr2ogr -f geoJSON output.json input.shp

コマンドを実行した後、何も間違っていないようです。output.jsonからの抜粋です。

    {
    "type": "FeatureCollection",

    "features": [
    { "type": "Feature", 
    "properties": { "ID_0": 86, "ISO": "DEU", "NAME_0": "Germany", "ID_1": 1, "NAME_1": "Baden-Württemberg", "NL_NAME_1": null, "VARNAME_1": null, "TYPE_1": "Land", "ENGTYPE_1": "State" }, 
    "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.708400940398242, 47.715581894910606 ], [ 8.713716147005524, 47.701734382960055 ], 
...

しかし、d3(http://d3js.org/)でde JSONファイルを使用してSVGポリゴンを描画しようとすると、出力が間違っています。shpファイルはQGISで正しく表示されるので、私が使用する方法には何か問題があるに違いないと思いますogr2ogr。私が得たSVGは完全に間違っているわけではありませんが、詳細を見つけることができないようです。逆さまになって、どういうわけか2つの別々の部分に歪んでいるようです。

svgの生成に使用したjavaScriptは次のとおりです。

//dimensions
var w = 2000;
var h = 2000;

var svg = d3.select("#chart").append("svg")
    .attr("width", w)
    .attr("height", h);

    d3.json(
    "http://localhost:8888/data/data.json",
    function (json) {

    var path = d3.geo.path();

    svg.append("g")
        .attr("class", "black")
        .selectAll("path")
        .data(json.features)
        .enter()
        .append("path")
        .attr("d", path);

誰がここで何がうまくいかなかったか考えていますか?また、QgisとmyGeodata(http://converter.mygeodata.eu/vector)を使用してshpファイルを変換しようとしました。しかし、どちらも本来の動作をしません。

私はこの地図作成のすべてに非常に新しいです。だから私はいくつかのアドバイスをいただければ幸いです。

どうもありがとう!

回答:


7

OK、d3でさまざまな投影法、スケール、および翻訳を試してみて、私の問題を解決しました。d3.geo.path()を使用するときのデフォルトの投影法はalbersUsaであるため、他の投影法を試してみる十分な理由がありました。シェイプファイルを変換するときに適切なEPSG仕様を使用すると、問題を簡単に解決できたはずですが、これらのあいまいな数値は私の知識を超えていました。

したがって、最後に行ったのは、単にメルカトル図法を使用し、translate()でsvg-viewportに取り込むことです。

   d3.json(
    "http://localhost:8888/data/data.json",
    function (json) {

    //dimensions
    var w = 2000;
    var h = 2000;

    var svg = d3.select("#chart").append("svg")
    .attr("width", w)
    .attr("height", h);

    //create geo.path object, set the projection to merator bring it to the svg-viewport
    var path = d3.geo.path()
        .projection(d3.geo.mercator()
        .scale(20000)
        .translate([0, 3800]));

    //draw svg lines of the boundries
    svg.append("g")
        .attr("class", "black")
        .selectAll("path")
        .data(json.features)
        .enter()
        .append("path")
        .attr("d", path);
    });

これは、使用したシェイプファイルと結果のgeoJSONへのリンクです。GADMから取得したシェープファイルを単純化するために、mapshaperを使用しました

面倒ではなく、より柔軟なソリューションに興味があります。だから誰かがアイデアを持っているなら、事前に感謝します!しかし、今のところ、ドイツの16連邦軍を認めることができてうれしいです!


1
spatialreference.orgは、投影法とEPSGコードに役立つWebサイトです。
dmci

5

シェープファイルとGeoJSON出力に正しいEPSGコードを指定しようとしましたか?例えば:

ogr2ogr -f GeoJSON -s_srs EPSG:.... -t_srs EPSG:.... output.json input.shp


おそらく問題があります。ほとんど何も指定しませんでした。ほとんどの場合、知識不足のためです。しかし、私は私の問題の回避策を見つけました。すぐに投稿します。
フラビオ

3

あなたは正しいです。ドイツの地図では、デフォルトの投影法を米国のデータに合わせて変更する必要があります。それは、カンザスのどこかで、サイズ960xsomethingの地図のために中心にあります。

もちろん、正しいパラメーターはマップの寸法にも依存します。

d3.geo.albersプロジェクション(コロプレスマップに最適)を使用する場合、ここに私のパラメーターがあります。

var w = 415;
var h = 555;

var albers = d3.geo.albers()
    .origin([11, 51])
    .parallels([49, 53])
    .translate([230, 290])
    .scale(4000);

var path = d3.geo.path().projection(albers);
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.