명령 줄 도구로 만든 맵에 마커를 배치하는 방법은 무엇입니까?

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

다음은 문제의 해결책입니다. 코드에서 투영을 적용하고 명령 줄 도구는 사용하지 마십시오. 여기

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 

내가 다음 (I 코드 내 프로젝션을 적용하고 통지) 내지도를 만들기 위해 사용되는 코드입니다 :

나는 또한 topojson를 단순화하는 것은 단순화를 통해 발생하고 불필요하게 작은 파일 크기 발견

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