Utiliser des tuiles d'images de cartes personnalisées dans LeafletJS ?

Question

Mes carreaux doivent-ils répondre à des spécifications particulières ?

J'ai un grand fichier image que j'aimerais transformer en carte avec LeafletJS. Je vais utiliser la bibliothèque d'imagerie Python pour découper le fichier en différentes tuiles dont j'ai besoin.

Cependant, je ne trouve aucune information sur l'utilisation de cartes personnalisées dans Leaflet. Dois-je fournir à Leaflet la gamme d'informations X,Y,Z d'une manière ou d'une autre ? Dois-je lui donner la taille en pixels de chaque tuile ? Le logiciel se débrouille-t-il tout seul ?

Pour résumer ma question en une seule question concise : Que dois-je faire pour avoir des fichiers d'images qui peuvent se doubler de tuiles de cartes avec LeafletJS, et que dois-je faire, le cas échéant, dans mon script frontal ? (au-delà de la spécification évidente de mon URL personnalisée)

Answer 1

J'ai posté un tutoriel complet sur la façon de faire exactement cela, en montrant à la fois MapTiler et le script python de Gdal2Tiles.

Vous pouvez le consulter ici : http://build-failed.blogspot.com/2012/11/zoomable-image-with-leaflet.html

Answer 2

Vous êtes à la recherche d'un Couche de tuiles . Dans ce TileLayer, vous donnez l'URL des images à extraire à leaflet avec un modèle comme celui-ci :

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

Lorsque vous êtes au niveau de zoom, x et y spécifié, Leaflet va automatiquement chercher les tuiles sur l'URL que vous avez donné.

Selon l'image que vous voulez montrer, la plus grande partie du travail sera cependant dans la génération des tuiles. Les tuiles ont par défaut une taille de 256x256px (qui peut être modifiée dans les options de TileLayer), et si vous utilisez des géodonnées, la projection utilisée est celle de Mercator. Cela peut prendre un certain temps pour obtenir les bons identifiants des tuiles. Voici un exemple sur la façon dont les identifiants des tuiles fonctionnent.

Answer 3

Vous pouvez même servir des tuiles directement à partir d'une base de données.

Le format spécifié par le dépliant est très souple.

Leaflet utilise simplement les caractères z,x,y pour demander des tuiles spécifiques.

Par exemple :

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

où Carreaux.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