3

这是topojson关于so的第一个问题。我在渲染地图（纽约市行政区）时遇到问题，无法弄清楚原因。下面的代码只是此示例的副本，带有不同的 topojson 文件。我已经在这里上传了文件。以下也是有关我如何创建文件的详细信息。现在，我只是得到混乱的线条。可能，原因是 topojson 文件，但我不知道出了什么问题。

ps：我无法标记这个，topojson因为该标记以前没有使用过

拓扑JSON文件

1) 从这里下载 shapefile

（在“自治市镇和社区区”下，文件“自治市镇”（左），ArcView Shapefile）

2) 使用 QGis 简化 shapefile

3）转换为TopoJSON

ogr2ogr -f geoJSON nybb-geo.json nybb.shp
topojson -o nybb.json nybb-geo.json

HTML/JS 代码

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

.boundary {
  fill: none;
  stroke: #000;
  stroke-width: .5px;
}

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

var width = 960,
    height = 500;

var path = d3.geo.path();

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

d3.json("/geo/nybb.json", function(error, topology) {
  svg.append("path")
      .datum(topojson.object(topology, topology.objects['nybb-geo'].geometries[0]))
      .attr("d", path)
      .attr("class", "boundary");
});

</script>
4

1 回答 1

6

正如用户 10579 的评论所建议的那样，我能够通过将 shapefile 重新投影到 NAD83 (EPSG 4269) 来解决问题。从重新投影的 shapefile 创建 topojson 文件后，d3.js 显示地图

var projection = d3.geo.albers();
var path = d3.geo.path().projection(projection);

我遇到的第二个问题与正确的中心、比例和平移值有关。使用上面的代码 nyc 将只是一个带有很多空白的小点。找到正确的中心、比例和平移值可能有点乏味。最后，我添加了下面的代码，它允许您拖放地图并滚动以更改比例参数。每次更改后都会显示这些值，以便轻松地将地图放置在正确的位置，并且只需采用控制台输出中的最后一个参数。

  svg.call(d3.behavior.zoom()
          .translate(projection.translate())
          .scale(projection.scale())
          .on("zoom", redraw));

  function redraw() {
      if (d3.event) {
        projection
          .translate(d3.event.translate)
          .scale(d3.event.scale);
      }
      map.datum(topojson.object(topology, topology.objects.nyct2010))
        .attr("d", path)
        .attr("class", "boundary");
      console.log("Current scale:" + projection.scale())
      console.log("Current translate:" + projection.translate())
      console.log("Current rotate:" + projection.rotate())
  }
于 2012-12-27T20:23:08.380 回答