Web アプリケーションで背景地図のカラーを動的に変更する方法

以前の記事「すごい! ArcGIS Online ベースマップをグレースケールにできる」で ArcGIS for Desktop で背景地図のカラーをカスタマイズする方法をご紹介しました。その中で説明しているように、背景地図のカラーを変えることでその上に表示する主題図を見やすくすることができます。これを Web アプリケーションで実現させるにはどのような方法があるでしょうか?

もちろん、ArcGIS for Server を使って背景地図を配信して利用すれば、ArcGIS for Desktop での設定と同じカラーで Web アプリケーション上に表示できます。しかし Web アプリケーション上で動的にカラーを変更したい場合は、この方法が使えません。

ここでは、クライアント側で ArcGIS Online のベースマップのカラーを変更する方法として、Flex や Silverlight を使ったサンプルをご紹介します。
01

Flex や Silverlight には、ピクセル単位でカラーや透過(透明度)を変換する仕組みがあるので、様々な視覚的な効果を与えることができます。


オンラインでサンプル アプリケーションが公開されていますので実際に見てみましょう。
まずは Flex から。

初期表示は ArcGIS Online のベースマップ(道路地図)が Gray(グレー)で表示されています。かなり暗めのグレーですね。
02

画面下の [Presets:] というプルダウンから設定済みのカラー パターンを見ることができます。下図は Desaturated(低彩度)を選択した場合です。
03

次は Midnight Blue(ミッドナイトブルー)の場合です。
04

画面下の設定用のスライダーで様々なカラーに変更できるので色々試してみてください。

次に Silverlight のサンプルを見てみましょう。

こちらも画面下に設定可能なオプションがたくさんあります。下図は [Gray](グレー)を選択した場合です。同じグレーでも Flex 版のサンプルに比べて明るいグレーですね。
05

一番右の [Tint] をクリックすると自由にカラーを選んで設定できます。
06

その他にも色々なパターンがあるので試してみてください。下図は [Movie] を選択した時のキャプチャです。ここまでくると、もはや趣味の世界でしょうか。
07

最後は実用性からは離れてしまったかもしれませんが、Flex や Silverlight の可能性を感じていただければ幸いです。
今回ご紹介したアプリケーションのサンプルコードはそれぞれ以下の方法でダウンロード可能です。

【Flex 版】 下記 URL のアプリケーション左上の [View Source] ボタンをクリックするとソースコードが参照できる画面に遷移します。左下の [Download source] リンクをクリックするとソースコードをダウンロードできます。
Color Filter for Tiled Map Service

【Silverlight 版】 下記ページの下の方、コード アタッチメントにある [ダウンロード] リンクをクリックします。
Map Shader Effects

■注意事項
今回ご紹介したサンプル アプリケーションとそのソースコードは、米国 Esri 社よりサンプルとして提供されているものですのでサポート対象外となります。従って、サンプルプログラムに関するご質問はお受けできません。
また、本サンプルを使用して生じたいかなる損害についても、弊社では責任を負いかねますことを予めご了承願います。

■関連リンク
ESRIジャパン Web サイト
ArcGIS API for Flex
ArcGIS API for Silverlight

Esri 社 Web サイト
ArcGIS API for Flex
ArcGIS API for Silverlight

~ESRIジャパン ブログの Twitter アカウントのフォローもお願いします~
https://twitter.com/EsriJapanBlog