从形状转换为 topojson 的问题答案

【问题标题】：Problems converting from shape to topojson从形状转换为 topojson 的问题
【发布时间】：2014-02-27 22:22:43
【问题描述】：

我正在尝试将墨西哥城市的 shapefile 转换为 topojson，并使用本教程 http://bost.ocks.org/mike/map/#converting-data 使用 d3.js 显示它。我已经设法转换它，但我无法显示它。任何帮助将不胜感激。

这是我目前的工作流程：

1) 下载并解压 shapefile

wget http://mapserver.inegi.org.mx/MGN/mgm2010v5_0a.zip 
unzip mgm2010v5_0a.zip

2) 转换为 JSON，重新投影为 lat-long 并对 shapefile 进行子集化

ogr2ogr  -f GeoJSON -t_srs EPSG:4326 -where "CVE_ENT IN ('09')" df.json Municipios_2010_5A.shp

3) 转换为 topojson

topojson --id-property OID -p name=OID -p name -o df2.json df.json

4) 并创建 html 代码

<!DOCTYPE html>
<meta charset="utf-8">
<style>

/* CSS goes here. */

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
height = 1160;

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

 d3.json("df2.json", function(error, df2) {
 svg.append("path")
  .datum(topojson.feature(df2, df2.objects.df))
  .attr("d", d3.geo.path().projection(d3.geo.mercator()));
 });

 </script>

如果我运行 html，我只会得到一个空白页。关于我可能做错了什么有什么想法吗？

【问题讨论】：

这是您的整个 html 文件，还是只是一个 sn-p？如果这就是全部内容，您需要在末尾添加一个</body> 结束标记。
在大多数浏览器中可用的一个有用的诊断工具是点击F12 以打开控制台并查看文档中的实际内容。或者，您可以使用查看源代码，但我不确定这是否会捕获由 javascript 生成的页面的加载后添加内容。
是的，很抱歉。但即使我添加了正文结束标签，我仍然没有得到任何输出。这是我从控制台得到的。好像什么都没画。
要清楚，你的 topojson 输出不是空的，对吧？它正在正确生成数据并且只是不显示它？还是它没有生成任何数据，然后正确显示缺少的数据？
绝对不是空的，看起来像topojson。如果您愿意看一下，这里有一个链接！ dl.dropboxusercontent.com/s/2ik1mi3724v16bu/DF2.json

标签： d3.js geojson shapefile gdal topojson

【解决方案1】：

如果您不特别关注投影，最简单的选择是仅使用 shapefile 提供的投影（Lambert Conformal Conic）。使用topojson 的 --width 和 --height 命令行标志将投影的 shapefile 重新缩放到合理的大小。例如，如果你想要 960px 宽的东西，你可以说：

topojson --width=960 --margin 20 --simplify=.1 -o mx.json -- municipalities.shp

（这也简化了屏幕坐标，方便。）

带有 Makefile 的完整示例位于 bl.ocks.org/9265467:

另一方面，如果您想指定自己的投影，那么使用 ogr2ogr 撤消投影，然后在浏览器中定义投影是合理的。但在这种情况下，您需要适当地指定投影参数。例如，要在浏览器中重新创建相同的投影，您可以说：

var projection = d3.geo.conicConformal()
    .rotate([102, 0])
    .center([0, 24])
    .parallels([17.5, 29.5])
    .scale(1850)
    .translate([width / 2, height / 2]);

（根据需要调整中心和缩放比例以适应所需的视口。）bl.ocks.org/9265674 演示了这种替代方法：

我通常更喜欢使用投影坐标（上面的第一种方法），因为它们渲染速度更快并且简化更有效。另一方面，如果您想动态更改投影（不可否认，使用如此复杂的 shapefile 不太可能），那么在浏览器中进行投影是可行的方法。并且在开发过程中在浏览器中投影很好，因为更改参数和重新加载更容易。

【讨论】：