Map 带有d3.js和TopoJSON的地图，阿尔伯斯西伯利亚投影_Map_D3.js_Geojson_Topojson

Map 带有d3.js和TopoJSON的地图，阿尔伯斯西伯利亚投影

map d3.js

Map 带有d3.js和TopoJSON的地图，阿尔伯斯西伯利亚投影,map,d3.js,geojson,topojson,Map,D3.js,Geojson,Topojson,我正试图用d3.js制作一个Choropleth，但刚开始我就被绊倒了。我找到了一个Shapefile，并从中生成了GeoJSON和TopoJson文件，就像。该地图使用阿尔伯斯西伯利亚投影。我对这个投影的发现：投影：阿尔伯斯等面积圆锥单位：米球体：克拉索夫斯基中央子午线：105 标准平行线1:52 标准平行2:64 参考纬度：0 假东距：18500000 假北距：0 项目4:+PROJ=aea+lat_1=52+lat_2=64+lat_0=0+lon_0=105+x_0=1850

我正试图用d3.js制作一个Choropleth，但刚开始我就被绊倒了。我找到了一个Shapefile，并从中生成了GeoJSON和TopoJson文件，就像。该地图使用阿尔伯斯西伯利亚投影。我对这个投影的发现：

投影：阿尔伯斯等面积圆锥

单位：米
球体：克拉索夫斯基
中央子午线：105
标准平行线1:52
标准平行2:64
参考纬度：0
假东距：18500000
假北距：0

项目4:+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+无定义

地图信息：“阿尔伯斯西伯利亚”，91001，7105，0，64，5218500000，0

所以我最终得到了这段代码，它什么也没做（甚至是freez-up），怎么了

<!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>


合唱团
我的合唱团
可变宽度=960，
高度=500；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var pr=d3.geo.albers（）
.center（[105,0]）
.平行线（[52,64]）
.比例尺（1000）；
var path=d3.geo.path（）.projection（pr）；
d3.json（“map\u rus\u topo.json”），函数（错误，map）{
追加（“路径”）
.datum（topojson.object（map，map.objects.map_-rus））
.attr（“d”，路径）；
});

您可以找到所有JSON文件。

还有一个问题：我如何引用我的TopoJson文件中region字段的值。
第一个问题是，您的GeoJSON文件不是以度[经度]、纬度为单位的，否则称为。要将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
第二个问题是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]);
（我使用了“中心”参数，将俄罗斯置于视口的中心。如果愿意，您可以这样做。）您现在应该看到如下内容：

也可以使用TopoJSON中的投影（笛卡尔）坐标，然后使用空（标识）投影定义d3.geo.path，但我将把它留给一个单独的问题。
运行代码时会发生什么？您是否收到任何类型的错误消息，输出？不，控制台中没有错误。JSON文件的大小可能有问题。你有没有试过简化它们，或者只是再等一会儿？是的，我试过使用简化文件（337KB），但无论如何都不起作用。太棒了！谢谢你这么快又完整的回答。我对所有这些东西都不熟悉，这是我第一次使用地图。有关完整的解释，请参阅。在上面，我使用
-o
指定输出文件名，
-s
指定简化阈值（以steradian为单位），然后输入文件遵循
--
分隔符。只有一个输入文件（
map\u rus\u wgs84\u geo.json
），通过前缀
rusia=
，我可以在生成的拓扑中设置对象的名称。这就是为什么在链接的示例中，我指的是
rusia.objects.rusia
。至于投影的中心坐标，[-10°，65°]，我只是根据看起来很好的东西来制作它们。中心坐标和其他坐标一起旋转，所以通常中心经度（这里是-10°）在圆锥投影下接近于零。同样，中心纬度将与平行线（52°和64°）大致在同一范围内，以尽量减少圆锥投影的失真；添加了说明。topojson命令行工具假定GeoJSON输入为UTF-8，Shapefile输入为Windows1252，并始终生成UTF-8输出。如果您的shapefile输入采用不同的编码，则可以使用
--shapefile编码
，但这种情况非常罕见。如果您的GeoJSON输入不在UTF-8中，请使用
ogr2ogr-lco ENCODING=UTF-8
进行修复。