Utilizzo di tile immagine mappa personalizzati in LeafletJS?

Question

Le mie tessere devono aderire a specifiche specifiche?

Ho un file immagine di grandi dimensioni che vorrei trasformare in una mappa con LeafletJS. Sto per utilizzare la libreria di immagini Python per ridurla in tutte le varie tessere che mi servono.

Tuttavia, non riesco a trovare alcuna informazione sull'utilizzo di mappe personalizzate in Leaflet. Fornisco Leaflet con l'intervallo di informazioni X, Y, Z in qualche modo? Gli do le dimensioni in pixel di ogni piastrella? Lo capisce da solo?

Per porre la mia domanda in una domanda concisa: cosa devo fare per avere file di immagini che possono raddoppiare come riquadri di mappe con LeafletJS e cosa, se non altro, devo fare nel mio front-end sceneggiatura? (oltre l'ovvia specifica del mio URL personalizzato)

Answer 1

Stai cercando un TileLayer. In questo TileLayer, si dà l'URL per il to-be-recuperati immagini per opuscolo con un modello come questo:

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

Quando si è al livello di zoom, x e y specificato, Volantino preleverà automaticamente le piastrelle sull'URL che hai dato.

A seconda dell'immagine che si desidera mostrare, la parte più grande del lavoro sarà comunque nella generazione delle tessere. Le piastrelle devono sempre avere una dimensione di 256x256 px e, se si utilizzano i geodati, la proiezione utilizzata è la proiezione di Mercator. Potrebbe essere necessario del tempo per ottenere gli id ​​delle tessere giuste. Here is an example su come funzionano gli id ​​delle tessere.

Answer 2

È anche possibile utilizzare le tessere direttamente da un database.

Il volantino del formato specificato è molto flessibile.

Il volantino utilizza solo i titolari di posizione z, x, y per richiedere tessere specifiche.

Ad esempio:

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

dove 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