地図アプリでヒート マップの配色をカスタマイズしてみよう

Document created by wakana_satoesrij-esridist Employee on Oct 12, 2017Last modified by masanobu_hiranoesrij-esridist on Oct 12, 2017
Version 7Show Document
  • View in full screen mode

「ヒート マップ」とは、ポイントが集まっている密度が濃い場所と低い場所をグラデーションで表現し、状況を視覚的かつ効果的に伝えることができる可視化方法です。

 

 

ArcGISでは ArcGIS Online / ArcGIS Enterprise で配信されるデータをもとにマップ ビューアーで作成したヒート マップを、ArcGIS の開発者製品を使ってデスクトップまたはモバイル アプリから表示することができます。

マップ ビューアーに定義済みの配色で表現することもできますし、カスタム アプリで自分好みに配色を設定することもできます。

上図のようなレインボー カラーは標準で選択できる配色としては存在しないので、今回は ArcGIS Runtime SDK for Android を使ってヒート マップをレインボー カラーで表現する方法をご紹介します。

 

レインボー カラーのヒート マップ作成のための準備と作成方法

 

  1. 今回ご紹介する手順では、ArcGIS Online の開発者アカウントを使用して、ヒート マップとして表示するデータを ArcGIS Online 上に作成します。まだアカウントをお持ちでない方は、ArcGIS for Developers のサイトより無償アカウントを作成してご利用いただけます。作成方法はESRIジャパン開発リソース集の「アカウントの作成をご覧ください。
  2. ヒート マップで表示したいポイントのフィーチャ レイヤーを準備する

    今回は、ArcGIS Open Data より東京23区の保育園の位置情報データを使用して、保育園の密度を表示します。リンク先からデータを取得してフィーチャ レイヤーとしてArcGIS Online へホストします。

    方法はCSV ファイルの公開をご覧ください。

 

レインボー カラーで表現するための JSON を作成する

 

配色を指定するための JSON の定義は、作成したフィーチャ レイヤーの詳細画面から取得することができます。

下図の左側の画面は ArcGIS Online でヒート マップを表現するように設定した、フィーチャ レイヤーの詳細画面です。フィーチャ レイヤーの詳細画面から[サービスの URL ]を選択して、”Drawing Info” の部分を使用します。この部分は、このフィーチャ レイヤーに含まれるフィーチャをどのように地図上に表現するかということを定義しています。

 

 

下図は “Drawing Info” から必要な箇所を取り出して、レインボー カラーの 7 色を RGB で指定した JSON です。

 

{"type":"heatmap",
"blurRadius":22.4468085106383,
"colorStops":[
{"ratio":0,"color":[133,193,200,0]},
{"ratio":0.01,"color":[255,0,0,255]}, // 赤
{"ratio":0.09249999999999999,"color":[255,165,0,255]}, // オレンジ
{"ratio":0.175,"color":[255,255,0,255]}, //黄色
{"ratio":0.2575,"color":[0,128,0,255]}, // 緑
{"ratio":0.33999999999999997,"color":[0,255,255,255]}, // 水色
{"ratio":0.42250000000000004,"color":[0,0,255,255]}, // 青
{"ratio":0.505,"color":[128,0,128,255]}, //紫
{"ratio":1,"color":[255,255,0,255]} //赤
],
"maxPixelIntensity":1466.0194349589192,"minPixelIntensity":0}

 

この JSON を ArcGIS Runtime SDK の Renderer クラスに指定すると、ヒート マップ レンダラーが作成されます。

”ratio” の要素で、構成する色の比率と色を指定しています。先の手順で取り出した JSON ではもう少し色が多く定義されていましたが、レインボー カラーに合わせて減らしました。

 

ここで定義している要素について説明します。

要素説明
Typeレンダラーの種類
blurRadiusヒート マップで表示するポイントの半径を定義します。
maxPixelIntensity表示する密度の最大値を定義します。最大値以上の密度は同じ色で表現されます。
minPixelIntensity表示する密度の最小値を定義します。最小値以下の密度は同じ色で表現されます。
colorStops:ratio

表示する色の比率と、色を定義します。比率は01の間で指定します。

「“ratio”:0」と「“ratio”:1」の定義は、マップがズーム イン/ズーム アウトを行う上で必ず必要な値となります。

 

カスタム カラーでレンダリングして表示する

 

さて、いよいよ作成した レインボー カラーの JSON 定義を使用して、フィーチャ レイヤーを表示してみます。

次のサンプル コードは、ArcGIS Online でホストした東京 23 区の保育園情報のフィーチャ レイヤーにレインボー カラーの JSON 定義を設定し、保育園の密度をヒート マップで表現するという処理を行うものです。

定義した JSON を  'rainbowheatmap' の変数へ設定します。

 

public MapView mMapView;
public ArcGISMap mArcGISMap;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // フィーチャレイヤーをレンダラークラスを使用してヒート マップを表示する
    mMapView = (MapView) findViewById(R.id.mapView);
    mArcGISMap = new ArcGISMap(Basemap.Type.TOPOGRAPHIC, 35.658581, 139.745433, 15);
    mMapView.setMap(mArcGISMap);
   
    // 表示したいフィーチャ レイヤーを呼び出す
    FeatureTable featureTable = new ServiceFeatureTable("https://services.arcgis.com/wlVTGRSYTzAbjjiC/arcgis/rest/services/Fujisawa_escape/FeatureServer/0");
    FeatureLayer featureLayer = new FeatureLayer(featureTable);

    // ヒート マップでレンダリングするための定義をjsonから作成する
    String rainbowheatmap = "定義したjsonデータ";
    Renderer heatRend = Renderer.fromJson(rainbowheatmap);

    // 作成したヒート マップの定義をフィーチャ レイヤーに追加する
    featureLayer.setRenderer(heatRend);
    mArcGISMap.getOperationalLayers().add(featureLayer);

}

 

こちらが、レインボー カラーの JSON 定義を使用して東京都 23 区内の保育園の密度を表示したアプリの画面です。

マップのズーム イン/ズーム アウトの動きに合わせて保育園の位置情報の密度を再計算し、その結果に従って JSON で定義した配色で表示しています。

 

 

サンプルコードは ESRIジャパン GitHub で公開しています。

 

おまけ:ArcGIS Online で作成したヒートマップをマップ ID で表示する

ヒート マップを使用した Web マップを作成すれば、そのマップ ID を取得して下記のコードに埋め込むだけで、アプリからヒートマップを表示できます。このサンプルコードは ArcGIS Runtime SDK for Android 用の物ですが、他の ArcGIS Runtime SDK でも同じようにヒート マップを表示することが可能です。次のコードは MainActivity クラスでマップ ID を設定して地図を表示する方法を示しています。

 

public MapView mMapView;
public ArcGISMap mArcGISMap;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // マップ ID からヒート マップを表示する
    mMapView = (MapView) findViewById(R.id.mapView);
    // マップ ID を設定して、ArcGISMapオブジェクトを作成する
    mArcGISMap = new ArcGISMap("http://www.arcgis.com/home/item.html?id=" + "マップ ID ");
    mMapView.setMap(mArcGISMap);
}

 

このように、ArcGIS Online に作成したヒート マップを呼び出すことができます。

 

 

関連リンク集

ArcGIS 関連ページ

ArcGIS for Developers

ArcGIS for Developers 開発リソース集

ArcGIS Online

ArcGIS Open Data

1 person found this helpful

Attachments

    Outcomes