MapLibre – Popup

概要

クリック位置に地物(Feature)があれば、その属性をポップアップで表示する。ここでは地理院ベクトルタイルを表示させた地図に地物を表示させ、これらをクリックしたときにその属性を表示させている。

クリック時の地物の捕捉方法はこちらを参照。

実装例

内容

Popupには任意のHTMLを書けるが、ここではqueryRenderedFeaturesで取得した地物の属性を出力している。複数の地物が捕捉された場合、その分だけのポップアップが表示される。Popupは内容に合わせて幅や高さが調整される。

Popup生成時の引数で、クリック時の消去をfalseにして、スタイル設定用のHTMLクラス名を設定している。

その後、生成したPopupインスタンスの位置と表示内容をセットして、地図に貼り付けている。

ポップアップ内で桁を揃えるためのスタイルは、head要素内で定義している。

 

MapLibre – ソースの地物を捕捉する

概要

地図上でマウスクリックしてaddSourceaddLayerで表示した地物(Feature)を捕捉する。

  • FeatureCollectionの個々のFeature'properties'で属性を設定
  • map.on('click', ...)でマウスクリックを捕捉
  • クリック位置で地物を表示したレイヤ上の地物があれば、その属性等をコンソールに表示

実装例

内容

  • FeatureCollectionで2つのPointを定義し、それぞれのidとnameを属性として設定している
  • Pointのレンダリングは青い丸としている
  • クリック時のリスナーをmap.on('click', ...)で登録している
  • クリック位置のFeature群をqueryRenceredFeaturesで取得している
    • 第2引数で取得対象のソースがあるレイヤーを限定している
  • 取得したFeature群をforEachで1つずつ取り出して表示
    • このとき取り出した1つのfeatureundefinedでない場合だけ表示させている

 

MapLibre – GeoJSONのソースを描画する

基本形

  • Mapオブジェクトのonメソッドで、マップのロード後処理として記述する
  • MapオブジェクトのaddSourceメソッドで図形を定義し、addLayerメソッドでレンダリング方法などを記述する
  • addLayerでソースIDを指定する

addSource

  • 第1引数でソースIDを設定し、第2引数に図形のGeoJSONを記述する

addLayer

詳細はMapLibreのLayerのドキュメントを参照。

  • id:一意なレイヤーID
  • type:形状タイプ
    • 'fill', 'line', 'symbol', 'circle', 'heatmap', 'fill-extrusion', 'raster', 'hillshade', 'background'
    • 形状タイプごとの描画仕様は、その内容によってlayoutpaintで指定する
  • source:このレイヤーに描かれるソースのIDを指定
  • layout:形状タイプごとの描画スタイルを設定
    • たとえば'line'の場合、'line-width', 'line-cap', 'line-join'など
  • paint:図形を描く色などを指定
    • たとえば'circle'の場合、'circle-color', 'circle-radius'など

図形の描画例

 

MapLibre – 多角形を描く

1つの多角形を描く

多角形(’Polygon')は'coordinates'を多角形の頂点の3次元配列で与え、始点と終点で同じ座標とする。レイアウトの'type''fill'

以下の例では、ベクトルタイルの地理院地図上に3つの頂点を持つ三角形を描いている。'paint'で外枠の線を青、塗りつぶしの色を緑、塗りつぶしの不透明度を0.4としている。

dataで直接Polygonを指定できる。

複数の多角形を描く

以下の例ではaddSourceで2つのPolygonを描いている。addLayoutは上と同じものを使っており、addSourceaddLayermap.onメソッド内で実行させる。

'FeatureCollection'の代わりに直接'MultiPolygon'で書くと以下の通り。Polygonの場合は頂点の経緯度配列の3次元配列だったが、MultiPolygonの場合はさらにそれらの配列、4次元配列になる

これは折れ線の時と比べるとおかしく思えるが、後述のように1つの図形で複数の閉曲線を持つ場合があるためと考えられる。

捩じれたポリゴンは描けない

以下のように捩じれたポリゴンは描かれない。

ドーナッツは描ける

1つのフィーチャーで外側のポリゴンに内側のポリゴンが収まっていれば、描画方向に関わらずドーナッツのようなポリゴンになる。ただしドーナッツの穴の中にポリゴンを置くとうまく描かれない。

 

MapLibre – 折れ線を描く

1つの折れ線を描く

折れ線(LineString)は'coordinates'を折れ線の各点の2次元配列として与える。以下の例では、ベクトルタイルの地理院地図上に3つの点を結ぶ折れ線を描いている。レイアウトの'type''line'。線の色と太さは'paint'で設定し、'layout'では線の端部を丸く、折れ線の角を尖らせている。

dataで直接'LineString'を指定できる。

複数の折れ線を描く

以下の例ではaddSourceで2つのLineStringを描いている。addLayoutは上と同じものを使っており、addSourceaddLayermap.onメソッド内で実行させる。

'FeatureCollection'の代わりに直接'MultiLineString'で書くと以下の通り。LineStringの場合は通過点の経緯度の配列の2次元配列だったが、MultiLineStringの場合はさらにそれらの配列、3次元配列になっている。

 

MapLibre – 点を描く

1つの点を描く

以下の例では、ベクトルタイルの地理院地図の中央に1つの点を描き、そのスタイルを半径20の青い丸と設定している。

dataで直接'Point'を指定できる。

複数の点を描く

以下の例ではdata'type''FeatureCollection'として2つの点を描いている。点を青い丸で描くレイアウトは上と同じ。

'FeatureCollection'の代わりに直接'MultiPoint'で描くと以下の通り。Pointのときは経度・緯度を要素とする配列だったが、MultiPointの場合はそれらの2次元配列になっている。

 

MapLibre – MapBoxDrawによる描画機能

実装例

手順

  1. head要素内で以下を読み込む
    • turf.js:空間演算用のライブラリー(Turf.js)
    • mapbox-gl-draw.js
    • mapbox-gl-draw.css
  2. Mapオブジェクトを生成する
  3. MapboxDrawオブジェクトを生成する
  4. 生成したMapboxDrawオブジェクトをMapオブジェクトのコントロールとして追加する

MapBoxDrawコンストラクターのパラメーター

パラメーターなしの場合

パラメーターなしの場合、Line、Polygon、Point、trashとCombine、Uncombineのボタンが準備される。

パラメーターありの場合

表示されるボタンを選ぶことができる。

  1. displayControlsDefaultfalseにセット
  2. controlsの連想配列で必要なボタンをtrueにセット
    • line_string, polygon, point, trash, combine_features, uncombine_features

 

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

実装例

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

記述方法

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

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

コントロールの種類

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

表示オプション

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

 

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