leaflet入門|おすすめプラグイン(ズーム系)

leafletのプラグインで提供されているズーム系プラグインをまとめてみました。

ズーム系プラグインを3種類に分類して、それぞれのDemoと実装方法を記載しています。

矩形選択した場所を拡大する

矩形選択した場所を拡大するプラグインは2つあります。

L.Control.BoxZoom

L.Control.ZoomBar

L.Control.BoxZoom

Demo

虫眼鏡アイコンをクリックすると、矩形選択できるようになります。

詳細な実装方法は以下のページに記載しています。

leaflet入門|プラグインで矩形選択した箇所を拡大する(BoxZoom)

L.Control.ZoomBar

Demo

こちらも、虫眼鏡アイコンをクリックすると、矩形選択できるようになります。

L.Control.BoxZoom と異なるのは、ホームアイコンが付いており、クリックすると地図を初期表示に戻すことができます。

詳細な実装方法は以下のページに記載しています。

leaflet入門|プラグインで矩形選択した箇所を拡大する(ZoomBar)

ズームレベルを制限する

ズームレベルを制限するプラグインは、Leaflet.LimitZoom を使用します。

Leaflet.LimitZoom

Demo

Demoでは、ズームレベルを「1、10、15」の3段階に制限しています。

制限することで、素早くズームレベルを切り替えることができます。

詳細な実装方法は以下のページに記載しています。

leaflet入門|プラグインでズームレベルを制限する(LimitZoom)

地図上にズームレベルを表示する

ズームレベルを表示するプラグインは2つあります。

Leaflet.zoominfo

Leaflet.ZoomLabel

Leaflet.zoominfo

Demo

+・-の間に、現在のズームレベルが表示されます。

詳細な実装方法は以下のページに記載しています。

leaflet入門|プラグインでズームレベルを表示する(zoominfo)

Leaflet.ZoomLabel

Demo

少々小さいですが、画面の左下に「15」と現在のズームレベルが表示されます。

詳細な実装方法は以下のページに記載しています。

leaflet入門|プラグインでズームレベルを表示する(ZoomLabel)

どのプラグインも簡単実装することができます。気になるプラグインは、ぜひ使ってみて下さい。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする