在LeafletJS使用自定义的地图图像块?(Using custom map image tile

2019-07-04 06:45发布

做我的瓷砖需要坚持任何特定的规格?

我有我想变成与LeafletJS地图这一个大的图像文件。 我将要使用Python图像库削减它成我所需要的各种瓷砖。

但是,我无法找到有关单张使用自定义地图的任何信息。 难道我提供单张与X,Y,Z信息莫名其妙的范围内? 难道我给它每瓦的像素大小? 是否算出这个对自己?

为了把我的问题变成一个简洁的问题:我需要做什么才能做有图像文件可兼作与LeafletJS地图图块,什么,如果有的话,我需要在我的前端脚本呢? (超出了我的自定义URL的明显指定)

Answer 1:

您正在寻找一个TileLayer 。 在此TileLayer,你给的URL,以待获取图像,像这样的模板单张:

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

当你在指定的缩放,x和y的水平,传单会自动获取您所提供的网址瓷砖。

根据您要显示的图像上,工作的较大部分将然而在区块生成。 默认情况下,瓷砖有一个256x256px大小(可以在TileLayer选项更改),如果你正在使用的地理数据使用投影墨卡托投影。 这可能需要一些时间,以获得并列ID的权利。 这里有一个例子图块上的IDS是如何工作的。



Answer 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


文章来源: Using custom map image tiles in LeafletJS?