从shape转换为topojson的问题

ecl*_*ark 12 shapefile gdal geojson d3.js topojson

我想墨西哥城市的shape文件转换成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 
Run Code Online (Sandbox Code Playgroud)

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

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

3)转换为topojson

topojson --id-property OID -p name=OID -p name -o df2.json df.json 
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

如果我运行html我只是得到一个空白页面.关于我可能做错什么的任何想法?

mbo*_*ock 24

如果您不特别关注投影,最简单的选择是使用shapefile(Lambert Conformal Conic)提供的投影.使用topojson的--width--height命令行标志将投影的shapefile重新调整为合理的大小.例如,如果你想要960px宽的东西,你可以说:

topojson --width=960 --margin 20 --simplify=.1 -o mx.json -- municipalities.shp
Run Code Online (Sandbox Code Playgroud)

(这也方便地简化了屏幕坐标.)

使用Makefile的完整示例位于bl.ocks.org/9265467:

墨西哥

另一方面,如果要指定自己的投影,则使用ogr2​​ogr撤消投影,然后在浏览器中定义投影是合理的.但在这种情况下,您需要适当地指定投影参数.例如,要在浏览器中重新创建相同的投影,您可以说:

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

(根据您的喜好调整中心和比例以适合您想要的视口.)这种替代方法在bl.ocks.org/9265674中进行了演示:

墨西哥2

我通常更喜欢使用投影坐标(上面的第一种方法),因为渲染速度更快,简化更有效.另一方面,如果你想动态地改变投影 - 不可能这么复杂的shapefile - 那么在浏览器中进行投影是可行的方法.在开发过程中在浏览器中进行投影很好,因为更容易更改参数和重新加载.