基本形
有償となったMapBoxの代わりにオープンソースのMapLibreで地理院地図ベクトルタイルを表示する例。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8" /> <title>MapLibre - GSI Vector Tile</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <!-- MapLibreのライブラリーをロード --> <script src="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js"></script> <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css"> </head> <body> <!-- マップを表示するコンテナー --> <div id="map" style="width: 800px; height: 600px"></div> <script> // Mapオブジェクトを生成 let map = new maplibregl.Map({ container: 'map', // 地図を表示するコンテナーのIDを指定 // 地理院ベクトルタイルのスタイル style: 'https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json', center: [135.0, 35.0], // 位置指定は経度,緯度の順番なので注意 zoom: 17, // 初期ズームレベル minZoom: 4, // 最小ズームレベル maxZoom: 17, // 最大ズームレベル }); </script> </body> </html> |
要点は以下の通り。
- 冒頭でサイトからライブラリーとスタイルを読み込むか、あらかじめダウンロードしておいたライブラリーを指定する
- マップを表示するコンテナー要素を準備する
- スクリプトで
maplibregl.Mapクラスのインスタンスを生成する- コンテナーに準備した要素のidを指定
- 地理院地図のスタイルを指定
- 地図表示の中心経緯度を指定～経度・緯度の順番なので注意
- ズーム関係のパラメーターを指定
デフォルトでのマウス／キー操作
デフォルト設定では、以下のマウス操作が可能になっている。
- ドラッグによる地図の移動
- SHIFT＋ドラッグによるボックスズームイン
- CTRL＋ドラッグによる回転と傾斜
- ダブルクリックによるズームイン
- SHIFT＋ダブルクリックによるズームアウト
また、地図コンテナーにフォーカスがある状態で以下のキー操作が可能
- カーソルキーによる地図の移動
- SHIFT＋←／→キーによる地図の回転
- SHIFT＋↑／↓キーによる傾斜
スタイルでソースを指定している
上記コードでは、表示させるターゲットの地理院地図ベクトルタイルが明示されていないが、実はターゲットとなるデータはstyleで示されるJSON中で指定されている。
styleで指定されたJSONの中を見てみると、sources属性のところに地理院サイトの提供URLのパターンがみられる。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "version":8, "glyphs":"https://maps.gsi.go.jp/xyz/noto-jp/{fontstack}/{range}.pbf", "sources":{ "gsibv-vectortile-source-1-4-16":{ "type":"vector", "tiles":["https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/{z}/{x}/{y}.pbf"], "minzoom":4, "maxzoom":16, "attribution":"<a href=\"https://maps.gsi.go.jp/vector/\" target=\"_blank\">地理院地図Vector（仮称）</a>"}}, "layers":[ ・・・・・ |
Map生成時に指定する属性名はstyleだが、その中でaddSourceと同様に指定するターゲットや表示するレイヤーを指定している。