web-dev-qa-db-ja.com

LeafletJSでカスタムマップ画像タイルを使用していますか？

タイルは特定の仕様に準拠する必要がありますか？

LeafletJSでマップに変換したい大きな画像ファイルがあります。 Python Imaging Libraryを使用して、必要なさまざまなタイルすべてに分割します。

ただし、リーフレットでのカスタムマップの使用に関する情報は見つかりません。 X、Y、Z情報の範囲を何らかの方法でLeafletに提供しますか？各タイルのピクセルサイズを指定しますか？それ自体でこれを把握していますか？

私の質問を1つの簡潔な質問にまとめるには、LeafletJSでマップタイルを兼ねることができる画像ファイルを作成するために何をする必要がありますか。 （私のカスタムURLの明白な指定を超えて）

mapsleafletopenmap
49
thisissami

TileLayer を探しています。このTileLayerでは、取得する画像のURLを、次のようなテンプレートでリーフレットに渡します。

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

指定したズーム、x、yレベルにいるとき、Leafletは指定したURLのタイルを自動的に取得します。

ただし、表示する画像に応じて、作業の大部分はタイル生成になります。タイルのデフォルトのサイズは256x256pxです（TileLayerオプションで変更できます）。ジオデータを使用している場合、使用される投影法はメルカトル図法です。タイルIDを正しく取得するには時間がかかる場合があります。 ここに例があります タイルIDの動作方法について。

17
j0nes

データベースから直接タイルを提供することもできます。

リーフレットが指定する形式は非常に柔軟です。

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
8
Charles Okwuagwu