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

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

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

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

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

ただし、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",

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

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