使用topojson和d3js在澳大利亚地图上显示城市

Displaying cities on an Australian map using topojson and d3js

本文关键字：地图 显示 城市 澳大利亚 topojson d3js 使用      更新时间：2023-09-26

我想做一个地图完全像这个例子(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; });
*/
});

绘制轮廓线时，需要删除TKL(托克劳)数据点。

   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");

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

我找到了解决这个问题的方法，但它仍然不能解释为什么它首先会失败。

修复方法如下: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");

所以这是通过做一些类似于标签位(上面被注释掉了)的事情来解决的，但是画了一个圆圈而不是文本。

但我仍然不确定上面的bit有什么问题，考虑到它与Mike Bostock的例子(除了数据)相同。

相关文章：