2013-07-15 1 views
6

Ich habe eine Standardbroschüre, die eine Kachelebene zeigt. Broschüre Jetzt lässt nur verwenden Sie panTo Methode LatLng zum BeispielLeaflet: panTo Web Mercator-Koordinaten (EPSG 3857)

map.panTo(new L.LatLng(40.17, -98.12)); 

Wie werde ich über panTo Methode verwenden, wenn meine Koordinaten in EPSG:3857 zum Beispiel (3679364.68,-9096106.74) sind?

In Openlayers ist das ganz einfach, denn sobald man eine Kartenprojektion definiert hat, funktioniert alles in dieser Projektion. Aber Leaflet funktioniert immer auf der Außenseite.

Eine einfache Möglichkeit, dies zu erreichen unter Verwendung Prospekt-Bibliothek?

Danke!

Antwort

5

Ich kann es arbeiten, wenn ich proj4js Bibliothek verwenden, um die Koordinaten zu transformieren, indem Sie diese:

var source = new Proj4js.Proj('EPSG:3857'); 
var dest = new Proj4js.Proj('EPSG:4326'); 
var p = new Proj4js.Point(-9096106.74,3679364.68); //this takes x,y 
Proj4js.transform(source, dest, p); 
this.map.setView(new L.LatLng(p.y, p.x),zoom); 

Aber das ist noch nicht die ideale Lösung, da es mir ein Megabyte für für einschließlich der Bibliothek Steuern. Ich suche immer noch nach einer Flugblattlösung. Wenn Sie wissen, dass die interne Broschüre bereits EPSG: 3857 zum Abrufen von Kacheln verwendet, sollte dies nicht so schwierig sein.

Update 

Um dies rein in Leaflet zu tun, sehen Sie @ ARsl Antwort. Nur der Grund, warum ich das immer noch als meine Antwort akzeptiere, weil ich mich immer noch unwohl dabei fühle, die Projektionsberechnungen so zu machen (nicht dass sie falsch liegen), und gerade deshalb akzeptiere ich diese Antwort nicht. Plus proj4js als zusätzliche Vorteile der Unterstützung von vielen anderen Daten.

+0

Ist die proj4js lib nicht nur 70kb? Ich stimme Ihnen jedoch zu, wünschen Sie, dass diese Funktionalität in der Broschüre auch war. –

+0

@RyanM Das ist richtig und normalerweise würde ich es gerne benutzen. Aber in dieser speziellen Anwendung kämpfe ich darum, Bytes buchstäblich zu speichern. Es tut also weh, eine weitere Lib für eine so triviale Aufgabe importieren zu müssen, dass Leaflet schon weiß, wie man es im Inneren macht. – Shaunak

2

Ich habe auch keine integrierte Methode zum Konvertieren von EPSG: 3857 Koordinaten zu LatLng gefunden.

LEAFLET crs Klasse L.CRS.EPSG3857 hat nur project Methode, die zu L.LatLngL.Point in EPSG umwandelt: 3857 Koordinaten. https://github.com/Leaflet/Leaflet/blob/master/src/geo/crs/CRS.EPSG3857.js

Aber es ist ganz einfach, es mit unproject Methode zu erweitern:

L.CRS.EPSG3857.unproject = function (point) { // Point -> LatLng 
    var earthRadius = 6378137; 
     projectionPoint = L.point(point).divideBy(earthRadius); 

    return this.projection.unproject(projectionPoint); 
}; 

Dann können Sie es mit panTo Methode verwenden:

map.panTo(map.options.crs.unproject([1372720.6476878107, 5690559.995203462])); 

oder:

map.panTo(L.CRS.EPSG3857.unproject([1372720.6476878107, 5690559.995203462])); 
9

Broschüre können Sie verwenden panTo Methode von unproject 3857 Punkt. Wenn Sie die proj4js-Bibliothek nicht verwenden möchten, erreichen Sie dies auch in der Broschüre.

var point = new L.Point(3679364.68,-9096106.74); // Lon/Lat 
var earthRadius = 6378137; 
var latlng = L.Projection.SphericalMercator.unproject(point.divideBy(earthRadius)); 

map.panTo(new L.LatLng(latlng.lat, latlng.lng)); 
+0

+1 Danke! gute Antwort! Ich fühle mich immer noch unwohl dabei, die Projektionsberechnungen so zu machen (nicht, dass sie falsch sind), und gerade deshalb akzeptiere ich diese Antwort nicht. Plus proj4js als zusätzliche Vorteile der Unterstützung von vielen anderen Daten. – Shaunak