在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中使用自定義地圖圖像切片？

回答

相關問題