[OSGeoJapan-discuss] Leaflet+Geojsonが重たいのですが、対処法がありますか？

[Taro Matsuzawa]

松澤です。

地図を動かせないのはLeaflet 0.7.3系のパフォーマンスの問題があります。
単純にLeaflet 1.0.0-beta1を使うだけでも動作はします。

https://github.com/smellman/LeafLet_test/commit/03810702c7f9694bb5b0ddc9bd3adef9062dafbf

こんな感じです。

あと、そもそもgeojsonに使われてないデータが結構あるので、
それを弾くとどうなるかなども確認してみました。

https://github.com/smellman/LeafLet_test/commit/0c0f86b21f1595c401fcc9b777f7251d5d253087

そこまで速度は稼げなかったですが、
体感として少し良くなります。
いちおう工夫した点としては、
1. geojsonはネットワークで経由で読み込む(元のgeojson自体はinvalidなので)
2. geojsonを読み込んだ後に余計なデータは削除する
3. headタグでjsは読み込まないようにする
などをしています。

で、結局のところ元のgeojsonがでかすぎる(16MB)ので、
和山さんが書いたようにutfgridなどのべつのものを使った方がいいと思います。
https://github.com/mapbox/utfgrid-spec
明らかにgeojsonには不向きのデータだと思います。

On 2015/07/30 1:40, 喜多耕一 wrote:
> 北海道の喜多です。
> 
> 現在、Leafletを使って、様々なデータをWebで可視化しようと思っていてるのですが、北海道の津波浸水予想範囲のメッシュデータ（ポリゴン）を地図上に表示すると非常に重たくなります。
> 
> サンプル
> http://koukita.github.io/LeafLet_test/tsunami_test/index.html
> 
> ひとつの町村の半分も表示していないのですが、地図を動かすことも出来ません。
> 
> このままでは、使い物にならないのですが、大量のポリゴンデータでもスムーズに動かす方法はあるのでしょうか？
> 
> たとえば、表示している地図の範囲のみデータを読み込むとか・・・。
> 
> また、ポリゴンやマーカーなどを表示するズームレベルを限定はできますか？
> 例えばズームレベル17より小縮尺は表示しないとか。
> 
> JavaScriptもHTMLも初心者ですので、わかりやすい説明でお願いします。
> よろしくお願いします。
> 
> 北海道 喜多耕一
> 
> 
> 
> _______________________________________________
> OSGeoJapan-discuss mailing list
> OSGeoJapan-discuss ＠ lists.osgeo.org
> http://lists.osgeo.org/mailman/listinfo/osgeojapan-discuss
> 


-- 
Georepublic Japan Ltd.
3-24-14, Honmachi, Shibuya-ku, Tokyo, Japan

Taro Matsuzawa
Senior Developer

eMail: taro ＠ georepublic.co.jp
Web: https://georepublic.info

Tel: +81 (03) 4578 9352
Fax: +81 (03) 3374 0291