在LeafletJS中使用自定义地图图片瓦片？

Question

我的瓷砖需要遵守特定的规格吗？

我有一个大图像文件，想用LeafletJS将其制作成地图。我将使用Python Imaging Library将其切割成所需的各种瓦片。

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

简洁地说，我需要做什么才能拥有可用于LeafletJS的图像文件和地图瓦片，还需要在我的前端脚本中做什么（除了明显指定自定义URL之外）？

- thisissami

Answer 1

您正在寻找一个TileLayer。在这个TileLayer中，您可以使用以下模板向leaflet提供待获取图像的URL:

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

当您处于指定的缩放、X和Y级别时，Leaflet将自动获取您提供的URL上的瓦片。

根据您要显示的图像，工作的主要部分通常在瓦片生成方面。默认情况下，瓦片的大小为256x256像素（可以在TileLayer选项中更改），如果使用地理数据，则使用的投影是Mercator投影。获取正确的瓦片ID可能需要一些时间。这里有一个示例说明瓦片ID的工作原理。

- j0nes

---

提醒给任何阅读此文的人 - 瓦片不一定要是256x256像素。您可以在TileLayer选项中设置正方形边长 - 但默认值为256像素（并且通常会使您的生活更加轻松）。 - thisissami

Answer 2

您甚至可以直接从数据库中提供瓷砖。

Leaflet指定的格式非常灵活。

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

- Charles Okwuagwu

---

Leaflet还有一些“插件”，可以对从外部地图源（或像所示的页面）检索到的信息进行本地缓存。 - Mike Robinson

请注意，在您的代码中，需要一些处理请求不存在于数据库中的瓦片坐标的方法。这可能在您的DB.GetTile()例程中实现，该例程应该提供一个虚拟瓦片或安排返回404 Not Found。（在后一种情况下，Leaflet可以编程以提供其自己的“缺失瓦片”瓦片。）我观察到，Leaflet确实会请求例如“负坐标”，而且相当频繁。 - Mike Robinson

谢谢您的有趣评论。我注意到有请求缺失瓦片的情况。我认为404是适当的响应，因为leaflet可以（而且应该）优雅地处理这种情况。 - Charles Okwuagwu

@MikeRobinson 我们如何针对瓦片基本相同的情况进行优化（例如在水域上方的瓦片）？我们能否让leaflet缓存先前看到的瓦片？ - Charles Okwuagwu