ソフトウェア開発プロジェクトのための共有ウェブ サービスである GitHub（英語ページ）に Esri が公開しているオープンソースへのリンクを集約した Esri GitHub（英語ページ）が公開されています。今回は、こちらのページで公開されているソースコードを使って独自のアプリケーションを作ってみました。
今回使用するオープンソースは ArcGIS API for JavaScript 向けに公開されている heatmap-layer-js（英語ページ）です。こちらは HTML5 の Canvas という機能を利用して、プラグインなしのブラウザ上でポイントの密度をグラフィカルなヒートマップとして描画するためのプラグインである Heatmap.js を利用しています。Heatmap.js によって表現されるヒートマップを ArcGIS API for JavaScript によって、一つのレイヤとして扱い、任意のポイントを持つフィーチャ レイヤの位置情報を利用して、その分布をヒートマップとして表現します。
なお、Canvas をサポートしているブラウザは、Firefox 16 以上、Google Chrome 23 以上、Internet Explorer 9 以上、Safari 5.1 以上となっております。
■heatmap-layer-js
下の画像は、heatmap-layer-js アプリケーションの画面です。
このアプリケーションは、サンフランシスコの植木のポイントをフィーチャ レイヤとして参照しています。デフォルトでは植木のレイヤは非表示になっており、その植木のポイントをもとにしたヒートマップ レイヤのみが表示されている状態となります。ヒートマップもレイヤとして扱うことができるため、右に配置されている黒のボタンをクリックすることで、植木、ヒートマップのレイヤの表示/非表示を切り替えることができます。また、一番下のボタンの LocalMax は、ON の場合に表示範囲内に存在するフィーチャのみを使用し、OFF の場合にはすべてのフィーチャを使用してヒートマップを描画します。
Heatmap-layer-js では、ArcGIS API for JavaScript の DynamicMapServiceLayer クラスを拡張し、HeatmapLayer というカスタムのレイヤ クラスを作成しています。
■独自のサービスを追加
今回は、この heatmap-layer-js のソースコードを GitHub からダウンロードし、独自のサービスを使用したフィーチャ レイヤをアプリケーションに追加する方法についてご紹介します。
① マップ サービスの公開
まず、日本全国の都市公園のポイント フィーチャを ArcGIS for Server でマップ サービスとして公開します。
下の画像では、日本全国の都市公園のポイント フィーチャをマップ サービスとして公開後に、ArcGIS Server Manager という ArcGIS for Server の管理画面でサービスを表示しています。こちらの park というサービスをフィーチャ レイヤとして扱うために heatmap-layer-js のコードを書き換えます。
② 公開したサービスの追加
GitHub からダウンロードした「heatmap-layer-js-master」というフォルダを開き、フォルダ内にある「index.html」ファイルをテキスト エディタで開きます。今回は Aptana Studio（英語ページ）という無償の JavaScript 開発環境を使用しています。ArcGIS API for JavaScript の開発環境についての詳細は製品ページをご参照ください。
下の画像のように、「index.html」のコードから “// create feature layer to get the points from” というコメントを探し、その下にある FeatureLayer に指定するサービスの URL を都市公園のものに書き換えます。
その他、マップの初期表示の設定や、ブックマークのためのボタン等の機能を追加していますが、実装方法については、今回は割愛させていただきます。それぞれ ArcGIS API for JavaScript を使用して実現しています。詳細については、ArcGIS API for JavaScript のヘルプ（英語ページ）をご覧ください。
③ アプリケーションの実行
独自のサービスと機能を追加した「index.html」ファイルを Web ブラウザで実行してみます。「heatmap-layer-js-master」を IIS のルート フォルダ C:\inetpubwwwroot 直下に配置し、ブラウザに URL を入力して実行します。下の画像が、独自に作成したアプリケーションの画面です。ヒートマップが濃い緑色の地域は公園が多く存在している地域となります。
今回作成したアプリケーションでは、ヒートマップの色の設定変更や、ボタンの色の変更等、UI にも少し手を加えてみました。
このように ArcGIS API for JavaScript を使えば、ソースコードを使用して容易に独自の Web アプリケーションを作成することができます。ぜひ、Esri GitHub に公開されているソースコードをダウンロードして、独自のアプリケーションを作成したり、お手持ちのアプリケーションに機能を追加したりしてみてください。
■関連リンク
ESRIジャパン Web サイト：
・ArcGIS for Server
・ArcGIS API for JavaScript
Esri 社（米国）Web サイト：
・ArcGIS for Server
・ArcGIS API for JavaScript
ArcGIS Resources：
・Heat Up Your Webmaps（Blog）
Esri GitHub：
・Esri GitHub