ここ数年で「データ ビジュアライゼーション」という言葉をよく耳にするようになりました。日本では「データの見える化」という言葉で表現されることもありますが、ただ見えるだけではなく、データに意味を持たせて表現する行為や手法、ツールに対して「データ ビジュアライゼーション」という言葉が使われることが多くなっています。
それに呼応するように ArcGIS API for JavaScript には、容易かつ高度にデータを Web ブラウザ上にグラフィックとして描画・表現するための豊富な機能が追加されてきました。これにより、数行のコードを書くだけでマップ上に効果的なデータ ビジュアライゼーションを実現することができます。
本記事を皮切りに、シリーズとして ArcGIS API for JavaScript を使ったデータ ビジュアライゼーションの手法とそれを実現する機能についてご紹介していきます。本記事では、その準備段階として必要なデータ作成とベースとなるアプリケーションについてご紹介します。
準備１：ArcGIS for Developers アカウントの作成
まず ArcGIS API for JavaScript でデータ ビジュアライゼーションを実現するためには、Web ブラウザ上にマップを作成し、データをマップ上で視覚化する必要があります。
本ブログ シリーズでは、アカウントさえ作成すれば誰でも地理的なデータを Web 上に配信することができる ArcGIS Online 開発者向けプラン（ArcGIS for Developers）のサービスを活用していきます。これにより、ArcGIS の API を使ってインターネット経由で地理的なデータを取得・利用することができます。
ArcGIS Online 開発者向けプランには無償と有償のプランがありますが、開発目的であれば無償でも様々な機能が利用できます。開発者アカウントは誰でも作成することができます。まずは ArcGIS for Developers Web サイトにアクセスしてみてください。アカウントの作成方法についてはこちらのページより「ArcGIS for Developers 開発者アカウント作成ガイド」をご参照ください。
準備２：フィーチャ サービスの配信
ArcGIS for Developers でアカウントが作成できたら、フィーチャ サービスの配信を行います。フィーチャ サービスとは、ArcGIS API で作成した GIS アプリケーションが地理的なデータを Web 経由で受信して利用するための Web サービスのうちの一つであり、ArcGIS API for JavaScript でデータ ビジュアライゼーションを行う対象となるものです。
ArcGIS for Developers のユーザであれば、GIS データを配信するための Web サーバをお持ちでなくてもフィーチャ サービスを作成することができます。フィーチャ サービスの配信方法についてはこちらのページより「ArcGIS for Developers フィーチャ サービス作成ガイド」をご参照ください。
準備３：マップ上にデータを表示（サンプル アプリを閲覧）
配信が完了したら、フィーチャ サービスのページにて、[Map View] タブを開き、マップの下に表示されている URL をコピーします。ArcGIS API for JavaScript ではこの URL を使って、フィーチャ サービスが配信するデータを利用します。
以下のコードでは、フィーチャ サービスの URL を参照するフィーチャ レイヤを作成して、そのレイヤをマップに追加しています。たったこれだけのコードによって、ArcGIS for Developers で作成したデータをマップ上に表示することができます。
——————————————————————————————–
var layer = new FeatureLayer(“http://services3.arcgis.com/iH4Iz7CEdh5xTJYb /arcgis/rest/services/Nagareyama_shi_Shisetsu_All/FeatureServer/0”);
map.addLayer(layer);
——————————————————————————————–
上記のサンプル アプリでは自由にコードを書き換えてアプリケーションを実行できるので、フィーチャ レイヤに記述した URL をご自身が配信しているフィーチャ サービスの URL に書き換えて実行してみてください。
準備 4：シンプル レンダラを使ってデータの見栄えをデザイン（サンプル アプリを閲覧）
レンダラとは、フィーチャ レイヤをマップ上にどのように描画・表現するかを定義するための機能です。レンダラを作成しなくても、フィーチャ サービス作成時に設定したシンボルをマップ上に表示することができます。しかし、データをどのように見せたいのか、マップを作成する目的に応じた表現を行うにはこれでは限界があります。レンダラを使うことで、データに応じた高度な表現が可能になります。
たとえば、公園のデータを持っている場合、以下のような疑問に応じてデータの表現を行うことが考えられます。
・どこに公園が存在するのか？
・各公園の種別は何なのか？
・各公園にはどのくらいの来訪者がいるのか？
本稿で紹介するシンプル レンダラ（esri/renderers/SimpleRenderer）は、上記の「どこ」を表現するのに適しています。どこに公園が存在するのかはマップ上に地点としてそのまま表現されるので、シンボルの色を分けるなどの表現は不要です。
シンプル レンダラでは一つのシンボル情報のみを扱うので、以下のようにフィーチャ レイヤで表示したいシンボルを １ つ作成します。今回は公園の位置を示すため、公園のアイコン画像を使ったシンボルを作成しますが、シンプルな円形や四角、菱形などの形状のシンボルなども作成できます。
——————————————————————————————–
var symbol = new PictureMarkerSymbol(“icon.png”, 25, 30);
——————————————————————————————–
シンボルを作成したら、シンプル レンダラにそのシンボル情報を設定して、フィーチャ レイヤにレンダラを適用します。
——————————————————————————————–
var renderer = new SimpleRenderer(symbol);
layer.setRenderer(renderer);
——————————————————————————————–
これで、設定したシンボルでフィーチャ レイヤを表示することができます。実際の見栄えはサンプル アプリをご確認ください。
以上、ArcGIS API for JavaScript を使ってマップ上にデータ ビジュアライゼーションを実現するために必要な行程をご紹介してきました。本稿では単一のシンボルによる表現にとどまりましたが、次回はデータの属性値によってデザインを変化させる「個別値分類編」をご紹介する予定ですので、ぜひご期待ください。
■関連リンク
ESRIジャパン Web サイト：
・ArcGIS Online 開発者向けプラン：http://www.esrij.com/products/arcgis-online-for-developers/
・ArcGIS API for JavaScript：http://www.esrij.com/products/arcgis-api-for-javascript/
Esri 社（米国）Web サイト：
・ArcGIS for Developers：https://developers.arcgis.com/
・ArcGIS API for JavaScript：https://developers.arcgis.com/en/javascript/