在LeafletJS中使用自定义地图图像切片?

时间:2012-11-30 04:23:42

标签: maps leaflet openmap

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

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

但是,我找不到有关在Leaflet中使用自定义地图的任何信息。我是否以某种方式为Leaflet提供X,Y,Z信息范围?我是否给它每个瓷砖的像素大小?它是否能独立解决这个问题?

将我的问题放在一个简洁的问题中:我需要做些什么来使图像文件可以兼作LeafletJS的地图图块,以及我在前端脚本中需要做什么(如果有的话) ? (除了明确指定我的自定义URL)

2 个答案:

答案 0 :(得分:14)

您正在寻找TileLayer。在这个TileLayer中,您可以使用以下模板将要提取的图像的URL提供给传单:

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

当您处于指定的缩放,x和y级别时,Leaflet将自动获取您提供的URL上的切片。

根据您要显示的图像,工作的较大部分将在图块生成中。默认情况下,瓷砖的大小为256x256像素(可以在TileLayer选项中更改),如果使用地理数据,则使用的投影是墨卡托投影。可能需要一些时间来使瓷砖ID正确。关于tile id如何工作的Here is an example

答案 1 :(得分:7)

您甚至可以直接从数据库中提供切片。

格式传单指定非常灵活。

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
相关问题