6

d3.jsでコロプレスを作ろうとしていますが、最初だけ行き詰まりました。Shapefile を見つけて、そこから GeoJSON および TopoJson ファイルを生成しました。地図はアルベルス-シベリア図法を使用しています。この投影について私が見つけたもの：

投影法: アルバース正積円錐図法

  • 単位: メートル
  • スフェロイド：クラソフスキー
  • 中央子午線: 105
  • 標準パラレル 1:52
  • 標準パラレル2：64
  • 基準緯度: 0
  • 偽東: 18500000
  • 偽北距離: 0

PROJ.4: +proj=aea +lat_1=52 +lat_2=64 +lat_0=0 +lon_0=105 +x_0=18500000 +y_0=0 +ellps=クラス +units=m +towgs84=28,-130,-95 ,0,0,0,0 +no_defs

MapInfo: "アルベルス-シベリア", 9, 1001, 7, 105, 0, 64, 52, 18500000, 0.

それで、私は最終的にこのコードを取得しましたが、何もしません (そしてフリーズすることさえあります)。何が問題なのですか?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Choropleth</title>
    <script type="text/javascript" src="d3/d3.v3.js"></script>
    <script type="text/javascript" src="d3/queue.v1.min.js"></script>
    <script type="text/javascript" src="d3/topojson.v0.min.js"></script>
</head>
<body>
    <h1>My Choropleth</h1>
    <script type="text/javascript">

        var width = 960,
            height = 500;

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

        var pr = d3.geo.albers()
            .center([105,0])
            .parallels([52, 64])
            .scale(1000);


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

        d3.json("map_rus_topo.json", function(error, map) {
         svg.append("path")
          .datum(topojson.object(map, map.objects.map_rus))
          .attr("d", path);
        });

    </script>
</body>

ここで すべての JSON ファイルを見つけることができます。もう 1 つの質問: TopoJsonファイルのregionフィールド
の値を参照するにはどうすればよいですか。

4

1 に答える 1

17

最初の問題は、GeoJSON ファイルが [経度°、緯度°] 度 (別名EPSG:4326 または WGS 84 ) ではないことです。GeoJSON ファイルを WGS 84 に変換するには、まず投影ファイルを作成する必要があります。たとえばalbers.prj、OGR にソース投影が何であるかを伝えることができます。

+proj=aea +lat_1=52 +lat_2=64 +lat_0=0 +lon_0=105 +x_0=18500000 +y_0=0 +ellps=krass +units=m +towgs84=28,-130,-95,0,0,0,0 +no_defs

次に、GeoJSON ファイルを WGS 84 に変換して「投影解除」します。

ogr2ogr -f GeoJSON -s_srs albers.prj -t_srs EPSG:4326 map_rus_wgs84_geo.json map_rus_geo.json

投影座標ではなく、WGS 84 で TopoJSON に変換できるようになりました。私はまた、いくつかの単純化を行う自由を取りました:

topojson -o map_rus_wgs84_topo.json -s 1e-7 -- russia=map_rus_wgs84_geo.json

2 番目の問題は、D3 の射影定義が正しくないことです。d3.geo.albers 投影法には、米国中心のマップ用に設計されたデフォルトの回転と中心があるため、中心を定義するだけでなく、デフォルトの回転をオーバーライドする必要もあります。実際、+lon_0 (中央子午線) 投影パラメーターは、投影の中心ではなく、投影の回転にマップされます。与える:

var projection = d3.geo.albers()
    .rotate([-105, 0])
    .center([-10, 65])
    .parallels([52, 64])
    .scale(700)
    .translate([width / 2, height / 2]);

(ロシアをビューポートの中心に置くために center パラメーターをいじりました。必要に応じて、これを自動的に計算することもできます。) 次のように表示されるはずです。

アルバース シベリア

TopoJSON で射影 (デカルト) 座標を操作してから、null (アイデンティティ) 射影で d3.geo.path を定義することもできますが、それは別の質問に譲ります。

于 2013-04-18T16:05:38.340 に答える