如何在使用命令行工具制作的地图上定位标记

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