maps - marcadores - ¿Usar mosaicos de imágenes de mapas personalizados en LeafletJS?

leaflet tutorial español pdf

Question

¿Deben mis baldosas adherirse a especificaciones particulares?

Tengo un archivo de imagen grande que me gustaría convertir en un mapa con LeafletJS. Voy a utilizar la Biblioteca de imágenes de Python para cortarla en todos los mosaicos que necesito.

Sin embargo, no puedo encontrar ninguna información sobre el uso de mapas personalizados en el folleto. ¿Ofrezco Leaflet con el rango de información X, Y, Z de alguna manera? ¿Le doy el tamaño de píxel de cada azulejo? ¿Lo resuelve por sí mismo?

Para plantear mi pregunta en una pregunta concisa: ¿Qué debo hacer para tener archivos de imágenes que puedan duplicar como mosaicos de mapas con LeafletJS, y qué debo hacer, en todo caso, en mi script de front-end? (más allá de la especificación obvia de mi URL personalizada)

Answer 1

Está buscando un TileLayer . En este TileLayer, le das la URL para las imágenes que se recuperarán a un folleto con una plantilla como esta:

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

Cuando se encuentre en el nivel de zoom especificado, xey, Leaflet buscará automáticamente los mosaicos en la URL que proporcionó.

Dependiendo de la imagen que desee mostrar, la mayor parte del trabajo estará en la generación de mosaicos. Los mosaicos siempre deben tener un tamaño de 256x256px, y si está utilizando geodatos, la proyección utilizada es la proyección de Mercator. Puede tomar algún tiempo para obtener los ID de mosaico correctos. Aquí hay un ejemplo de cómo funcionan los identificadores de mosaico.

Answer 2

Incluso puede servir mosaicos directamente desde una base de datos.

El folleto de formato especifica es muy flexible.

Leaflet simplemente usa los marcadores z, x, y para solicitar fichas específicas.

Por ejemplo:

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

donde 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