Mapbox GL JSでのヒートマップの紹介

Mapbox GL JSの0.41リリース（およびそれに続くMobile SDKs）では、大規模なポイントデータセットを視覚化および探索するための美しい方法であるヒートマップを導入します。

ヒートマップとは、特定エリアにおける点の密度を色の範囲で表現したデータ視覚化です。ヒートマップは、データの「形状」を把握し、多くの点が密集している集中エリアを強調するのに役立ちます。Mapbox GL JSの動的なヒートマップレイヤーは、パンやズームをしながら60fpsでスムーズにレンダリングされます。高速で、大量のデータ（特にクラスタリングと組み合わせた場合）を処理できます。40万点のインタラクティブなヒートマップがどのように見えるか見てみましょう。

ヒートマップのスタートガイド

すぐにヒートマップの使用を開始したい場合は、公式サンプルをご覧になるか、詳細なチュートリアルをご覧ください。さらに詳しく知りたいですか？概要をお読みください。

まず、タイプ'heatmap'のレイヤーをスタイルに追加することから始めます。

ヒートマップは、ユースケースに応じて多くのカスタマイズが必要になる場合があります。幸いなことに、Mapbox GL JSは、レイヤーの外観のあらゆる側面をリアルタイムで制御するための強力なペイントスタイルプロパティセットを提供します。

map.addSource('earthquakes', {
    type: 'geojson',
    data: 'earthquakes.geojson'
});

map.addLayer({
    id: 'earthquakes',
    source: 'earthquakes',
    type: 'heatmap'
});

heatmap-radius

このプロパティは、ピクセル単位での各ポイントの「影響範囲」（カーネル密度推定における帯域幅パラメータと同等）を設定することにより、ヒートマップの詳細度に影響を与えます。値を大きくすると、より滑らかで一般的な外観になります。このプロパティはズーム機能にすることもでき、ズームインに合わせて外観を調整できます。

このスタイルプロパティは、ヒートマップデザインの最も重要な側面、つまり、地図上の各ピクセルの「密度」値を色に変換する方法を制御します。

プロパティの値は、0.0から1.0の範囲の密度値を色にマッピングする関数です。この例では、最も疎な領域を青色にし、最も密集した場所で黄色から赤色に徐々に移行します。

"heatmap-color": {
    "stops": [
        [0.0, "blue"],
        [0.5, "yellow"],
        [1.0, "red"]
    ]
}

heatmap-color

このスタイルプロパティは、ヒートマップデザインの最も重要な側面、つまり、地図上の各ピクセルの「密度」値を色に変換する方法を制御します。

プロパティの値は、0.0から1.0の範囲の密度値を色にマッピングする関数です。この例では、最も疎な領域を青色にし、最も密集した場所で黄色から赤色に徐々に移行します。

"heatmap-color": {
    "stops": [
        [0.0, "blue"],
        [0.5, "yellow"],
        [1.0, "red"]
    ]
}

heatmap-intensity

このプロパティを使用すると、ヒートマップの外観の強度をグローバルに調整できます。値が大きいほど、各ポイントが外観に与える「重み」が大きくなります。関係は線形です。たとえば、heatmap-intensityを10.0に設定することは、データセットを10回複製し、デフォルトの1.0値でレンダリングすることと同じです。

heatmap-intensity は、ヒートマップの外観をさまざまなズームレベルに合わせて調整するのに非常に役立ちます。一定のままにすると、ポイントが視覚的に近くなるため、ズーム率が低いほどヒートマップがはるかに濃く表示されます。

heatmap-weight

このスタイルプロパティは、heatmap-intensityと同じように機能しますが、データ駆動型にすることができ、フィーチャプロパティに応じて個々のポイントの強度を調整できます。

この例では、point_countの値が100のポイントは、point_countが1の100個のポイントと同じように表示されます。クラスタリングと組み合わせることで、描画するポイントの数を大幅に削減し、ヒートマップのパフォーマンスを向上させます。

heatmap-opacity

このプロパティは、ヒートマップレイヤーのグローバルな不透明度を制御します。

heatmap-opacityの便利なアプリケーションの1つは、ズームイン時にヒートマップをフェードアウトして、より詳細な表示を行うことです。

ヒートマップの内部構造

数学的に言えば、Mapbox GLヒートマップは、ガウスカーネルを使用した二変量（2D）カーネル密度推定です。これは、各データポイントの周囲に「影響」の領域（カーネルと呼ばれる）があり、影響の数値（密度と呼びます）がポイントから離れるにつれて減少することを意味します。画面のすべてのピクセル内のすべてのポイントの密度値を合計すると、結合された密度値が得られ、それをヒートマップの色にマッピングします。

これをOpenGLで実装するには、データポイントごとに、カーネル（ぼやけた円のように見えます）を加法混色を使用してオフスクリーンのハーフフロートテクスチャに描画し（カーネルが重なると値が合計されるように）、次にこのグレースケールテクスチャを別のステップで色付けします。

理想的には、対応する点から遠く離れていても、この値が完全にゼロになることはないため、データ点ごとに画面のすべてのピクセルの密度を個別に計算する必要があります。しかし、それではコストがかかりすぎます。描画する点の数がわずかであっても、数十億回の演算が必要になります。処理を高速化するために、各カーネルを、外側のすべての値が非常に小さくなる（特定のしきい値未満—ここでは1 / 255 / 16を任意に選択）正方形に切り抜きます。このサイズは、各ポイントの重みと強度に依存します。重いポイントほど、より大きな描画領域が必要になります。

さらに、密度を描画するために、地図の解像度よりも4倍小さい辺を持つ縮小されたテクスチャを使用し（これにより、各ポイントに対して描画するピクセル数が16分の1になります）、次に色付けステップ中に線形補間を使用してテクスチャを拡大します。ヒートマップの場合、これは視覚的にはフル解像度レンダリングとほとんど区別できませんが、大幅に高速化されます。

ヒートマップへの異なるアプローチ

他のプラットフォームでは、ヒートマップをサーバー上の静止画像タイルとしてレンダリングします。Mapboxのアプローチは、Mapbox GLをコアとして活用し、60fpsでのスムーズなトランジションを実現し、適切なカラーランプの選択からズームレベルごとのポイント半径の調整まで、ヒートマップレイヤーのあらゆる側面を大規模に制御できます。ヒートマップを、データドリブンなスタイル設定、式、クラスタリングなどの他のGL JS機能と組み合わせることで、データのよりユニークな構成を実現できます。

お読みいただきありがとうございます！GL JSでのヒートマップについては、こちらの例とチュートリアルをご覧ください。また、今年の後半にMobile SDKsでこの機能がリリースされる予定ですので、ご期待ください。ご質問やご意見がありましたら、Twitter（@mourner）またはMediumでこちらにご連絡ください。ハッシュタグ#BuiltWithMapboxを付けて、何を作ったか教えてください。

‍