web-dev-qa-db-ja.com

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

リーフレットマップに約10.000のマーカーまたはドットをレンダリングしたい。私はすでにそれを通常の方法で行っており、Google Mapsと比べてはるかに遅いことがわかりました。パフォーマンスの問題を発生させずに複数の要素をレンダリングする方法を探しています。

Leafletでこれを行う方法はありますか？

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

leafletmarkers
17
AFP_555

パフォーマンスの問題は、各マーカーが個々のDOM要素であるという事実によるものです。ブラウザは何千ものレンダリングに苦労しています。

あなたの場合、代わりに簡単な回避策は Circle Markers を使用し、それらをCanvasにレンダリングすることです（たとえば、マップ preferCanvas オプションを使用するか、特定の キャンバスレンダラー 各サークルマーカーに対して renderer オプションとして渡す）。これがデフォルトのGoogleマップの仕組みです。マーカーは実際には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要素ではなく、代わりにリーフレットによってsingleCanvasに描画されます。ブラウザ用。

さらに、リーフレットは引き続きマウスの位置と関連イベントを追跡し、サークルマーカーで対応するイベントをトリガーするため、そのようなイベント（マウスクリックなど）をリッスンできます。

100kポイントのデモ： https://jsfiddle.net/sgu5dc0k/

51
ghybs

https://github.com/robertleeplummerjr/Leaflet.glify を確認する必要があります。 Web glを使用してリーフレットポイントとポリゴンをレンダリングする方法を提供し、より簡単にスケーリングできるようにします。

Rを使用してリーフレットを作成する人も利用できます。 https://github.com/tim-salabim/leaflet.glify

Rバージョンは非常に簡単です。

3
Bastien

公式のLeafletプラグインPixiOverlayで良い結果が得られました。 https://github.com/manubb/Leaflet.PixiOverlay

2
Pedro Vicente

[2019]

少し遅すぎるかもしれませんが、Pedro Vicenteの答えは、最良の選択肢のようです。 Leaflet.glify（ https://github.com/robertleeplummerjr/Leaflet.glify 。）は良いですが、マップ上にドット、シェイプ、ラインを作成する以外のオプションはありません。 （カスタマイズはまだありません。）PixiOverlayは、ネイティブ/カスタムマーカーで動作します。また、素敵な視覚化（アニメーション、スケーリングなど）もあります。IE 11.でも動作します。私にとっては、大量のマーカーを扱う場合は必須です。試してみてください- https://github.com/manubb/Leaflet.PixiOverlay

P.S GlifyとPixiOverlayはどちらもWebGLを利用しているため、ユーザーのコンピューターのパフォーマンスは異なります。

0
Lex Dacs