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

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