MapLibre GL JSで時系列コントロールを扱う[maplibre-gl-temporal-control]

TL;DR

• MapLibre GL JSで時系列表示をするためのプラグインmaplibre-gl-temporal-controlを開発したよ
• npm install mapligre-gl-temporal-controlで使えるよ

maplibre-gl-temporal-control

examples

• RasterTiles: https://kanahiro.github.io/maplibre-gl-temporal-control/raster.html
• VectorTiles: https://kanahiro.github.io/maplibre-gl-temporal-control/vector.html

usage

npm install maplibre-gl-temporal-control

const map = new maplibregl.Map(mapOptions)

// anyLayerはmaplibreレイヤーのオブジェクト
map.addLayer(anyLayer1_1)
map.addLayer(anyLayer1_2)
map.addLayer(anyLayer2_1)
map.addLayer(anyLayer2_2)
map.addLayer(anyLayer3_1)
map.addLayer(anyLayer3_2)

import TemporalControl from 'maplibre-gl-temporal-control';

// アニメ表示の各フレームを定義
const temporalFrames = [
    {
        title:'frame1', // 時系列コントロールに表示されるタイトル
        layers:[anyLayer1_1, anyLayer1_2] // 1フレームに表示したいレイヤーの配列
    },
        title:'frame2',
        layers:[anyLayer2_1, anyLayer2_2]
    },
    {
        title:'frame3',
        layers:[anyLayer3_1, anyLayer3_2]
    },
    // 任意の数のフレーム
]

const temporalControl = new TemporalControl(temporalFrames, {
    interval: 100, // 1フレームあたりの表示秒数、ms単位
    position: 'top-left',
    performance: true // アニメ表示のパフォーマンスを向上させるフラグ
});
map.addControl(temporalControl);

ポイント

• Mapに追加したレイヤーオブジェクトと同じ内容のオブジェクトでフレームを生成しましょう（同じインスタンスである必要はない）
• performance: trueの場合、描画パフォーマンス向上のため、本来ゼロとする透過度を0.000000000000000000001とする（ベクター限定）
  • このオプションは通常の用途では設定不要です、もし大量のベクターデータの描画が遅かったりしたら試してみてください

技術メモ

• TypeScriptで開発
• CSSをファイルで定義すると、importしたりめんどうくさいので、すべてコード上で定義
• 同じような理由で、再生ボタンなどのアイコンはすべてbase64文字列として保持、ファイルサイズが小さいので容量増加のデメリットは無視