Mappa con d3.js e TopoJSON, Albers Siberia proiezione

Sto provando a creare un Choropleth con d3.js ma mi sono bloccato appena all'inizio. Ho trovato uno Shapefile e ho generato file GeoJSON e TopoJson da esso proprio come here. La mappa utilizza la proiezione di Albers-Siberia. Quello che ho trovato su questa proiezione:Mappa con d3.js e TopoJSON, Albers Siberia proiezione

proiezione: Albers Equal-Area Conica

Unità: Metri
Spheroid: Krasovsky
meridiano centrale: 105
parallela standard 1: 52
Standard Parallel 2: 64
Latitudine di riferimento: 0
False Easting: 18500000
False Northing: 0

PROJ.4: + proj = aea + lat_1 = 52 + 64 + = lat_2 lat_0 = 0 + lon_0 = 105 + x_0 = 18500000 + y_0 = 0 + ellps = krass + unità = m + towgs84 = 28, -130, -95,0,0,0,0 + no_defs

MapInfo: "Albers-Siberia", 9, 1001, 7, 105, 0, 64, 52, 18500000, 0.

Così ho finalmente ottenuto questo codice e non fa nulla (e anche freez up), cosa c'è che non va?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Choropleth</title> 
    <script type="text/javascript" src="d3/d3.v3.js"></script> 
    <script type="text/javascript" src="d3/queue.v1.min.js"></script> 
    <script type="text/javascript" src="d3/topojson.v0.min.js"></script> 
</head> 
<body> 
    <h1>My Choropleth</h1> 
    <script type="text/javascript"> 

     var width = 960, 
      height = 500; 

     var svg = d3.select("body").append("svg") 
        .attr("width", width) 
        .attr("height", height); 

     var pr = d3.geo.albers() 
      .center([105,0]) 
      .parallels([52, 64]) 
      .scale(1000); 


     var path = d3.geo.path().projection(pr); 

     d3.json("map_rus_topo.json", function(error, map) { 
     svg.append("path") 
      .datum(topojson.object(map, map.objects.map_rus)) 
      .attr("d", path); 
     }); 

    </script> 
</body>

È possibile trovare tutti i file JSON here.
E un'altra domanda: Come posso fare riferimento al valore del campo regione nel file my TopoJson.

fonte

2013-04-18 KoGor

Cosa succede esattamente quando si esegue il codice? Ricevete qualche tipo di messaggio di errore, output? –

No, nessun errore nella console. – KoGor

La dimensione dei file JSON potrebbe essere un problema. Hai provato a semplificarli o ad aspettare un po 'di più? –

Il primo problema è che il file GeoJSON non è in gradi [longitudine °, latitudine °], altrimenti noto come EPSG:4326 or WGS 84. Per convertire il tuo file GeoJSON in WGS 84, devi prima creare un file di proiezione, ad esempio albers.prj in modo da poter dire a OGR quale sia la proiezione di origine.

+proj=aea +lat_1=52 +lat_2=64 +lat_0=0 +lon_0=105 +x_0=18500000 +y_0=0 +ellps=krass +units=m +towgs84=28,-130,-95,0,0,0,0 +no_defs

Poi, “unproject” il file GeoJSON convertendolo in WGS 84:

ogr2ogr -f GeoJSON -s_srs albers.prj -t_srs EPSG:4326 map_rus_wgs84_geo.json map_rus_geo.json

ora che è possibile convertire in TopoJSON in WGS 84, piuttosto che coordinate proiettate. Ho anche preso la libertà di fare un po 'di semplificazione:

topojson -o map_rus_wgs84_topo.json -s 1e-7 -- russia=map_rus_wgs84_geo.json

Il secondo problema è che la tua definizione di proiezione in D3 non è corretta. La proiezione d3.geo.albers ha una rotazione e un centro predefiniti progettati per una mappa centrata negli Stati Uniti, quindi oltre a definire il centro dovrai anche ignorare la rotazione predefinita. In effetti, il parametro di proiezione + lon_0 (meridiano centrale) viene mappato alla rotazione della proiezione, non al centro della proiezione. Dare:

var projection = d3.geo.albers() 
    .rotate([-105, 0]) 
    .center([-10, 65]) 
    .parallels([52, 64]) 
    .scale(700) 
    .translate([width/2, height/2]);

(ho eluso con il parametro centrale per mettere la Russia al centro della finestra È possibile compute this automatically, se si preferisce..) Si dovrebbe ora vedere qualcosa come questo:

E 'anche possibile lavorare con proiettata (cartesiano) coordinate in TopoJSON, e quindi definire un d3.geo.path con un valore nullo (identità) di proiezione, ma Lo lascerò per una domanda a parte.

fonte

2013-04-18 16:05:38 mbostock

Questo è semplicemente fantastico! Grazie, per la risposta così veloce e completa. Sono nuovo di tutto questo, la mia prima volta a lavorare con le mappe. – KoGor

Inoltre, puoi spiegare per favore cosa rende --russia = in questo codice:> topojson -o map_rus_wgs84_topo.json -s 1e-7 - russia = map_rus_wgs84_geo.json. E non capisco le coordinate del centro, il link che U ha dato riguarda la scala di calcolo automatico e i parametri di traduzione, o mi sono perso qualcosa. – KoGor

Vedere il [riferimento della riga di comando TopoJSON] (https://github.com/mbostock/topojson/wiki/Command-Line-Reference) per la spiegazione completa. Sopra, sto usando '-o' per specificare il nome del file di output,' -s' per specificare la soglia di semplificazione in steradianti, e quindi i file di input seguono il separatore '--'. C'è solo un file di input ('map_rus_wgs84_geo.json'), e con il prefisso con' russia = ', posso impostare il nome dell'oggetto nella topologia generata. Ecco perché nell'esempio collegato, mi riferisco a 'russia.objects.russia'. – mbostock

Mappa con d3.js e TopoJSON, Albers Siberia proiezione

risposta

Problemi correlati