Ich habe nycMap erstellt, ein Projekt, das angularJS (MVC), yeoman (build), d3 (mapping) und geoJSON (Geodaten).
Alles funktioniert sehr gut, aber ich musste einige Zeit damit verbringen, die richtige Skalierung und Übersetzung zu bekommen. Ich habe mich gefragt, wie ich automatisch herausfinden kann, in welchem Maßstab die Karte am besten zeigt und welche x- und y-Werte in die Übersetzung eingehen.
%Vor%(Wenn Sie sich für den Code interessieren, ist alles auf github . Der Code für die Karte lautet scripts/controllers/main.js , das ist dasselbe wie oben gezeigt.)
Ich hatte die gleichen Probleme. Aber es ist sehr einfach zu tun, wenn Sie eine Bounding-Box haben, die aus dem GeoJSON (wie meetamit sagte), oder während der Erstellung des GeoJson. Und die Breite des gewünschten SVG.
Ich beginne mit den Variablen lattop, lonleft, lonright, width und height für die Bounding Box des Geojsons und die Dimensionen des Bildes. Ich habe mich noch nicht damit beschäftigt, aus dem Unterschied in latutude eine gute Höhe zu berechnen. Die Höhe wird also so geschätzt, dass sie groß genug für das Bild ist. Der Rest sollte klar aus dem Code sein:
Beachten Sie, wenn Sie die Datumszeile (180 Grad) überschreiten, müssen Sie den Überlauf berücksichtigen.
Gegeben:
%Vor% someScale ist die Pixelbreite der gesamten Welt, wenn projiziert mit der Mercator-Projektion. Also, wenn Ihre JSON-Daten Konturen für die ganze Welt hätten - von lat / lng -180,90 bis latLng 180, -90 - und wenn someScale 1024 wäre, dann wäre die Welt so gezeichnet, dass sie genau in a passt 1024x1024 Pixel Quadrat. Das sehen Sie in dieser Google Maps-Ansicht (naja ... irgendwie ... nicht ganz ... lies weiter ...).
Das ist jedoch nicht genug. Wenn die Welt mit 1024 px ohne irgendeine Übersetzung gezeichnet wird, wird lat / lng 0,0 (d. H. Die "Mitte" der Welt) an dem 0,0 Pixel der projizierten Karte (d.h. oben links) sitzen. Unter diesen Bedingungen haben die gesamte nördliche Hemisphäre und die westliche Hemisphäre negative x- oder y-Werte und fallen daher außerhalb der gezeichneten Region. Unter diesen Bedingungen würde die untere rechte Ecke der Welt (d.h. lat / lng -90, 180) genau in der Mitte des 1024 · 1024-Quadrats liegen (d. H. Bei Pixel 512,512).
Um also die Welt in dem hier beschriebenen Quadrat zu zentrieren, müssen Sie translate die Karte um die Hälfte ihrer Breite in X- und Y-Richtung bearbeiten. I.e. Du brauchst
Damit erhalten Sie genau die Google Map-Ansicht, mit der ich verlinkt habe.
Wenn Ihre json-Daten nur einen Teil der Welt haben (wie nyc oder NY state), zeichnen Sie mit dieser xy-Projektion die Umrisse in der richtigen geografischen Position relativ zur gesamten 1024x1024-Welt überspannenden Region. Es erscheint also ziemlich klein, mit vielen Leerzeichen.
Die Herausforderung besteht darin, die Projektion so zu skalieren und zu übersetzen, dass der betreffende Bereich das Quadrat von 1024 x 1024 ausfüllt. Und ... bis jetzt habe ich diese Frage nicht beantwortet, aber ich hoffe, dass diese Erklärung Sie in die richtige Richtung weist, diese Mathematik herauszufinden. Ich werde auch versuchen, die Antwort später fortzusetzen, wenn ich mehr Zeit habe. : /
Es gibt ein Beispiel hier , das die Grenzen von Ländern von Geojson und dann skaliert und die Karte in dieses Land übersetzt . Der Code ist ein bisschen hässlich; Es gibt jedoch Bemühungen, dies in Zukunft einfacher zu machen (siehe dies und dieses Problem ).
Tags und Links d3.js