[Leaflet.js] レイヤ,スケールコントロールを追加する

最初に簡単な地図を作成してみましたが,これだけではWebGISとしては何もできないので,順を追って必要なものを追加していきます。

レイヤコントロール

標準的な地図や衛星写真など,ベースレイヤの地図タイルを切り替えたくなる場面があります。特に地理院地図の場合,重ね合わせ情報を見やすくするには淡色地図が有効ですし,付近の雰囲気をつかむにはオルソ画像(空中写真)が見たくなります。

まずは切り替えて表示させたいタイルレイヤすべてのオブジェクトを生成します。
地理院地図のタイルURLや,ズーム範囲はこちら(http://maps.gsi.go.jp/development/ichiran.html)で調べます。

次に,最初の表示条件を設定した上で地図を生成します。最初は標準地図を表示させるため,ここでは上のオブジェクトのうち,stdのみを指定します。

最後に,パネルへの表示名,オブジェクト名を指定して,レイヤコントロールを追加します。

上のようにして追加すると,右上にレイヤアイコンが出て,マウスオーバーするとパネルが表示されます。

layercontrol

パネルを開きっぱなしにしておきたい場合は,最後の行を以下のように変更し,collapsedオプションをflaseにします。

L.control.layers は,baselayer, overlay, option の順に指定します。今回は overlay(重ね合わせ情報)は使っていませんので,nullと指定しています。オプションではレイヤコントロールの位置を4隅の違う場所に変更できますが,デフォルトのまま(右上)でいいでしょう。

スケール

スケールコントロールを同様に追加します。これは以下のように1行で済みます。日本人にはフィート単位表示はなじまないので非表示にしておきます。

こちらもコントロールの位置を変更できますが,デフォルトのまま(左下)でいいでしょう。

以上,全体のコードは以下のようになります。

関連記事