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

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

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

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

しかし、Leaflet でカスタム マップを使用する方法に関する情報が見つかりません。X、Y、Z の範囲情報を何らかの方法で Leaflet に提供すればよいのでしょうか? 各タイルのピクセル サイズを指定すればよいのでしょうか? Leaflet はこれを自動的に判断するのでしょうか?

私の質問を簡潔にまとめると、LeafletJS でマップ タイルとしても機能する画像ファイルを作成するには何をする必要がありますか。また、フロントエンド スクリプトで何か必要なことはありますか。(カスタム URL の指定以外に)

ベストアンサー1

あなたが探しているのはタイルレイヤーこの TileLayer では、次のようなテンプレートを使用して、取得する画像の URL を leaflet に指定します。

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

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

ただし、表示する画像によっては、作業の大部分はタイル生成になります。タイルのサイズはデフォルトで 256 x 256 ピクセルです (TileLayer オプションで変更できます)。また、地理データを使用している場合は、使用される投影法はメルカトル投影法です。タイル ID を正しく取得するには、しばらく時間がかかる場合があります。ここに例がありますタイル ID がどのように機能するかについて説明します。

おすすめ記事