Karte mit d3.js und TopoJSON, Albers Siberia Projektion

Ich versuche eine Choropleth mit d3.js zu machen, aber ich bin erst am Anfang steckengeblieben. Ich habe eine Shapefile gefunden und GeoJSON- und TopoJson-Dateien daraus erzeugt, genau wie here. Die Karte verwendet Albers-Sibirien Projektion. Was ich an dieser Projektion gefunden:Karte mit d3.js und TopoJSON, Albers Siberia Projektion

Projektion: Albers Equal-Gebiet Conic

Einheiten: Meter
Sphäroid: Krasovsky
Zentralmeridian: 105
Standard Parallel 1: 52
Standard Parallel 2: 64
Referenz Breitengrad: 0
Falsch Ostwert: 18500000
Falsch 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 + Einheiten = m + towgs84 = 28, -130, -95,0,0,0,0 + no_defs

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

Also habe ich diesen Code endlich und es macht nichts (und sogar freez up), was ist los?

<!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>

Sie können alle JSON-Dateien here finden.
Und noch eine Frage: Wie kann ich auf den Wert von Bereich Feld in meine TopoJson Datei beziehen.

Quelle

2013-04-18 KoGor

Was genau passiert, wenn Sie den Code ausführen? Erhalten Sie irgendeine Art von Fehlermeldung, Ausgabe? –

Nein, keine Fehler in der Konsole. – KoGor

Die Größe der JSON-Dateien kann ein Problem sein. Haben Sie versucht, sie zu vereinfachen oder nur etwas länger zu warten? –

Das erste Problem ist, dass Ihre GeoJSON-Datei nicht in Grad [Längengrad °, Breitengrad °], sonst als EPSG:4326 or WGS 84 bekannt ist. Um Ihre GeoJSON-Datei in WGS 84 zu konvertieren, müssen Sie zuerst eine Projektionsdatei erstellen, z. B. albers.prj, damit Sie OGR die Quellprojektion mitteilen können.

+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

Dann „unproject“ die GeoJSON Datei, indem es auf WGS 84 Umwandlung:

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

Jetzt können Sie auf TopoJSON in WGS 84, statt projizierten Koordinaten umwandeln. Ich habe auch die Freiheit zu tun, einige Vereinfachungen getroffen:

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

Das zweite Problem ist, dass Ihre Projektion Definition in D3 falsch ist. Die d3.geo.albers-Projektion hat eine Standarddrehung und -mitte, die für eine US-zentrierte Karte entworfen wurde. Daher müssen Sie neben der Definition der Mitte auch die Standarddrehung überschreiben. Tatsächlich wird der Projektionsparameter + lon_0 (Mittelmeridian) der Projektion und nicht dem Mittelpunkt der Projektion zugeordnet. Giving:

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

(I mit dem Zentrum Parameter gepfuscht Russland zu setzen in der Mitte des Bildfensters Sie können compute this automatically wenn Sie es vorziehen..

Es ist auch möglich, mit projizierten (Cartesian zu arbeiten) Koordinaten in TopoJSON, und dann definieren eine d3.geo.path mit einem Null (Identität) Projektion, aber:) Sie sollten jetzt etwas sehen Ich werde das für eine separate Frage hinterlassen.

Quelle

2013-04-18 16:05:38 mbostock

Das ist einfach großartig! Danke, für die schnelle und vollständige Antwort. Ich bin neu in all diesen Dingen, mein erstes Mal mit Karten arbeiten. – KoGor

Darüber hinaus können Sie bitte erklären, was make --russia = in diesem Code:> topojson -o map_rus_wgs84_topo.json -s 1e-7 - russland = map_rus_wgs84_geo.json. Und ich verstehe es nicht über Mittelkoordinaten, die Verbindung, die U gab, dreht sich um Auto-Computing-Skala und übersetzen Params, oder ich etwas verpasst. – KoGor

Weitere Informationen finden Sie in der [TopoJSON-Befehlszeilenreferenz] (https://github.com/mbstock/topojson/wiki/Command-Line-Reference). Oben verwende ich '-o', um den Namen der Ausgabedatei anzugeben,' -s', um den Vereinfachungsschwellenwert in Steradiant anzugeben, und dann folgen die Eingabedateien dem Trennzeichen '--'. Es gibt nur eine Eingabedatei ('map_rus_wgs84_geo.json'), und durch Voranstellen von' russia = 'kann ich den Namen des Objekts in der generierten Topologie festlegen. Deshalb verweise ich im verlinkten Beispiel auf "russia.objects.russia". – mbostock

Karte mit d3.js und TopoJSON, Albers Siberia Projektion

Antwort

Verwandte Themen