リーフレットのマーカーまたはドットの大きなデータセット

Question

リーフレットマップに約10.000個のマーカーまたはドットをレンダリングしたいとします。私はすでにそれを普通のやり方でやっていましたが、私はそれがGoogle Mapsと比較して遅いと感じました。私はパフォーマンスの問題を取得せずに複数の要素をレンダリングする方法を探しています。

リーフレットでこれを行う方法はありますか？

更新：イベントを処理できない明るい点でプロットしたくありません。私は実際にさまざまな色とイベントでマーカーをペイントしたいと思います。

Answer 1

パフォーマンスの問題は、各マーカーが個別のDOM要素であることに起因します。ブラウザは何千ものレンダリングに苦労しています。あなたのケースでは

、簡単な回避策はCircle Markersを使用し、それらをキャンバス（例えばマップpreferCanvasオプションを使用して、またはあなたのサークルマーカーのそれぞれについて、rendererオプションとして渡す特定canvas renderer付き）でレンダリング持っている代わりになります。これはGoogle Mapsがデフォルトでどのように動作するかです。マーカーは実際にCanvasに描かれます。この解決策の

var map = L.map('map', { 
    preferCanvas: true 
}); 
var circleMarker = L.circleMarker(latLng, { 
    color: '#3388ff' 
}).addTo(map); 

又は

var map = L.map('map'); 
var myRenderer = L.canvas({ padding: 0.5 }); 
var circleMarker = L.circleMarker(latLng, { 
    renderer: myRenderer, 
    color: '#3388ff' 
}).addTo(map); 

、各サークルマーカーは、もはや個々のDOM要素ではないが、その代わりにはるかに簡単である単一キャンバス上リーフレットによって描画されますブラウザのハンドル。

さらに、リーフレットはまだマウスの位置と関連イベントを追跡し、サークルマーカーの対応するイベントをトリガーします。このようなイベント（マウスのクリックなど）を引き続き聞くことができます。私が実際にしたい[leafletjsで140Kの点をプロット]のhttps://jsfiddle.net/sgu5dc0k/