リーフレットは地図以外の画像に適したツールですか？

Question

私はtechnical illustrations（パン、ズーム、クリック）をナビゲートするWebアプリケーションを作成しています。私はsomeone used it to make XKCD 1110 pan/zoomableと私は本当にそれが判明したのが好きなので、Cloudmade Leafletこれのための良いツールと仮定します。

明らかに、私はオリジナルのテクニカルイラストレーションをタイルして拡大縮小する必要がありますが、それは私が解決した些細な問題です。しかし、Leaflet APIを見ると、Techのイラスト（.ai、.svg、.pngファイル）をGeoJSONのような地理的標準に変換する必要があるようです。それは厄介な命題のようだ。

リーフレット、または他のツールを使用して、地図以外の画像をナビゲートすることは誰にもおすすめできますか？

Answer 1

リーフレットでこれを行うことができます。 （私はこれを自分で行っています）

ピクセルサイズをlatlong（緯度/経度）に変換する必要があります。リーフレットはSimple「座標参照システム」、map.projectおよびmap.unprojectを使用することで簡単に行うことができます。

まず、このようなあなたのマップを構築：

var map = L.map('map', { 
    maxZoom: 20, 
    minZoom: 20, 
    crs: L.CRS.Simple 
}).setView([0, 0], 20); 

...そして（1024x6145ある画像のために）マップの境界を設定します。

var southWest = map.unproject([0, 6145], map.getMaxZoom()); 
var northEast = map.unproject([1024, 0], map.getMaxZoom()); 
map.setMaxBounds(new L.LatLngBounds(southWest, northEast)); 

いるかもしれないRubyの宝石を含むmore details regarding splitting your images available hereがありますまた有用である。

Answer 2

地理情報付きカスタムタイルのマップにリーフレットを使用していますが、リーフレットがこのタスクを実行できるはずです。

まず、マップナビゲーションの背後にあるコンセプトと、対応するタイルファイル名を理解しておく必要があります。画像を整理して拡大表示できるようにするには、いくつかの点を考慮する必要があります。このコンセプトはQuadTreeです。どのように動作するかの例はhereです。

次に、さまざまなタイルで生の技術的イラストをカットしなければなりません。 1つのズームレベルで開始する場合は、これはかなり簡単です。その後、新しいLeaflet TileLayerのタイルを使用できます。あなたがズームをしたいとき、それは少し難しくなるかもしれません。タイルの正しい境界を見つけて、正しいファイル名を構築する必要があります（上記のQuadTreeの参考文献を参照してください）。

要約：リーフレットはあなたの仕事では問題ではありません。主なタスクは、生データから適切で正しいタイルを作成することです。

Answer 3

これはタイル張りされていない画像に適用されます。

function init() { 
    var map = L.map('map', { 
     maxZoom: 24, 
     minZoom: 1, 
     crs: L.CRS.Simple 
    }).setView([0, 0], 1); 

    map.setMaxBounds(new L.LatLngBounds([0,500], [500,0])); 

    var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg' 
    var imageBounds = [[250,0], [0,250]]; 

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

Answer 4

私はMapTillerと幸運を持っていた - http://www.maptiler.com/

Answer 5

あなたは非タイルオプションを使用する場合は、あなたがタイルせずに全体の事のクライアント側を行うことができます事前にカット

がhttps://github.com/Murtnowski/GMap-JSlicer

を参照してください。

slicer = new JSlicer(document.getElementById('map'), 'myImage.png'); 
slicer.init(); 

非常に単純です。

Answer 6

リーフレットを使用する上での最大の問題は、タイルをどのように生成し、並べ替える必要があるのか​​を把握してから、すべてが正しく表示されるようにすることです。絶望的に解決した後、解決策を試して数日後に、これは、ペドロ・スーザによって行わチュートリアルのおかげで私のために働いただけだった。本質的には

https://build-failed.blogspot.pt/2012/11/zoomable-image-with-leaflet.html

、これは正しくスプリットにGDAL2Tilesを使用していますタイルを予測可能な方法で使用します。これは、ほとんどのLinuxディストリビューションで簡単に利用できるツールの1つです（また、ポートや同様のものを使ってMac OS Xでもうまく動作します）。このツールでは、ウォーターマークやサイズの制限などはありません。 Pedro Sousaが自分の記事で説明しているように、サーバーのディレクトリにタイルを配置します。

リーフレットは、偽の経度/緯度を正確に計算するためにラスターファイルのサイズを使用して、偽のジオ座標でタイルを使用して「マップ」をロードします。その後、他のマップタイルサーバーと同じように、あなたが望むものであれば、それを実行することができます。私の場合は、いくつかのマーカーを落とすだけでしたので、私が取り組んでいる座標系をあまり気にすることはできませんでした。以下の関数はマーカーの配置場所を知るために '偽の'地理座標を抽出するのに便利でした：

var popup = L.popup(); 
function onMapClick(e) { 
    popup 
     .setLatLng(e.latlng) 
     .setContent("You clicked the map at " + e.latlng.toString() + "\nZoom level is " + map.getZoom()) 
     .openOn(map); 
} 
map.on('click', onMapClick); 

私は成功したリーフレットを使用して、古いFlashベースのマップナビゲータを交換し、基本的には（たとえ同じマーカーとすべてを使用して！）ほとんどすべてのFlashの機能を複製するように管理しました。もちろん、LeafletがiOSデバイス上で動作する利点と、タイリングのおかげで、Leafletを使用するソリューションは、従来のFlashベースのアプローチよりもはるかに高速に実行されます。

代替手段はOpenLayersタイル張りなしでラスターイメージを扱うこともできます - イメージが比較的小さい場合は十分です。

ところで、ここでは異なるフレームワークを比較したものである - すべてではないものの、静止画を扱いますが：https://www.toptal.com/web/the-roadmap-to-roadmaps-a-survey-of-the-best-online-mapping-tools