Community
Select to view content in your preferred language

JavaScript で始めるデータ ビジュアライゼーション -準備編-

1588
0
03-16-2015 06:56 PM
Labels (1)
Labels:

JavaScript で始めるデータ ビジュアライゼーション -準備編-

ここ数年で「データ ビジュアライゼーション」という言葉をよく耳にするようになりました。日本では「データの見える化」という言葉で表現されることもありますが、ただ見えるだけではなく、データに意味を持たせて表現する行為や手法、ツールに対して「データ ビジュアライゼーション」という言葉が使われることが多くなっています。

それに呼応するように ArcGIS API for JavaScript には、容易かつ高度にデータを Web ブラウザ上にグラフィックとして描画・表現するための豊富な機能が追加されてきました。これにより、数行のコードを書くだけでマップ上に効果的なデータ ビジュアライゼーションを実現することができます。

本記事を皮切りに、シリーズとして ArcGIS API for JavaScript を使ったデータ ビジュアライゼーションの手法とそれを実現する機能についてご紹介していきます。本記事では、その準備段階として必要なデータ作成とベースとなるアプリケーションについてご紹介します。

00_vectormapping.png

準備１：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 開発者アカウント作成ガイド」をご参照ください。

Photo

準備２：フィーチャ サービスの配信

ArcGIS for Developers でアカウントが作成できたら、フィーチャ サービスの配信を行います。フィーチャ サービスとは、ArcGIS API で作成した GIS アプリケーションが地理的なデータを Web 経由で受信して利用するための Web サービスのうちの一つであり、ArcGIS API for JavaScript でデータ ビジュアライゼーションを行う対象となるものです。

ArcGIS for Developers のユーザーであれば、GIS データを配信するための Web サーバーをお持ちでなくてもフィーチャ サービスを作成することができます。フィーチャ サービスの配信方法についてはこちらのページより「ArcGIS for Developers フィーチャ サービス作成ガイド」をご参照ください。

Photo

準備３：マップ上にデータを表示（サンプル アプリを閲覧）

配信が完了したら、フィーチャ サービスのページにて、[Map View] タブを開き、マップの下に表示されている URL をコピーします。ArcGIS API for JavaScript ではこの URL を使って、フィーチャ サービスが配信するデータを利用します。

Photo

以下のコードでは、フィーチャ サービスの 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 に書き換えて実行してみてください。

Photo

準備 4：シンプル レンダラーを使ってデータの見栄えをデザイン（サンプル アプリを閲覧）

レンダラーとは、フィーチャ レイヤーをマップ上にどのように描画・表現するかを定義するための機能です。レンダラーを作成しなくても、フィーチャ サービス作成時に設定したシンボルをマップ上に表示することができます。しかし、データをどのように見せたいのか、マップを作成する目的に応じた表現を行うにはこれでは限界があります。レンダラーを使うことで、データに応じた高度な表現が可能になります。

たとえば、公園のデータを持っている場合、以下のような疑問に応じてデータの表現を行うことが考えられます。

  • どこに公園が存在するのか？
  • 各公園の種別は何なのか？
  • 各公園にはどのくらいの来訪者がいるのか？

本稿で紹介するシンプル レンダラー（esri/renderers/SimpleRenderer）は、上記の「どこ」を表現するのに適しています。どこに公園が存在するのかはマップ上に地点としてそのまま表現されるので、シンボルの色を分けるなどの表現は不要です。

シンプル レンダラーでは一つのシンボル情報のみを扱うので、以下のようにフィーチャ レイヤーで表示したいシンボルを １ つ作成します。今回は公園の位置を示すため、公園のアイコン画像を使ったシンボルを作成しますが、シンプルな円形や四角、菱形などの形状のシンボルなども作成できます。

var symbol = new PictureMarkerSymbol("icon.png", 25, 30);

シンボルを作成したら、シンプル レンダラーにそのシンボル情報を設定して、フィーチャ レイヤーにレンダラーを適用します。

var renderer = new SimpleRenderer(symbol);
layer.setRenderer(renderer);

これで、設定したシンボルでフィーチャ レイヤーを表示することができます。実際の見栄えはサンプル アプリをご確認ください。

Photo

以上、ArcGIS API for JavaScript を使ってマップ上にデータ ビジュアライゼーションを実現するために必要な行程をご紹介してきました。本稿では単一のシンボルによる表現にとどまりましたが、次回はデータの属性値によってデザインを変化させる「個別値分類編」をご紹介する予定ですので、ぜひご期待ください。

■関連リンク

GitHub：

ESRIジャパン Web サイト：

Esri 社（米国）Web サイト：

Labels (1)
Labels:
0 Kudos
Version history
Last update:
‎12-12-2021 03:39 AM
Updated by: