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

##はじめに 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レンダラーを選択
});