Question

我正在尝试将墨西哥城市的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，我会得到一个空白页面。关于我可能做错什么的任何想法？

Answer 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 - 那么在浏览器中进行投影是可行的方法。在开发过程中在浏览器中进行投影很不错，因为更容易更改参数并重新加载。

从shape转换为topojson的问题

1 个答案: