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レンダラーを選択
});