大規模なラスターイメージで、unproject（）とGeoJSONデータを使用したリーフレットflyTo（）の使用方法は？

Question

私は、実際の地図データではなくタイルにスライスした大きな画像を使用してリーフレットでストーリーマップを構築しています。私はこのプラグイン使用しています：https://commenthol.github.io/leaflet-rastercoords/をし、このレポ：https://github.com/jackdougherty/leaflet-storymap

が私にGeoJSONデータをロードして座標をunprojectingは正しく私のイメージマップ上にプロット：

$.getJSON('map.geojson', function(data) { 
    var geojson = L.geoJson(data, { 
    // correctly map the geojson coordinates on the image 
    coordsToLatLng: function (coords) { 
     return rc.unproject(coords) 
    }, 

しかし、私はonEachFeatureに着くとき、私がヒット

map.flyTo([feature.geometry.coordinates[1], feature.geometry.coordinates[0] ], feature.properties['zoom']); 

私はunprojectを渡してみました：私のJSONファイルからgeometry.coordinatesを呼び出しますが、地理空間は、マップ外の道を座標としてflyTo（）はそれらを解釈されるので、それらをunprojectingされていないmap.flyTo（）、との壁変数への座標、およびmap.flyTo（）への座標、map.flyTo.unproject（...、運がないなど）などのネスト関数のバリエーションです。

ラスタ座標をflyTo（）に渡すにはどうすればよいですか？

私はリーフレットの新機能だけでなく、JavaScriptを初めて使用しています。私はこれまでに自分のやり方をハックしましたが、私は困惑しています。私は解決策が明らかだと確信しています。どんな助けでも大歓迎です。

あなたはおそらくあなたが flyToに渡すことができることを緯度経度にあなたの座標を変換するために rc.unprojectを使用する必要がありますあなたの場合は

Answer 1

：

map.flyTo(
    rc.unproject(feature.geometry.coordinates), 
    feature.properties['zoom'] 
); 

言われて、私は正確に表示されていない認めなければならないことリーフレットのチュートリアル"Non-geographical maps"に従うことで簡単に同じことができるので、リーフレット - ラスターコードのプラグインを使用するポイントです。これにより

var yx = L.latLng; 

var xy = function(x, y) { 
    if (L.Util.isArray(x)) { // When doing xy([x, y]); 
    return yx(x[1], x[0]); 
    } 
    return yx(y, x); // When doing xy(x, y); 
}; 

あなたは「ラスタ」はリーフレットで使用可能なものに座標変換したい時はいつでも、あなただけxがあなたの水平方向の値、およびyあなた垂直一つであるとxy(x, y)を使用します。

追加の利点は、他の多くのものが容易に互換性があることです。

あなたの代わりに、単一の画像（それが座標を合わせるためにチュートリアルのImageOverlayで伸びている）のタイルを使用しているため、ズーム0で、あなたのタイル0/0/0はあなたの全体の座標を合うように、あなたは、CRS変換を変更する必要がありますが。また、Leaflet custom coordinates on image

e.e.e.

• オリジナルのラスタ画像のサイズ：3831ピクセル幅のx 3101ピクセルの高さ
• タイルサイズダウンしながら×256ピクセル256
• 縦長「ラスタ」座標が増加しているリーフレット-rastercoords例の場合（リーフレットのチュートリアルでは、緯度のように上がります）。
• 後者は新しいCRSの4096 X 4096ピクセル（残りは白色で満たされている）

決意であるかのように実際に、元の画像より以上を覆う0/0/0タイル：

• タイル0/0/0は、左上[0、0]から右下[4096,4096]（つまり256 * 2^4 = 256 * 16 = 4096）=>transformation coeffi cients aとcは1/16
• なしオフセット必要=>オフセットbとd垂直yのいかなる復帰0
• されてはならない=>cのために使用される新たなCRSのようになり、正

座標：

あなたのflyToは非常に似ていますが、他の多くのthリーフレット-rastercoords例から適応

map.flyTo(
    xy(feature.geometry.coordinates), 
    feature.properties['zoom'] 
); 

デモ、および互換性を実証するため、余分なプラグインを使用して：：イングスも互換性がありますhttps://plnkr.co/edit/Gvei5I0S9yEo6fCYXPuy?p=preview