ポイントのデータを集約して表示したい

というお声をいただくことがあります。

以下の画像に表示されているような表現ですね。

ポイントデータを集約した単一のシンボルと、集約されたポイント数を併せて表示する手法は「クラスター表示」と呼ばれています。

データが膨大にある場合、地図上に単純にポイントとして表示してしまうと、見通しが悪く、有効なデータビジュアライゼーションを実現できません。

たとえば、データの範囲が日本全国に及ぶものであれば都道府県単位の縮尺まではクラスター表示で集約するなど、膨大なデータを上手に見せる/伝えるためにはクラスター表示は便利な機能です。

ただし、ArcGIS API for JavaScript には、残念ながらポイントデータをクラスター表示させるための標準クラスが提供されていません。

しかし、標準ではありませんが、クラスター表示用のレイヤークラスがオープンソースとして公開されています。

クラスター表示用のカスタムレイヤークラス

GitHub: cluster-layer-js

細かい実装方法についてはソースコードを参照したほうが早いかもしれませんが、クラスターレイヤーを作成するコードは以下の通りです。

一般的なレイヤークラスと同じように扱えるので、Map.addLayer メソッドで Map オブジェクトにレイヤーを追加するだけでデータがクラスター化されて地図上に表示されます。

clusterLayer = new ClusterFeatureLayer({
     "url": "http://services.arcgis.com/wlVTGRSYTzAbjjiC/arcgis/rest/services/Evacuation_Shelter/FeatureServer/0",
     "distance": 95,
     "id": "clusters",
     "labelColor": "#fff",
     "resolution": map.extent.getWidth() / map.width,
     "singleSymbol": defaultSym,
     "singleTemplate": infoTemplate,
     "useDefaultSymbol": false, 
     "zoomOnClick": true, 
     "showSingles": true,
     "objectIdField": "FID",
     "outFields": ["NAME", "ADDRESS", "COUNT_"]
});

map.addLayer(clusterLayer);

なお、ArcGIS API for JavaScript とは別に独自にホストされているカスタムクラスをモジュールとして利用する場合は、以下のようなコードでモジュールのパスを定義する必要があります。

以下のコードの packages 配列内にて "//esri.github.io/cluster-layer-js/src" という URL パスを "app" という名前に変換しています。

<script type="text/javascript">
        window.dojoConfig = {
            async: true,
            packages: [
            {
                name: "app",
                location: "//esri.github.io/cluster-layer-js/src"
            }
        ]};
</script>

上記のコードによって "app/clusterfeaturelayer" としてクラスターレイヤークラスをモジュールとしてインポートできるようになります。

実体は http://esri.github.io/cluster-layer-js/src/clusterfeaturelayer.js です。

モジュール名では .js は省略されます。

require(["esri/map",
     ...
     "app/clusterfeaturelayer",

サンプルのデモとソースコードを合わせて確認しながら、ぜひお試しになってください。

なお、サンプルアプリは愛知県の診療所オープンデータを表示します。

ポイントのデータを集約して表示したい

ポイントのデータを集約して表示したい

Web 開発