web-dev-qa-db-fra.com

Vous utilisez des tuiles d'image de carte personnalisées dans LeafletJS?

Mes carreaux doivent-ils adhérer à des spécifications particulières?

J'ai un gros fichier image que j'aimerais transformer en carte avec LeafletJS. Je vais utiliser la bibliothèque d'imagerie Python pour la découper en toutes les 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? Comprend-il cela tout seul?

Pour mettre ma question en une seule question concise: que dois-je faire pour avoir des fichiers image pouvant servir de tuiles de carte 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)

mapsleafletopenmap
49
thisissami

Vous recherchez un TileLayer . Dans ce TileLayer, vous donnez l'URL des images à récupérer au dépliant 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 récupère automatiquement les tuiles sur l'URL que vous avez donnée.

Selon l'image que vous souhaitez afficher, la plus grande partie du travail sera cependant dans la génération de tuiles. Les tuiles par défaut ont une taille de 256x256px (peut être modifiée dans les options TileLayer), et si vous utilisez des géodonnées, la projection utilisée est la projection Mercator. Il peut falloir un certain temps pour obtenir les bons ID de tuile. Voici un exemple sur le fonctionnement des ID de tuile.

17
j0nes

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

La brochure de format spécifie est très flexible.

Leaflet utilise simplement les espaces réservés z, x, y pour demander des carreaux 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ù 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
8
Charles Okwuagwu