Question

我用D3的命令行工具创建了一张欧洲地图。

shp2json -n input/ne_50m_europe_qgis/ne_50m_europe_qgis.shp \
| ndjson-filter '["ALB", "AND", "AUT", "BEL", "BGR", "BIH", "BLR", "CHE", "CYP", "CZE", "DEU", "DNK", "ESP", "EST", "FIN", "FRA", "FRO", "GBR", "GIB", "GRC", "HRV", "HUN", "IMN", "IRL", "ISL", "ITA", "LIE", "LTU", "LUX", "LVA", "MCO", "MDA", "MDA", "MKD", "MLT", "MNE", "NLD", "NOR", "POL", "PRT", "ROU", "SMR", "SRB", "SVK", "SVN", "SWE", "UKR", "VAT", "XKX"].includes(d.properties.adm0_a3)' \
| ndjson-map 'd.properties = {"adm0_a3": d.properties.adm0_a3}, d' \
| ndjson-reduce \
| ndjson-map '{type: "FeatureCollection", features: d}' \
| geoproject 'd3.geoAzimuthalEquidistant().fitSize([960, 831.22], d)' \
> output/europe-geo.json

geo2topo countries=output/europe-geo.json \
| toposimplify -p 1 -f \
| topoquantize 1e5 \
> output/europe.json

我的问题是在伦敦上方放置一个标记（一个小的彩色圆圈）。我相信我有正确的纬度（51.513069）和经度（0.010360），但标记位置不正确？

Answer 1

以下是解决问题的方法：在代码中应用投影，而不是使用命令行工具。我还发现简化topojson会导致过度简化和不必要的小文件大小：

shp2json -n input/ne_50m_europe_qgis/ne_50m_europe_qgis.shp \
| ndjson-filter '["ALB", "AND", "AUT", "BEL", "BGR", "BIH", "BLR", "CHE", "CYP", "CZE", "DEU", "DNK", "ESP", "EST", "FIN", "FRA", "FRO", "GBR", "GIB", "GRC", "HRV", "HUN", "IMN", "IRL", "ISL", "ITA", "LIE", "LTU", "LUX", "LVA", "MCO", "MDA", "MDA", "MKD", "MLT", "MNE", "NLD", "NOR", "POL", "PRT", "ROU", "SMR", "SRB", "SVK", "SVN", "SWE", "UKR", "VAT", "XKX"].includes(d.properties.adm0_a3)' \
| ndjson-map 'd.properties = {"adm0_a3": d.properties.adm0_a3}, d' \
| ndjson-reduce \
| ndjson-map '{type: "FeatureCollection", features: d}' \
[REMOVE GEOPROJECT COMMAND HERE]
> output/europe-geo.json

geo2topo countries=output/europe-geo.json \
[OPTIONALLY REMOVE TOPOSIMPLIFY COMMAND HERE]
| topoquantize 1e5 \
> output/europe.json

以下是我用于制作地图的代码（注意我在代码中应用了我的投影）：

const width = 960, height = 831.22;

const svg = d3.select("#map")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

d3.json("europe.topo.json", function(error, topology) {
  if (error) throw error;

  const countries = topojson.feature(topology, topology.objects.countries);

  const projection = d3.geoAzimuthalEquidistant()
    .fitSize([960, 831.22], countries);

  const path = d3.geoPath()
    .projection(projection);

  svg.append("path")
    .datum(countries)
    .attr("stroke", "white")
    .attr("d", path);

  const coords = projection([0.010360, 51.513069]); // London

  const place = svg.append("g")
    .attr("transform", "translate(" + (coords[0] - 2.5) + "," + (coords[1] - 2.5) + ")");

  place.append("circle")
    .attr("fill", "red")
    .attr("r", 5);
});

如何在使用命令行工具制作的地图上放置标记？

1 个答案: