OpenStreetMapの地図の上で多数のマーカーをリアルタイムにアニメーション

作成日: 2021-04-07
キーワード: GPSロガー位置情報 OpenStreetMap リアルタイム地図 mapbox

移動する人や車の位置や付随する情報を地図の上にリアルタイムに可視化したいことは多々あります。この記事では、OpenStreetmapの地図の上に、3000台程度の車両をあらわすマーカーをリアルタイムにアニメーションする方法を書きます。先ず、OpenStreetMapの地図の上に多数のマーカーをアニメーション表示している様子を見ます。

次の図1は、埼玉県内の一定範囲内に、車の移動開始点と移動終了点の組をランダムに100組作成し、弊社製の経路検索エンジンを使用して作成した自動車向けの経路の上を移動する様子を動画にしたものです。マーカーの動きを強調するために、500 km/hで移動するようにしてあります。

図1: 自社製の経路検索エンジンを使用してランダムに作成した自動車用の経路（地図上の青い線）100通りに沿って、時速500 km/hでマーカーを描画している様子

次の図2は、先の図1と同じ要領で車の台数を3000台まで増やし、見やすさのために経路表示を取り除いたものです。

マーカーが3000個になっても、OpenStreetMapの地図の上をマーカーが滑らかに移動しています。

図2: 自社製の経路検索エンジンを使用してランダムに作成した自動車用の経路3000通りに沿って、時速500 km/hでマーカーを描画している様子

上の例のようにOpenStreetMapの地図の上にマーカーをアニメーション表示するために、商用で使用可能なライセンスのmapbox-gl-jsのv1.13.1を使用しています。

次の図3は、マーカーのアニメーションの部分だけを分かり易く抽出したものです。

図3: マーカーを円周上で動かしている様子

地図上のマーカーのアニメーションを行っている部分のJavaScriptのコードは次のようになっています。

map.on('load', () => {
    if (attributes.animate === 'on') {
        const radius = 0.07;

        const animateMarker = (timestamp) => {
            map.getSource('point').setData(pointOnCircle(timestamp / 1000));
            requestAnimationFrame(animateMarker);
        };

        const pointOnCircle = (angle) => {
            return {
                type: 'Point',
                coordinates: [
                    map.getCenter().lng + Math.cos(angle) * radius,
                    map.getCenter().lat + Math.sin(angle) * radius
                ]
            }
        };

        map.addSource('point', {
            type: 'geojson',
            data: pointOnCircle(0)
        })

        map.addLayer({
            id: 'point',
            source: 'point',
            type: 'circle',
            paint: {
                'circle-radius': 10,
                'circle-color': 'red'
            }
        })

        animateMarker(0);
    }
})

上の基本的なコードを、並行処理などを交えて多数回行うことで、10000程度のマーカーをリアルタイムにアニメーション表示することができます。

可視化技研株式会社では、移動体の位置情報をはじめ多量のIoTデータの取得、保存、リアルタイム処理、可視化の各フェーズで必要な技術を蓄積しています。ご入用の際はお気軽にお問い合わせください。