Hinzufügen von zusätzlichen Zoomstufen in Leaflet Maps

Question

Ich verwende leaflet, um eine Fotokarte mit meinen eigenen Kacheln zu erstellen, die wie erwartet funktioniert.

Im Versuch, herauszufinden, wie ich den Zoom aus nach diesen Quadtree Typmustern verhindern:

• Zoom-Ebene 0 - Gesamte Karte width = 256px;
• Zoom Level 1 - Gesamte Kartenbreite = 512px;
• Zoom Level 2 - Gesamte Kartenbreite = 1024px;
• Und so weiter ...

Ich mag wäre in der Lage sein, es zu vergrößern sagen Schritten von 25% oder 100 Pixel.

Ein Beispiel 100px Schritten:

• Zoom-Ebene 0 - Gesamte Karte width = 200px;
• Zoom Level 1 - Gesamte Kartenbreite = 300px;
• Zoom Level 2 - Gesamte Kartenbreite = 400px;
• Und so weiter ...

---

Frage: Was ist die Logik, dies zu tun? Wenn es überhaupt möglich ist?

---

Mein Grund für den Wunsch, dies zu tun ist, so dass mein Foto Karte (die wie eine normale Karte wickeln tun) mehr responsive und paßt sein kann der Benutzer Größe schön screenen.

Ich machte eine Demonstration meiner Frage, die here

Answer 1

Die kurze Antwort ist zu sehen, dass Sie nur Zoomstufen, für die Fliesen im Voraus gemacht haben zeigen können. Leaflet erstellt für Sie keine Zwischenzoomstufen.

Die lange Antwort ist, dass, um dies tun zu können, benötigen Sie Ihre eigene CRS Skala Methode zu definieren und an Ihre Karte weitergeben, zum Beispiel:

L.CRS.CustomZoom = L.extend({}, L.CRS.Simple, { 
    scale: function (zoom) { 
     // This method should return the tile grid size 
     // (which is always square) for a specific zoom 
     // We want 0 = 200px = 2 tiles @ 100x100px, 
     // 1 = 300px = 3 tiles @ 100x100px, etc. 
     // Ie.: (200 + zoom*100)/100 => 2 + zoom 

     return 2 + zoom; 
    } 
}); 

var map = L.map('map', { crs: L.CRS.CustomZoom }).setView([0, 0], 0); 

In diesem Beispiel habe ich verlängert L.CRS.Simple, aber Sie können natürlich jedes CRS von der API, die Sie möchten, erweitern oder sogar Ihre eigenen von Grund auf neu erstellen.

Bei Verwendung eines Zoomfaktors, der zu einer Kartenpixelgröße führt, die kein Vielfaches Ihrer Kachelgröße ist, werden die Kacheln am rechten/unteren Rand nur teilweise mit Kartendaten gefüllt. Dies kann behoben werden, indem der Nicht-Map-Teil solcher Kacheln zu 100% transparent gemacht wird (oder die gleiche Farbe wie Ihr Hintergrund).

Allerdings ist es meiner Meinung nach eine viel bessere Idee, die Kachelgröße auf den kleinsten gemeinsamen Nenner zu setzen, in diesem Fall 100px. Denken Sie daran, dies zu reflektieren, indem Sie die Option tileSize in Ihrer Kachelebene verwenden. Und natürlich müssen Sie Ihr Bild in Kacheln mit 100x100 Pixeln anstatt in den 256x256 Kacheln, die Sie gerade verwenden, neu rendern.

Ein Nachteil, die aktuelle Version von LeafletJS (0.5) hat einen Fehler, der verhindert, dass eine benutzerdefinierte scale() -Methode funktioniert, da die TileLayer-Klasse hardcodiert ist, um die Power-of-2-Zoomskalierung zu verwenden. Die Änderung, die Sie vornehmen müssen, ist jedoch geringfügig und hoffentlich wird dies in einer zukünftigen Version von Leaflet behandelt. Einfach TileLayer._getWrapTileNum() von ändern:

_getWrapTileNum: function() { 
    // TODO refactor, limit is not valid for non-standard projections 
    return Math.pow(2, this._getZoomForUrl()); 
}, 

An:

_getWrapTileNum: function() { 
    return this._map.options.crs.scale(this._getZoomForUrl()); 
},