Dodawanie dodatkowych poziomów powiększenia w Mapach ulotek

Question

Korzystam z leaflet do tworzenia mapy zdjęć z własnymi kaflami, które działają zgodnie z oczekiwaniami.

Im próbuje dowiedzieć się, jak mogę zapobiec zoom od naśladują tego Quadtree typu wzoru:

• zoom Level 0 - Cały mapa width = 256px;
• Poziom powiększenia 1 - szerokość całej mapy = 512 pikseli;
• Zoom Level 2 - Cała szerokość mapy = 1024px;
• I tak dalej ...

Chciałbym, aby móc powiększyć powiedzieć przyrosty 25% lub 100px.

Przykładem 100px krokach:

• zoom Level 0 - Cały mapa width = 200px;
• Stopień powiększenia 1 - szerokość całej mapy = 300px;
• Zoom Level 2 - Cała szerokość mapy = 400px;
• I tak dalej ...

---

Pytanie: Jaka jest logika dla tej operacji? Jeśli to w ogóle możliwe?

---

Mój powód aby chcieć to zrobić tak, że moja mapa zdjęcia (co robi owinąć jak normalny mapie) może być bardziej responsive i dopasować użytkownicy Przekątna ładnie.

zrobiłem pokaz mojego problemu, który można zobaczyć here

Answer 1

Krótka odpowiedź brzmi, że można pokazać tylko poziomów powiększenia do których masz pre-renderowanych płytek. Ulotka nie utworzy dla Ciebie pośrednich poziomów powiększenia.

Długa odpowiedź jest, że aby wykorzystać to zrobić, trzeba zdefiniować własną metodę skali CRS i przekazać je do mapy, na przykład:

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); 

W tym przykładzie, mam przedłużony L.CRS.Simple, ale możesz oczywiście rozszerzyć dowolny CRS z interfejsu API, który chcesz, lub nawet stworzyć własny od zera.

Używanie współczynnika powiększenia, który powoduje, że piksel mapy nie jest wielokrotnością twoich kafelków, oznacza, że ​​twoje prawe/dolne krawędzie są tylko częściowo wypełnione danymi mapy. Można to naprawić, czyniąc część niepowiązaną z mapą takich płytek w 100% przezroczystą (lub tym samym kolorem co tło).

Jednak moim zdaniem znacznie lepszym pomysłem jest ustawienie płytek tak, aby pasowały do ​​najniższego wspólnego mianownika, w tym przypadku 100px. Pamiętaj, aby to odzwierciedlić, używając opcji tileSize w swojej warstwie kafli. Oczywiście konieczne będzie ponowne renderowanie obrazu na płytki o wymiarach 100x100 pikseli zamiast obecnie używanych płytek 256x256.

Jedna uwaga, aktualna wersja LeafletJS (0.5) ma błąd, który uniemożliwia działanie niestandardowej metody scale(), ponieważ klasa TileLayer jest na stałe zakodowana z wykorzystaniem skalowania zoomu mocy. Jednak zmiana, którą musisz zrobić, jest niewielka i mam nadzieję, że zostanie to rozwiązane w przyszłym wydaniu ulotki. Wystarczy zmienić TileLayer._getWrapTileNum() od:

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

Do:

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