Использование пользовательских графических изображений в LeafletJS?

Могут ли мои плитки придерживаться каких-либо конкретных спецификаций?

У меня есть большой файл изображения, который я бы хотел превратить в карту с LeafletJS. Я собираюсь использовать библиотеку изображений Python, чтобы разрезать ее на все нужные мне фрагменты.

Однако я не могу найти никакой информации об использовании пользовательских карт в Leaflet. Предоставляю ли я Лифлет диапазон X, Y, Z info? Я даю ему размер пикселя каждой плитки? Означает ли это это самостоятельно?

Чтобы поставить мой вопрос в один краткий вопрос: что мне нужно сделать, чтобы файлы изображений, которые можно удвоить в виде картографических фрагментов с помощью LeafletJS, и что, если что-нибудь, мне нужно сделать в моем интерфейсе script? (за пределами очевидного указания моего пользовательского URL-адреса)

Ответы

Ответ 1

Вы ищете TileLayer. В этом TileLayer вы предоставляете URL-адрес для изображений, подлежащих извлечению, для листовки с таким шаблоном:

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

Когда вы находитесь на указанном уровне масштабирования, x и y, Leaflet автоматически извлечет плитки по указанному вами URL.

В зависимости от того, какое изображение вы хотите показать, большая часть работы, тем не менее, будет происходить при создании плитки. Плитки по умолчанию имеют размер 256x256px (может быть изменен в опциях TileLayer), и если вы используете геоданные, то используется проекция Меркатора. Это может занять некоторое время, чтобы получить правильные идентификаторы плитки. Вот пример того, как работают идентификаторы плитки.

Ответ 2

Вы даже можете обслуживать плитки напрямую из базы данных.

Указанный формат буклета очень гибкий.

Листовка просто использует держатели z, x, y для запроса определенных фрагментов.

Например:

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

где 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