在 LeafletJS 中使用自定义地图图像图块？

Question

我的瓷砖是否需要遵守任何特定规格？

我有一个大的图像文件，我想用 LeafletJS 将它变成一个地图。我将使用 Python Imaging Library 将其切割成我需要的所有各种图块。

但是，我找不到任何有关在 Leaflet 中使用自定义地图的信息。我是否以某种方式向 Leaflet 提供 X、Y、Z 信息的范围？我是否给它每个图块的像素大小？它会自己解决这个问题吗？

将我的问题简化为一个简洁的问题：我需要做什么才能使用 LeafletJS 获得可以兼作地图图块的图像文件，以及我需要在前端脚本中做什么（如果有的话） ? （除了我的自定义 URL 的明显指定之外）

Answer 1

您正在寻找TileLayer。在这个 TileLayer 中，您将要获取的图像的 URL 提供给带有如下模板的传单：

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

当您处于指定的缩放、x 和 y 级别时，Leaflet 将自动获取您提供的 URL 上的图块。

根据您要显示的图像，大部分工作将在图块生成中进行。默认情况下，瓷砖的大小为 256x256px（可以在 TileLayer 选项中更改），如果您使用地理数据，则使用的投影是墨卡托投影。获得正确的磁贴 ID 可能需要一些时间。 Here is an example 关于磁贴 ID 的工作原理。

Answer 2

您甚至可以直接从数据库中提供图块。

传单指定的格式非常灵活。

Leaflet 仅使用 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