Używanie niestandardowych kafelków obrazów mapy w LeafletJS?

Question

Czy moje płytki muszą spełniać określone specyfikacje?

Mam duży plik obrazu, który chciałbym zamienić na mapę z LeafletJS. Zamierzam użyć biblioteki Python Imaging Library, aby podzielić ją na wszystkie potrzebne płytki.

Jednak nie mogę znaleźć żadnych informacji na temat używania własnych map w ulotce. Czy w jakiś sposób dostarczam ulotki z zakresem informacji X, Y, Z? Czy nadaję mu rozmiar w pikselach każdej płytki? Czy sam to sobie wyobraził?

Aby umieścić moje pytanie w jednym pytaniu zwięzły: Co muszę zrobić, aby mieć pliki graficzne, które mogą pełnić map płytek z LeafletJS, a co, jeśli w ogóle, muszę zrobić w moim front-end scenariusz? (poza oczywistym określeniem mojego niestandardowego adresu URL)

Answer 1

Szukasz TileLayer. W tym TileLayer, podać adres URL do-sprowadzone obrazy na ulotce z szablonem jak ten:

http://{s}.somedomain.com/blabla/{z}/{x}/{y}.png 

Kiedy jesteś w określonym zoom, X i Y poziomie, Ulotka automatycznie pobierze płytek na podany adres URL.

W zależności od obrazu, który chcesz pokazać, większa część pracy będzie jednak w generowaniu płytek. Kafelki powinny zawsze mieć rozmiar 256x256 pikseli, a jeśli używasz geodanych, używaną projekcją jest projekcja Mercatora. Może minąć trochę czasu, zanim prawa płytek zostaną poprawione. Here is an example o tym, jak działają identyfikatory płytek.

Answer 2

Można nawet serwować płytki bezpośrednio z bazy danych.

Ulotka w formacie jest bardzo elastyczna.

Ulotka po prostu używa uchwytów z miejscem z, x, y, aby zamówić konkretne płytki.

Na przykład:

L.tileLayer('http://localhost/tileserver/tile.aspx?z={z}&x={x}&y={y}', { 
    minZoom: 7, maxZoom: 16, 
    attribution: 'My Tile Server' 
}).addTo(map); 

gdzie Tiles.aspx

Option Strict On 

Partial Class tile 
    Inherits System.Web.UI.Page 

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load 
     Dim z, x, y As Integer 

     z = CInt(Request.QueryString("z")) 
     x = CInt(Request.QueryString("x")) 
     y = CInt(Request.QueryString("y")) 

     Dim b() As Byte = DB.GetTile(z, x, y) 

     Response.Buffer = True 
     Response.Charset = "" 
     'Response.Cache.SetCacheability(HttpCacheability.NoCache) 
     Response.ContentType = "image/png" 
     Response.AddHeader("content-disposition", "attachment;filename=" & y & ".png") 
     Response.BinaryWrite(b) 
     Response.Flush() 
     Response.End() 
    End Sub