2017-01-16 2 views
0

ヨーロッパの地図を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)は正しいと思っていますが、マーカーが正しく配置されていませんか?

答えて

0

問題の解決方法は次のとおりです。コマンドラインツールを使用せずに、コードに投影を適用します。私はまた、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); 
}); 
関連する問題