从shape转换为topojson的问题

Question

从shape转换为topojson的问题

12

我想将一个墨西哥市镇的shapefile转换为topojson，并使用d3.js显示，使用这个教程：http://bost.ocks.org/mike/map/#converting-data。我已经成功地将其转换，但是无法显示。非常感谢任何帮助。

到目前为止，我的工作流程如下：

1）下载并解压缩shapefile

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

2) 转换为JSON格式，重投影为经纬度坐标并从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代码，只能看到一个空白页面。你有什么想法吗？可能是我的操作有误？

- eclark

这是你的整个HTML文件还是只是一部分？如果这是整个文件，你需要在结尾处添加一个</body>结束标签。 - Martin

请明确一下，您的 topojson 输出不是空的，对吗？它能够正确生成数据，只是无法显示吗？还是说它根本没有生成任何数据，并且能够正确地显示缺少数据？ - Martin

在 Jfiddle 中查看输出的 HTML，似乎路径为空。您是否有正在遵循的教程或参考页面，最好带有一个可工作的示例？我想也许路径没有正确生成，因此您的 SVG 将是空的。 - Martin

是的。我正在使用这个http://bost.ocks.org/mike/map/#converting-data。 - eclark

我恐怕对这个问题无能为力。我建议您尝试像教程中展示的那样，在迷你地图之后分离出所有的细节，并观察它们是否都与所期望的值相符。 - Martin

显示剩余6条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mbostock · Accepted Answer

如果您对投影没有特别要求，最简单的选择就是使用shapefile提供的投影（Lambert Conformal Conic）。使用topojson的--width和--height命令行标志将投影后的shapefile重新调整为合理的大小。例如，如果您想要一个宽度为960像素的东西，可以这样说：

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上演示:

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