pbf – TauStation

実装例

MapLibreの組込みコントロール追加方法。地理院地図ベクトルタイルでの表示例。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta charset="utf-8" />
  <title>MapLibre - Controls</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <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>
      let map = new maplibregl.Map({
        container: 'map',
        style: 'https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json',
        center: [135.0, 35.0],
        zoom: 17,
        minZoom: 4,
        maxZoom: 17,
      });

      // コントロールの追加
      map.addControl(new maplibregl.NavigationControl(), 'bottom-right');
      map.addControl(new maplibregl.ScaleControl(), 'bottom-left');
      //map.addControl(new maplibregl.GeolocateControl(
      //  {positionOptions: {enableHighAccuracy: true}, trackUserLocation: true}), 'top-right');

      // 表示オプション
      map.showTileBoundaries = true;
      // map.showCollisionBoxes = true;
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>MapLibre - Controls</title>

</head>

<body>

let map = new maplibregl.Map({

container: 'map',

style: 'https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json',

center: [135.0, 35.0],

zoom: 17,

minZoom: 4,

maxZoom: 17,

});

// コントロールの追加

map.addControl(new maplibregl.NavigationControl(), 'bottom-right');

map.addControl(new maplibregl.ScaleControl(), 'bottom-left');

//map.addControl(new maplibregl.GeolocateControl(

// {positionOptions: {enableHighAccuracy: true}, trackUserLocation: true}), 'top-right');

// 表示オプション

map.showTileBoundaries = true;

// map.showCollisionBoxes = true;

</script>

</body>

</html>

記述方法

mapがMapインスタンスを参照しているとき、以下の形式で記述。

map.addControl(new maplibregl.[コンストラクター], '[位置指定]');

1	map.addControl(new maplibregl.[コンストラクター], '[位置指定]');

[コンストラクター]はコントロールのコンストラクターで、[位置指定]はtop-left、bottom-rightなど

コントロールの種類

NavigationControl: ズーム(+/−)とローテーションのボタン。ローテーションはボタン位置でドラッグすると地図が回転し、ダブルクリックで北が上の位置に戻る。
ScaleControl: スケールを表示する。スケール表示はズームレベルに合わせて変化する。
GeolocateControl: 携帯端末などでユーザーの位置を扱う。

表示オプション

showTileBoundaries: trueにセットするとタイル境界を表示させる
showCollisionBoxes: trueにセットすると衝突によりラベルが表示されない場合も境界ボックスを描画する。

基本形

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

<!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>

<!DOCTYPE html>

<head>

<title>MapLibre - GSI Vector Tile</title>

</head>

<body>

// 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

{
  "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}
    ・・・・・

{

"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}

・・・・・

TauStation

タグ: pbf

MapLibre – コントロールの追加と表示オプション

実装例

記述方法

コントロールの種類

表示オプション

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

基本形

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

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