2017-11-09 9 views
0

私は現時点でリーフレットを使用しており、衛星画像を通常のosmマップのtileLayerに追加したいと考えています。そこで、画像をタイルに変換し、タイルを表示するためのチラシを設定しました。第2リーフレットタイルレイヤーを配置する

残念ながら、画像は世界の角に現れます。そのコーナーがタイルのフォルダ番号/グリッドに対応している可能性が高いことはわかっています。しかし、私は非常に特定の位置にするためにはイメージが必要です。リーフレットにカスタムtileLayerを表示する場所を教える方法はありますか?

私は技術的に行くことができると私はそれが欲しい領域の正しい番号をフォルダや画像の名前を変更することがわかっているが、それは非常に面倒であり、あなたは手動で私たちの目標を敗北させる必要があります。

おかげ

+0

、タイルレイヤーが本当に適切ではありません。あなたの画像を元に戻してから、イメージオーバーレイ(iH8の答え)として追加してください。 – ghybs

答えて

1

L.ImageOverlayを見てみましょう:マップの具体的な境界を超える単一の画像をロードして表示するために使用

var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg', 
    imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]]; 

L.imageOverlay(imageUrl, imageBounds).addTo(map); 

参考:あなたは、単一のズームレベルを持っているし、あなたのイメージが大きすぎない場合にはhttp://leafletjs.com/reference-1.2.0.html#imageoverlay

+0

返事をありがとう。これは私たちの最初の解決策でしたが、クライアントから得たイメージは非常に大きく、L.ImageOverlayを使用しようとすると画像が表示されるまでに時間がかかり、ページの速度が大幅に低下しました。画像は130MBです。 – MarkusAfricanus

+1

次に、 [gdal2tiles](http://www.gdal.org/gdal2tiles.html)をクリックしてそのイメージをEPSG:3895タイルに分割し、それを 'L.TileLayer'としてロードします。 WMTSサービスを提供する。 – IvanSanchez

+0

お薦めいただきありがとうございます。私たちは、JavaScript用の同様のツールhttps://github.com/spacebetween/imageMapTilesを見つけました。 – MarkusAfricanus

関連する問題