web-dev-qa-db-ja.com

Leafletは、マップ以外の画像に適したツールですか？

技術的なイラスト （パン、ズーム、クリック）をナビゲートするWebアプリを書いています。 Cloudmade Leaflet はこれに適したツールであると仮定します。これは、 誰かがXKCD 1110をパン/ズーム可能にするために使用したため であり、その結果が本当に好きだからです。

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

地図以外の画像をナビゲートするために、誰でもLeafletや他のツールを推奨できますか？

javascriptleaflet
35
Jacob Marble

Leafletでこれを行うことができます。 （私はまさにこれを自分でやった。）

ピクセルサイズを緯度経度（緯度/経度）に変換する必要があります。リーフレットでは、Simple "Coordinate Reference System"、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 gemも含まれています。これも有用かもしれません。

23
Soup

これは、タイル化されていない画像に対して機能します。

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);
}
21
dooderson

私はMapTillerで幸運に恵まれました- http://www.maptiler.com/

3
user3233010

私は、地理情報付きのカスタムタイルを含むマップにLeafletを使用していますが、Leafletが見る限り、このタスクを実行できるはずです。パンおよびズーム可能な方法で画像を表示できるようにするには、画像を整理する方法を検討するいくつかのポイントがあります。

まず、マップナビゲーションの背後にある概念と、対応するタイルファイル名を理解する必要があります。この概念は QuadTree です。これがどのように機能するかの例は here にあります。

次に、生のテクニカルイラストをさまざまなタイルにカットする必要があります。 1つのズームレベルのみで開始する場合、これは非常に簡単です。その後、新しい Leaflet TileLayer でタイルを使用できます。ズームしたい場合、少し難しくなるかもしれません。タイルの正しい境界を見つけて、正しいファイル名を作成する必要があります（上記のQuadTreeリファレンスを参照）。

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

3
j0nes

タイル以外のオプションが必要な場合は、タイルを事前にカットすることなくクライアントサイド全体を実行できます

https://github.com/Murtnowski/GMap-JSlicer を参照してください

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

とても簡単です。

1
Murtnowski

Leafletを使用する際の最大の問題は、タイルがどのように生成され、順序付けられ、次に呼び出しを正しく行う必要があるかを考え出し、期待どおりにすべてが表示されるようにすることです。数日後、絶え間なく解決策を試してみましたが、Pedro Sousaが行ったチュートリアルのおかげで、これが唯一の解決策となりました。

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

本質的に、これはGDAL2Tilesを使用して、タイルを予測可能な方法で正しく分割します。これは、ほとんどのLinuxディストリビューションで簡単に使用できる種類のツールです（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);

Leafletを使用して、古いFlashベースのマップナビゲーターを正常に置き換え、基本的にほぼすべてのFlash機能を複製することができました（同じマーカーとすべてを使用しても！）。もちろん、LeafletがiOSデバイスで動作するという利点はありますか???? —そして、タイリングのおかげで、Leafletを使用したソリューションは、従来のFlashベースのアプローチよりもはるかに高速に実行されます...

代替手段として OpenLayers があります。これは、タイル化せずにラスターイメージも処理できます。比較的小さなイメージであれば十分です。

ところで、ここではさまざまなフレームワークの比較を示します。ただし、すべてが静的画像を処理するわけではありません。 https://www.toptal.com/web/the-roadmap-to-roadmaps-a-survey-of- the-best-online-mapping-tools

1
Gwyneth Llewelyn