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

我的瓷砖是否需要遵守任何特定规格？在LeafletJS中使用自定义地图图像切片？

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

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

把我的问题放到一个简洁的问题中：我需要做什么才能使图像文件可以与LeafletJS一样作为地图图块加倍，以及在我的前端需要做什么（如果有的话）脚本？（超出我自定义URL的明显指定）

2012-11-30 thisissami

您正在寻找TileLayer。在此TileLayer，你给的URL，以待获取图像，像这样的模板传单：

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

当你在指定的缩放，x和y的水平，传单会自动获取瓦片在你给的网址上。

根据您想要显示的图像，大部分工作将在瓦片生成中。瓷砖的尺寸应该始终为256x256px，如果您使用的是地理数据，则使用的投影是墨卡托投影。可能需要一些时间才能获得正确的磁贴。 Here is an example关于瓷砖ID的工作方式。

来源

2012-11-30 08:22:06 j0nes

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

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

格式传单指定非常灵活。

小册子只是使用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

来源

2015-04-21 13:30:34

Leaflet还有一些“插件”，它可以对本地缓存信息进行缓存已从外部映射源（或者来自类似于所示页面的页面）中检索到 –

请注意，在您的代码中，将需要* some *规定来处理对于不存在的tile-coordinate的请求你的数据库。这可能在你的'DB.GetTile（）'例程中，它应该提供一个虚拟磁贴或安排返回一个'404 Not Found'。（在后一种情况下，Leaflet可以被编程为提供自己的“缺失的瓷砖”）。我观察到Leaflet *发出请求，例如“负面坐标”，并且相当频繁。 –

感谢您的有趣评论。我注意到了我没有的瓷砖请求。我相信404是适当的回应，因为小册子可以（也应该）如此优雅地处理这些问题 –

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

回答

相关问题