「ヒート マップ」とは、ポイントが集まっている密度が濃い場所と低い場所をグラデーションで表現し、状況を視覚的かつ効果的に伝えることができる可視化方法です。
ArcGISでは ArcGIS Online / ArcGIS Enterprise で配信されるデータをもとにマップ ビューアーで作成したヒート マップを、ArcGIS の開発者製品を使ってデスクトップまたはモバイル アプリから表示することができます。
マップ ビューアーに定義済みの配色で表現することもできますし、カスタム アプリで自分好みに配色を設定することもできます。
上図のようなレインボー カラーは標準で選択できる配色としては存在しないので、今回は ArcGIS Runtime SDK for Android を使ってヒート マップをレインボー カラーで表現する方法をご紹介します。
レインボー カラーのヒート マップ作成のための準備と作成方法
- 今回ご紹介する手順では、ArcGIS Online の開発者アカウントを使用して、ヒート マップとして表示するデータを ArcGIS Online 上に作成します。まだアカウントをお持ちでない方は、ArcGIS for Developers のサイトより無償アカウントを作成してご利用いただけます。作成方法はESRIジャパン開発リソース集の「アカウントの作成」をご覧ください。
- ヒート マップで表示したいポイントのフィーチャ レイヤーを準備する
今回は、ArcGIS Open Data より東京23区の保育園の位置情報データを使用して、保育園の密度を表示します。リンク先からデータを取得してフィーチャ レイヤーとしてArcGIS Online へホストします。
方法はCSV ファイルの公開をご覧ください。
レインボー カラーで表現するための JSON を作成する
配色を指定するための JSON の定義は、作成したフィーチャ レイヤーの詳細画面から取得することができます。
下図の左側の画面は ArcGIS Online でヒート マップを表現するように設定した、フィーチャ レイヤーの詳細画面です。フィーチャ レイヤーの詳細画面から[サービスの URL ]を選択して、”Drawing Info” の部分を使用します。この部分は、このフィーチャ レイヤーに含まれるフィーチャをどのように地図上に表現するかということを定義しています。
下図は “Drawing Info” から必要な箇所を取り出して、レインボー カラーの 7 色を RGB で指定した JSON です。
<SPAN class="punctuation token">{</SPAN><SPAN class="string token">"type"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="string token">"heatmap"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"blurRadius"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="number token">22.4468085106383</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"colorStops"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">[</SPAN>
<SPAN class="punctuation token">{</SPAN><SPAN class="string token">"ratio"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"color"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">133</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">193</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">200</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="punctuation token">{</SPAN><SPAN class="string token">"ratio"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="number token">0.01</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"color"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// 赤</SPAN>
<SPAN class="punctuation token">{</SPAN><SPAN class="string token">"ratio"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="number token">0.09249999999999999</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"color"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">165</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// オレンジ</SPAN>
<SPAN class="punctuation token">{</SPAN><SPAN class="string token">"ratio"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="number token">0.175</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"color"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">//黄色</SPAN>
<SPAN class="punctuation token">{</SPAN><SPAN class="string token">"ratio"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="number token">0.2575</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"color"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">128</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// 緑</SPAN>
<SPAN class="punctuation token">{</SPAN><SPAN class="string token">"ratio"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="number token">0.33999999999999997</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"color"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// 水色</SPAN>
<SPAN class="punctuation token">{</SPAN><SPAN class="string token">"ratio"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="number token">0.42250000000000004</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"color"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// 青</SPAN>
<SPAN class="punctuation token">{</SPAN><SPAN class="string token">"ratio"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="number token">0.505</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"color"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">128</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">128</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">//紫</SPAN>
<SPAN class="punctuation token">{</SPAN><SPAN class="string token">"ratio"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"color"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">}</SPAN> <SPAN class="comment token">//赤</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"maxPixelIntensity"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="number token">1466.0194349589192</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"minPixelIntensity"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
この JSON を ArcGIS Runtime SDK の Renderer クラスに指定すると、ヒート マップ レンダラーが作成されます。
”ratio” の要素で、構成する色の比率と色を指定しています。先の手順で取り出した JSON ではもう少し色が多く定義されていましたが、レインボー カラーに合わせて減らしました。
ここで定義している要素について説明します。
| 要素 | 説明 |
|---|
| Type | レンダラーの種類 |
| blurRadius | ヒート マップで表示するポイントの半径を定義します。 |
| maxPixelIntensity | 表示する密度の最大値を定義します。最大値以上の密度は同じ色で表現されます。 |
| minPixelIntensity | 表示する密度の最小値を定義します。最小値以下の密度は同じ色で表現されます。 |
| colorStops:ratio | 表示する色の比率と、色を定義します。比率は0～1の間で指定します。 「“ratio”：0」と「“ratio”：1」の定義は、マップがズーム イン/ズーム アウトを行う上で必ず必要な値となります。 |
カスタム カラーでレンダリングして表示する
さて、いよいよ作成した レインボー カラーの JSON 定義を使用して、フィーチャ レイヤーを表示してみます。
次のサンプル コードは、ArcGIS Online でホストした東京 23 区の保育園情報のフィーチャ レイヤーにレインボー カラーの JSON 定義を設定し、保育園の密度をヒート マップで表現するという処理を行うものです。
定義した JSON を 'rainbowheatmap' の変数へ設定します。
<SPAN class="keyword token">public</SPAN> MapView mMapView<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">public</SPAN> ArcGISMap mArcGISMap<SPAN class="punctuation token">;</SPAN>
@Override
<SPAN class="keyword token">protected</SPAN> <SPAN class="keyword token">void</SPAN> <SPAN class="token function">onCreate</SPAN><SPAN class="punctuation token">(</SPAN>Bundle savedInstanceState<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">super</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">onCreate</SPAN><SPAN class="punctuation token">(</SPAN>savedInstanceState<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="token function">setContentView</SPAN><SPAN class="punctuation token">(</SPAN>R<SPAN class="punctuation token">.</SPAN>layout<SPAN class="punctuation token">.</SPAN>activity_main<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// フィーチャレイヤーをレンダラークラスを使用してヒート マップを表示する</SPAN>
mMapView <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">(</SPAN>MapView<SPAN class="punctuation token">)</SPAN> <SPAN class="token function">findViewById</SPAN><SPAN class="punctuation token">(</SPAN>R<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">.</SPAN>mapView<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
mArcGISMap <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ArcGISMap</SPAN><SPAN class="punctuation token">(</SPAN>Basemap<SPAN class="punctuation token">.</SPAN>Type<SPAN class="punctuation token">.</SPAN>TOPOGRAPHIC<SPAN class="punctuation token">,</SPAN> <SPAN class="number token">35.658581</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">139.745433</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">15</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
mMapView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setMap</SPAN><SPAN class="punctuation token">(</SPAN>mArcGISMap<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// 表示したいフィーチャ レイヤーを呼び出す</SPAN>
FeatureTable featureTable <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ServiceFeatureTable</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fservices.arcgis.com%2FwlVTGRSYTzAbjjiC%2Farcgis%2Frest%2Fservices%2FFujisawa_escape%2FFeatureServer%2F0" target="_blank">https://services.arcgis.com/wlVTGRSYTzAbjjiC/arcgis/rest/services/Fujisawa_escape/FeatureServer/0</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
FeatureLayer featureLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN>featureTable<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// ヒート マップでレンダリングするための定義をjsonから作成する</SPAN>
String rainbowheatmap <SPAN class="operator token">=</SPAN> <SPAN class="string token">"定義したjsonデータ"</SPAN><SPAN class="punctuation token">;</SPAN>
Renderer heatRend <SPAN class="operator token">=</SPAN> Renderer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">fromJson</SPAN><SPAN class="punctuation token">(</SPAN>rainbowheatmap<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// 作成したヒート マップの定義をフィーチャ レイヤーに追加する</SPAN>
featureLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setRenderer</SPAN><SPAN class="punctuation token">(</SPAN>heatRend<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
mArcGISMap<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getOperationalLayers</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>featureLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>こちらが、レインボー カラーの JSON 定義を使用して東京都 23 区内の保育園の密度を表示したアプリの画面です。
マップのズーム イン/ズーム アウトの動きに合わせて保育園の位置情報の密度を再計算し、その結果に従って JSON で定義した配色で表示しています。
サンプルコードは ESRIジャパン GitHub で公開しています。
おまけ：ArcGIS Online で作成したヒートマップをマップ ID で表示する
ヒート マップを使用した Web マップを作成すれば、そのマップ ID を取得して下記のコードに埋め込むだけで、アプリからヒートマップを表示できます。このサンプルコードは ArcGIS Runtime SDK for Android 用の物ですが、他の ArcGIS Runtime SDK でも同じようにヒート マップを表示することが可能です。次のコードは MainActivity クラスでマップ ID を設定して地図を表示する方法を示しています。
<SPAN class="keyword token">public</SPAN> MapView mMapView<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">public</SPAN> ArcGISMap mArcGISMap<SPAN class="punctuation token">;</SPAN>
@Override
<SPAN class="keyword token">protected</SPAN> <SPAN class="keyword token">void</SPAN> <SPAN class="token function">onCreate</SPAN><SPAN class="punctuation token">(</SPAN>Bundle savedInstanceState<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">super</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">onCreate</SPAN><SPAN class="punctuation token">(</SPAN>savedInstanceState<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="token function">setContentView</SPAN><SPAN class="punctuation token">(</SPAN>R<SPAN class="punctuation token">.</SPAN>layout<SPAN class="punctuation token">.</SPAN>activity_main<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// マップ ID からヒート マップを表示する</SPAN>
mMapView <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">(</SPAN>MapView<SPAN class="punctuation token">)</SPAN> <SPAN class="token function">findViewById</SPAN><SPAN class="punctuation token">(</SPAN>R<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">.</SPAN>mapView<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// マップ ID を設定して、ArcGISMapオブジェクトを作成する</SPAN>
mArcGISMap <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ArcGISMap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fwww.arcgis.com%2Fhome%2Fitem.html%3Fid%3D" target="_blank">http://www.arcgis.com/home/item.html?id=</A><SPAN>"</SPAN></SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">"マップ ID "</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
mMapView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setMap</SPAN><SPAN class="punctuation token">(</SPAN>mArcGISMap<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>このように、ArcGIS Online に作成したヒート マップを呼び出すことができます。
関連リンク集
ArcGIS 関連ページ
・ArcGIS for Developers
・ArcGIS for Developers 開発リソース集
・ArcGIS Online
・ArcGIS Open Data
