2017-12-01 7 views
0

リーフレットのGridLayerを拡張して、データポイントを描画するキャンバスタイルを表示しています。ズームインしたりズームアウトしたりした後でも、ズームレイヤーは引き続き表示されるか、ランダムな方法でオフにします。リーフレット - マップ上に半透明のキャンバスタイルを描画する

など。

enter image description here

どのように私は、現在のズームレベルを示し、切り落とさ取得からキャンバスタイルを防ぐことができます - 左に右に11にズームアウトした後で、バックに13には、ズームレベル13です?

+1

いくつかのコードを見て、理想的にはライブ再生のケースが確実に役立つでしょう。 – ghybs

+0

@ghybs下記を参照してください - 私は実際にこれに自己回答することを意図しましたが、私はタグリストの入力を押して、質問を提出しました –

答えて

0

より良い方法があるかもしれませんが、これは

はここに私のGridCanvasクラスだ...、私はそれを固定してしまった方法です -

L.GridLayer.GridCanvas = L.GridLayer.extend({ 

    onAdd: function (map) { 
    L.GridLayer.prototype.onAdd.call(this, map); 
    map.on('zoomend', e => this.onZoomEnd(e.target._zoom)); 
    }, 

    // on zoom end, want to hide all the tiles that are not on this zoom level, 
    // and show all the ones that are 
    onZoomEnd: function (zoom) { 
    Object.values(this._levels).forEach(level => { 
     level.el.style.display = (level.zoom === zoom) ? 'block' : 'none'; 
    }); 
    }, 

    createTile, 

}); 

タイルのvisibilityも一見ランダムな方法で設定されます - これは問題を解決するように見えた - canvas要素にクラスを追加し、常に表示されるようにそれらを設定する - Styles.cssを持つ

function createTile(coords, done) { 
    const canvas = L.DomUtil.create('canvas', 'grid-canvas-tile'); 
    ... 
} 

.grid-canvas-tile { 
    visibility: visible !important; 
} 
関連する問題