40

テクニカル イラスト(パン、ズーム、クリック) を操作する Web アプリを作成しています。Cloudmade Leafletはこれに適したツールだと思いますが、それは誰かがそれを使用して XKCD 1110 をパン/ズーム可能にして、その結果が本当に気に入ったからです。

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

マップ以外の画像をナビゲートするために Leaflet やその他のツールを推奨できる人はいますか?

4

6 に答える 6

27

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

ピクセル サイズを緯度経度 (緯度/経度) に変換する必要があります。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 gem など、画像の分割に関する詳細がこちらで入手できます。これも役立つ可能性があります。

于 2013-03-02T04:46:46.473 に答える
22

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

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);
}
于 2013-05-24T22:33:45.037 に答える
3

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

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

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

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

于 2012-10-28T17:42:51.997 に答える