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

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

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

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

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

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

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

Demoはこちらです。

全体のコード

解説

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

Step1:ファイルの配置

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

Step2:プラグインの読み込み

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

Step3:Mapの基本設定

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

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

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

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

Step4:ZoomBar の設定

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

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

スポンサーリンク

シェアする

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

フォローする