リーフレットのオフライングリッドレイヤー

Question

タイトルなしでオフラインで作業すると、グリッドのみをタイトルとして表示できます。リーフレットのすべての機能を利用するには、プラグインを追加して線を描いたり、マーカーをピンしたり、ポリゴンを描画したり、シェイプをズームイン/ズームアウトしたりします。

シンプルなグリッドを表示する簡単な方法はありますか？

Answer 1

こちらはカスタムGridLayerです（これは既にリーフレットの作者によって実装されています）。通常はタイルレイヤーをロードするコピーL.GridLayer.DebugCoordsだけです。

var map = L.map('map', { 
    center: [0, 0], 
    zoom: 0 
}); 

L.GridLayer.DebugCoords = L.GridLayer.extend({ 
    createTile: function (coords, done) { 
     var tile = document.createElement('div'); 
     //this adds tile coordinates; you may or may not want this 
     tile.innerHTML = [coords.x, coords.y, coords.z].join(', '); 
     tile.style.outline = '1px solid red'; 

     /* // you don't need this artificial timeout for your application 
     setTimeout(function() { 
       done(null, tile); // Syntax is 'done(error, tile)' 
     }, 500 + Math.random() * 1500); 
     */ 

     return tile; 
    } 
}); 

L.gridLayer.debugCoords = function(opts) { 
    return new L.GridLayer.DebugCoords(opts); 
}; 

map.addLayer(L.gridLayer.debugCoords()); 

スタンドアローン、作業例：http://leafletjs.com/examples/extending/extending-2-layers.html

： http://leafletjs.com/examples/extending/gridcoords.html

コードから撮影