Labo288

プログラミングのこと、GISのこと、パソコンのこと、趣味のこと

Leafletのパフォーマンス改善について


はじめに

Leafletは実装が簡単でカスタマイズ性も高く、非常に使いやすいWeb地図ライブラリですが、デフォルトの設定だと、多数の地物で構成されるベクターレイヤーの描画に、パフォーマンス上の問題がありました。要はポリゴンが多くなると途端に動作が重くなります。色々調べたところ、ある程度改善したのでその方法を示します。

オプションをいじるだけ

https://stackoverflow.com/questions/23745436/leaflet-js-with-a-vector-layer-is-very-slow
たどり着いたのがこのStackoverflowのスレッド。マップのpreferCanvasオプションを変えてみろ、と言っています。

実装

https://leafletjs.com/reference-1.5.0.html#global
公式ドキュメントによれば、preferCanvasオプションにより、SVGレンダラーかCanvasレンダラーか、どちらで地物を描画するか設定可能とのこと。デフォルト値はfalseで、SVGレンダラーに設定されている。一般にどっちが重いか軽いか、わからないがとりあえず試してみると、劇的に改善した。つまりCanvasによるレンダリングの方が軽いということですね。

var map = L.map('map_container',{
	preferCanvas:true, //trueとし、Canvasレンダラーを選択
});