基本形
有償となった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中で指定されている。
sourceのIDは"gsibv-vectortile-source-1-4-16"layerのIDは"gsibv-vectortile-layer-761"sourceで指定するtilesは、地理院サイトで示されているURL
|
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 28 29 |
{ "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": [ { "id": "gsibv-vectortile-layer-761", "type": "line", "source": "gsibv-vectortile-source-1-4-16", "source-layer": "structurel", "metadata": { "layer-id": "layer-577", "title":"坑口", "path":"構造物-坑口", "added": 1 }, "minzoom": 14,"maxzoom": 17, "filter": ["all", ["in", "ftCode", 4202]], "layout": {"line-cap": "square", "visibility": "visible"}, "paint": {"line-color":"rgba(100,100,100,1)","line-width":1.5} ・・・・・ |