タイルレイヤーの中心とリーフレット上のマップの中心との一致

Question

場所のフラットイメージを使用して物流センターのマップを作成しようとしています。私はイメージの良質を維持しながらズームインしたりズームアウトしたりできるようにする必要があります。これまで私はリーフレットを使用してMapとMapTilerを描画し、品質の低下やパフォーマンスの低下なしにズームを可能にするタイルスキーマを作成してきました。

私はすべての設定と作業を行っていますが、タイルレイヤーセンターがマップセンターに一致する必要があります。私が何をしても、タイルレイヤーの左上隅は常にマップの（0,0）座標から始まります。

ズームレベル3では、たとえば、画像は1536x1280pxなので、絶対ピクセル座標について話すときには、左上隅がマップの座標（-768,640）にある必要があります。ここで

は私のメインのスクリプトです：

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

//mapHeight and mapWidth are the pixel dimensions of the flat image at max zoom level. 
//In this case it's 6144x4608px. By default the tiles size is 256x256px. 

var southWest = map.unproject([ 0, mapHeight], getMaxZoom()); 
var northEast = map.unproject([ mapWidth, 0 ], getMaxZoom()); 
var mapBounds = new L.LatLngBounds(southWest, northEast); 

L.tileLayer('tile/{z}/{x}/{y}.png',{ 
    minZoom: 2, 
    maxZoom: 5, 
    noWrap:true,   
    bounds:mapBounds 
}).addTo(map); 

私は中央、setviewコマンドとの境界が、タイルレイヤーの動きを作るのがない成功を収めて混乱しています。

リーフレットのドキュメントはあなたができるなら、私を助けてください、ここでhttp://leafletjs.com/reference.html

見つけることができます。ありがとうございました。

Answer 1

リーフレットでは、タイル座標は内部メカニズム（ピクセル座標）に密接に結びついています。すべてのズームレベルに対する

は、CRS座標に投影取得 LatLng座標（つまり、EPSGだ：4326 EPSG→：地球地図と L.CRS.Simpleマップの垂直反転のための3857）、その後、CRSは依存ファクタによってスケーリングされます座標ピクセル座標を与えるズームレベル。これらのピクセル座標を使用してレイヤー（タイル、マーカーなど）が描画されます。 （ GridLayerと TileLayer両方の）「通常の」タイル

は、タイルテンプレートURLに{x}と{y}フィールドは単に画素がタイルのサイズで割った座標れます。画素[0, 0]の256pxタイルは、タイル座標[0, 0]を持ち、画素[512, 256]のタイルは[2, 1]などとなります。

しかし、L.TileLayer.WMSのコードを読んだ場合、タイルURLは必ずしもタイル座標に依存しないことがわかります。

問題に戻ってください。物事はどこ彼らが必要収まるように

var t = L.tileLayer(…); 

t.getTileUrl = function(coords) { 
    var myZ = coords.z; 
    var myX = coords.x + (8 * Math.pow(2, myZ - 3)); 
    var myY = coords.y + (6 * Math.pow(2, myZ - 3)); 

    return '/tile/' + myZ + '/' + myX + '/' + myY + '.png'; 
} 

コードが単純化され（と私は数学を作るために困っていません：ようなもので、getTileUrlメソッドをオーバーライド：あなたはL.TileLayer.WMSの同じ戦略を使用して、それを克服することができます）、それはあなたを正しい軌道に乗せるはずです。

---

CRS座標LatLng秒との間で変換する翻訳変換を適用L.CRS.Simpleに基づいてカスタムL.CRSを作成することです同じことを達成するための別の方法。リーフレットレポのsrc/geo/crs/CRS.Simple.jsとsrc/geometry/Transformation.jsのコードが意味をなさない場合は、この方法をお試しください。