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

Leafletのプラグイン「ZoomBar」を使用すると、地図上の矩形選択をした箇所を拡大することができます。

また矩形選択の拡大表示だけではなく、「初期位置(地図の中央)に戻る」ホームボタンも追加することができます。

実装すると以下のようになります。

 マップを初期表示の状態に戻すことができます。

 地図を矩形選択することができます。

矩形選択した箇所が拡大されます。

Demoはこちらです。

1.全体のコード

2.解説

地図を描画するまでの解説は、leaflet入門1に記載しています。

2−1.ファイルの配置

ZoomBar の本体は GitHubからダウンロードできます。

GitHub-ZoomBar

GitHubから取得したcss・jsファイルを以下のように配置します。

index.html
css/L.Control.ZoomBar.css
css/images/zoom-to-area-26.png
css/images/zoom-to-start-26.png
js/L.Control.ZoomBar.js

2−2.プラグインの読み込み

2-1で配置した css・jsファイルを読み込みます。

2−3.Mapの基本設定

mapオブジェクト作成時に、オプション「zoomControl: false」とすることでデフォルトのズームコントローラーを非表示にすることができます。

今回追加するプラグインのコントローラーでは

・初期位置(地図の中央)に戻る
・拡大
・縮小
・選択範囲を拡大

の4つの機能が追加されます。

2−4.ZoomBar の設定

L.Control.ZoomBar オブジェクト を mapに追加するだけで設定完了です。

これだけで、ZoomBar を使うことができます。

3.その他のおすすめプラグイン

その他のズーム系おすすめプラグインは、こちらに記載しています。
Leaflet入門|おすすめプラグイン(ズーム系)

すべてのおすすめプラグインは、こちらに記載しています。
Leaflet入門|おすすめプラグイン 

スポンサーリンク

シェアする

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

フォローする