0

我正在尝试制作与此示例完全相同的地图（http://bost.ocks.org/mike/map/），但重点是澳大利亚和新西兰。我已按照说明进行操作，但这些地点的点未在我的地图上呈现。

这就是我生成数据的方式：

ogr2ogr -f GeoJSON -where "adm0_a3 IN ('AUS', 'NZL')" subunits.json ne_10m_admin_0_map_subunits.shp

ogr2ogr -f GeoJSON -where "(iso_a2 = 'AU' OR iso_a2 = 'NZ') AND SCALERANK < 8" places.json ne_10m_populated_places.shp

topojson --id-property su_a3 -p name=NAME -p name -o aus.json subunits.json places.json

这是我到目前为止的代码：http: //bashsolutions.com.au/australia.html

地图显示了，但城市的点没有显示。我究竟做错了什么？

编辑：所以这不是很清楚，只是有很大的长错误，所以这里是实际的代码：

<script>

var width = 960,
    height = 1160;


//var subunits = topojson.object(aus, aus.objects.subunitsAUS);

var projection = d3.geo.mercator()
  //.center([0,0])
  .center([180,-40])
  .scale(400)
  //.translate([width / 2, height / 2])
  .precision(.1);

var path = d3.geo.path()
  .projection(projection)
  .pointRadius(2);

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

d3.json("aus.json", function(error, aus) {
  svg.selectAll(".subunit")
    .data(topojson.object(aus, aus.objects.subunits).geometries)
    .enter().append("path")
    .attr("class", function(d) { return "subunit " + d.id; })
    .attr("d", path);

  svg.append("path")
    .datum(topojson.mesh(aus, aus.objects.subunits, function(a,b) { return a !== b; }))
    .attr("d", path)
    .attr("class", "subunit-boundary");

  svg.append("path")
    .datum(topojson.mesh(aus, aus.objects.subunits, function(a,b) { return a == b; }))
    .attr("d", path)
    .attr("class", "subunit-boundary External");

/* This is the failing bit */
  svg.append("path")
      .datum(topojson.object(aus, aus.objects.places))
      .attr("class", "place")
      .attr("d", path);
/* End of failing bit */

/*
  svg.selectAll(".place-label")
      .data(topojson.object(aus, aus.objects.places).geometries)
    .enter().append("text")
      .attr("class", "place-label")
      .attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; })
      .attr("x", function(d) { return d.coordinates[0] > -1 ? 6 : -6; })
      .attr("dy", ".35em")
      .style("text-anchor", function(d) { return d.coordinates[0] > -1 ? "start" : "end"; })
      .text(function(d) { return d.properties.name; });
*/

});
4

2 回答 2

1

当您绘制轮廓时，您需要删除 TKL (Tokelau) 数据点。

   svg.append("path")
      .datum(topojson.mesh(aus, aus.objects.subunits, function(a, b) {
           return a === b && a.id !=="TKL" }))
      .attr("d", path)
      .attr("class", "subunit-boundary External");

我仍在研究为什么会产生错误，但是将这个条件添加到网格函数过滤器似乎可以解决问题。

于 2013-03-28T09:12:41.590 回答
0

我发现这个问题解决了这个问题，但它仍然没有解释为什么它首先失败了。

这是修复： http ://bashsolutions.com.au/australia2.html

这段代码替换了上面的失败位：

svg.selectAll(".place")
  .data(topojson.object(aus, aus.objects.places).geometries)
.enter().append("circle")
  .attr("d", path)
  .attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; })
  .attr("r", 2)
  .attr("class", "place");

所以这可以通过做一些类似于标签位（上面注释掉）但画一个圆圈而不是文本来解决它。

但我仍然不确定上述位有什么问题，因为它与 Mike Bostock 的示例相同（除了数据）。

于 2013-03-28T08:27:52.037 回答