リーフレットやオープンレイヤーを使用した大量の動的データポイント

Question

大量のデータを含むマップを実装したいと考えています。 https://openlayers.org/en/latest/examples/geojson.html または http://leafletjs.com/examples/quick-start/

100％でズームアウトしながら、マップが動的に更新されます合計で50000個のマーカーまたは円（各1-5分）の周りに表示する必要があります。設定したユーザーに応じて、円/マーカーの色などが異なる場合があります。

ズームインしている間は、約1000個の小さな画像を表示する必要があります（サークル/マーカーのある場所）。

マップ内でこのような膨大な量の動的データを処理するにはどうすればよいですか？たとえば、リーフレット内で小さなサークルを使用すると、ズームインしたりズームアウトするときに1000以上の問題を処理することができますが、ブラウザーは〜5000以上で苦労し始めます。これはブラウザーがロットを処理する必要があるためですのデータポイント。 OpenLayersにも同じ問題があると私は期待しています。

どのような考えですか？

Answer 1

キャンバスレンダラー幅L.canvasを使用する必要があります。マップオプションpreferCanvasをtrueに設定するか、レンダラ幅L.canvasを作成してフィーチャレイヤ幅rendererオプションにバインドします。だから、このようなものになります。また、私はレンダラがこのデータ量を扱うことができる場合でも、あなたは、部品に機能を追加することをお勧めします

L.geoJson(null,{renderer:L.canvas()}); 

、まだ一度にこれをレンダリングするために、長い操作になります。データを分割して代わりにtimeoutを使用することができます。

カスタムデザインポイントが必要な場合は、このクラスと幅の新しいフィーチャタイプを拡張することもできます。

幅この技術は、60000以上のマーカーをレンダリングできました。