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

1 基本形
2 addSource
3 addLayer
4 図形の描画例

基本形

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

let map = new maplibregl.Map({...});

map.on('load', {
  map.addSource('ソースID', {
    type: 'geojson',
    data: {
      ここで図形（群）を定義
    }
  });

  map.addLayer({
    'id': 'レイヤーID',
    'type': '描画タイプ',
    'source': 'ソースID',
    'layout': {レイアウト},
    '図形タイプ': {
  });
});

let map = new maplibregl.Map({...});

map.on('load', {

map.addSource('ソースID', {

type: 'geojson',

data: {

ここで図形（群）を定義

}

});

map.addLayer({

'id': 'レイヤーID',

'type': '描画タイプ',

'source': 'ソースID',

'layout': {レイアウト},

'図形タイプ': {

});

addSource

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

addLayer

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

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

TauStation

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

基本形

addSource

addLayer

図形の描画例

コメントを残すコメントをキャンセル

基本形

addSource

addLayer

図形の描画例

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル