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

Posted 2023-02-16

【中文标题】在 LeafletJS 中使用自定义地图图像图块？

【英文标题】：Using custom map image tiles in LeafletJS?

【发布时间】：2012-11-18 07:19:10

【问题描述】：

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

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

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

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

【参考方案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 的工作原理。

【讨论】：

仅供阅读本文的任何人参考 - 瓷砖不必为 256x256 像素。您可以在 TileLayer 选项中设置正方形边的长度 - 但是默认为 256 像素（通常会让您的生活更轻松）

【参考方案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

【讨论】：

Leaflet 也有“插件”，它会对从外部映射源（或从所示页面）检索到的信息进行本地缓存。

请注意，在您的代码中，需要有一些条款来处理对数据库中不存在的平铺坐标的请求。这可能在您的DB.GetTile() 例程中，它应该提供一个虚拟瓷砖或安排返回一个404 Not Found。 （在后一种情况下，Leaflet 可以被编程为提供自己的“丢失的瓷砖”瓷砖。）我观察到 Leaflet 确实发出请求，例如“负坐标”，并且相当频繁地这样做。

感谢有趣的 cmets。我注意到对我没有的瓷砖的要求。我相信 404 是适当的响应，因为传单可以（并且应该）优雅地处理这种情况

@MikeRobinson 我们如何针对瓷砖基本相同的情况进行优化（例如水体上的瓷砖）我们可以获取传单来兑现以前看到的瓷砖吗？