MapLibre – 表示の基本 – 地理院地図の例

基本形

有償となったMapBoxの代わりにオープンソースのMapLibreで地理院地図ベクトルタイルを表示する例。

要点は以下の通り。

  • 冒頭でサイトからライブラリーとスタイルを読み込むか、あらかじめダウンロードしておいたライブラリーを指定する
  • マップを表示するコンテナー要素を準備する
  • スクリプトでmaplibregl.Mapクラスのインスタンスを生成する
    • コンテナーに準備した要素のidを指定
    • 地理院地図のスタイルを指定
    • 地図表示の中心経緯度を指定~経度・緯度の順番なので注意
    • ズーム関係のパラメーターを指定

デフォルトでのマウス/キー操作

デフォルト設定では、以下のマウス操作が可能になっている。

  • ドラッグによる地図の移動
  • SHIFT+ドラッグによるボックスズームイン
  • CTRL+ドラッグによる回転と傾斜
  • ダブルクリックによるズームイン
  • SHIFT+ダブルクリックによるズームアウト

また、地図コンテナーにフォーカスがある状態で以下のキー操作が可能

  • カーソルキーによる地図の移動
  • SHIFT+←/→キーによる地図の回転
  • SHIFT+↑/↓キーによる傾斜

スタイルでソースを指定している

上記コードでは、表示させるターゲットの地理院地図ベクトルタイルが明示されていないが、実はターゲットとなるデータはstyleで示されるJSON中で指定されている。

  • sourceのIDは"gsibv-vectortile-source-1-4-16"
  • layerのIDは"gsibv-vectortile-layer-761"
  • sourceで指定するtilesは、地理院サイトで示されているURL

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です