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

[ASAHI Kosuke]

喜多さん

あさひです

下記についてです。

>> また、ポリゴンやマーカーなどを表示するズームレベルを限定はできますか？
>> 例えばズームレベル17より小縮尺は表示しないとか。

こんな感じでどうでしょう？

◯ズームレベル変更のイベントに合わせてレイヤを追加/削除する

#レイヤ作っておいて
geojson = L.geoJson(tsunamiData, {
	style: style,
	onEachFeature: onEachFeature
});

#mapのズームレベル変更のイベントを拾う
map.on('zoomend', function(e) {

  #現在のズームレベルを見て、レイヤを追加/削除をする
  var zoom = map.getZoom();
  if (zoom < 6) {
    if (map.hasLayer(geojson) == true)
      map.removeLayer(geojson);
  } else {
    if (map.hasLayer(geojson) == false)
      map.addLayer(geojson);
  }
});

◯個別の図形について表示/非表示を判断する

#filterを設定して、個別の図形の表示・非表示を判断します
geojson = L.geoJson(tsunamiData, {
	style: style,
	onEachFeature: onEachFeature,
        filter: function(feature, layer) {
            #この中で個別の図形(feature)について表示する場合は"return
true", 表示しない場合は"return false"とする処理を書く
        }
}).addTo(map);

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
> 


-- 
北海道地図株式会社 研究開発課
朝日　孝輔
mailto:asahi ＠ hcc.co.jp
Tel : 0166-62-4711