41 データバインドされた地理マップ・コンポーネントおよびテーマ・マップ・コンポーネントの作成
map
およびthematicMap
を使用して、ビジネス・データを視覚的に表現する地理マップまたはテーマ・マップを作成する方法について説明します。ここでは、ADFデータ・コントロールを使用して、これらのコンポーネントをデータ優先開発で作成する方法について説明します。簡単なUI優先開発を使用してページを設計する場合は、地理マップまたはテーマ・マップをページに追加してから、データ・バインディングを構成してください。マップ・コンポーネントのデータ要件、タグ構造、および外観と動作をカスタマイズするためのオプションの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「マップ・コンポーネントの使用方法」の章を参照してください。
この章の内容は次のとおりです。
ADFデータ視覚化マップ・コンポーネントについて
DVT地理マップおよびテーマ・マップ・コンポーネントにより、ユーザーはビジネス・データをマップに表示できます。これは、関心のあるリージョンのパターン、傾向および比較データを表すのに便利です。
ADFデータ視覚化コンポーネントは、ビジネス・データを視覚的に表示、分析するための幅広いグラフィック機能と表機能を提供します。コンポーネントをレンダリングできるようにするには、これらのコンポーネントをそれぞれ、データにバインドする必要があります。コンポーネントの外観は表示されるデータによって変わるからです。
地理マップ・コンポーネントはビジネス・データを空間的に表現し、1つのマップ上に複数層(テーマとも呼ばれる)の情報を重ね合せられるようにします。たとえば、アメリカ合衆国のマップでは、色の明度を変えて各州における商品の人気を示すカラー・テーマ、商品カテゴリ内での売上を示す円グラフ・テーマ、各倉庫の正確な場所を識別する点テーマなどを使用できます。この3つの全テーマをアメリカ合衆国の地図に重ね合せると、特定の地域で商品の人気度に応じた十分な在庫があるかどうかを簡単に評価できます。地理マップでは、Oracle MapViewerサービスへの接続が必要です。また、オプションで地理的および政治的な詳細情報を表示するためのジオコーダ・サービスにも接続できます。
テーマ・マップ・コンポーネントでは、ビジネス・データをスタイル設定されたエリア内にパターンまたは関連付けられたマーカーとして表し、Oracle MapViewerサービスへの接続は必要ありません。テーマ・マップでは、地理マップでの地理的な詳細なしで、データに焦点を合せます。テーマ・マップは、米国、世界をはじめ、世界の大陸や地域(EMEAやAPACなど)などのあらかじめ作成されたベース・マップとともにパッケージ化されています。それぞれのベース・マップには、いくつかのリージョンのセットと、都市の固定セットが1つ含まれます。リージョンまたは都市の1つのセットはレイヤーと呼ばれます。各レイヤーは、データ・コレクションにバインドし、データを色やパターンの塗りつぶし、またはデータ・マーカー、あるいはその両方で表すためにスタイルを設定できます。実行時には、テーマ・マップでドリルが有効になっていないかぎり、一度に表示できるのは1つのマップ・レイヤーとその関連するデータのみです。
接頭辞dvt:
は、各データ視覚化コンポーネント名の先頭に付いて、そのコンポーネントがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。
ユース・ケースとサンプル
各データ視覚化のユースケースと例の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のマップ・コンポーネントのユースケースおよび例に関する項を参照してください。
エンド・ユーザー機能およびプレゼンテーション機能
魅力的な外観を備えたデータ視覚化コンポーネントを使用すると、エンド・ユーザーは複雑なビジネス・データを理解して分析できるようになります。このコンポーネントは機能が豊富で、そのまますぐに使用できる対話型のサポートも用意されています。各コンポーネントのエンド・ユーザー機能とプレゼンテーション機能の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のマップのエンド・ユーザー機能およびプレゼンテーション機能に関する項を参照してください。
データ視覚化コンポーネントの追加機能
データ視覚化コンポーネントをデータ・バインドする前に、その他のOracle ADF機能について理解しておいてください。また、いったんデータ視覚化コンポーネントをページに追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。データ視覚化コンポーネントで使用されるその他の機能へのリンクは、次のとおりです。
-
部分ページ・レンダリング: データ視覚化コンポーネントをリフレッシュして、ページの別のコンポーネントで実行されたアクションに基づく新しいデータを表示できます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「部分ページ・コンテンツの再レンダリング」の章を参照してください。
-
パーソナライズ: ユーザーは実行時にデータ視覚化コンポーネントの表示を変更できますが、ユーザーがカスタマイズできるようにアプリケーションを構成していないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「JSFページでのユーザー・カスタマイズの許可」の章を参照してください。
-
アクセシビリティ: データ視覚化コンポーネントは、デフォルトでアクセス可能です。アプリケーションの各ページは、スクリーン・リーダーでのアクセスが可能になるように構成できます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「アクセス可能なADF Facesページの開発」の章を参照してください。
-
スキンおよびスタイル: アプリケーションに適用するADFスキンを使用するか、スタイル関連のプロパティ(
styleClass
またはinlineStyle
)を使用してCSSスタイル・プロパティを直接適用することで、データ視覚化コンポーネントの外観をカスタマイズできます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「スタイルおよびスキンを使用した外観のカスタマイズ」の章を参照してください。 -
プレースホルダ・データ・コントロール: 最終的にページのデータ視覚化コンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールの使用を検討します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、「プレースホルダ・データ・コントロールによるページの設計」を参照してください。
データバインドされた地理マップの作成
地理マップは、Oracle Spatialの機能をOracle ADF内で提供するADFデータ視覚化コンポーネントです。このコンポーネントでは、ユーザーはビジネス・データを地理マップ上に表し、1つのマップ上に複数層の情報(テーマと呼ばれる)を重ね合せることができます。
これらのレイヤーは、棒グラフ、円グラフ、カラー、点および事前定義済テーマといった任意のテーマとして表すことができます。
図41-1は、アメリカ合衆国内のある地域のベース・マップとともに次のテーマを使用した地理マップ・コンポーネントを示しています。
-
カラー・テーマ: このテーマでは、選択した商品について、商品の人気に基づいて州を色付けします。色の範囲は緑(その商品の人気が最高であることを表す)から赤(その商品の人気が最低であることを表す)までです。
-
円グラフ・テーマ: このテーマでは、各州で人気のある商品カテゴリを示す円グラフをその州に表示します。この例の円グラフでは、Media、OfficeおよびElectronicsという3つの商品カテゴリを円グラフの区分として示しています。
-
点テーマ: このテーマでは、倉庫を点として識別します。各点に対し、選択した商品のその倉庫での在庫レベルを示すアイコンが表示されます。表示されるアイコンは、在庫レベルが低、中、高といった各在庫範囲で異なります。
図41-1 色テーマ、円グラフ・テーマおよび点テーマを使用した地理マップ
地理マップ・コンポーネントは、複数のデータ・セットを表示するために、複数のマップを1ページ上に配置する必要がないという点が、他のADFデータ視覚化コンポーネントとは異なります。このコンポーネントは、複数のグラフを1ページ上に配置できるグラフなどのコンポーネントとは対照的です。かわりに、複数のデータセットの空間的な相互関係を示すか、特定の点に対して別々のテーマでレイヤー化された異なる属性を表示します。
地理マップ・コンポーネント自体はデータにバインドされません。しかし、各マップのテーマは独自のデータバインディングを持っています。
ベース・マップは、開発者が作成したテーマをADF地図コンポーネントでレイヤー化する背景となります。
Oracle Spatialでは、管理者は1つ以上のテーマで構成されるベース・マップを作成します。管理者は、ベース・マップのテーマの可視性を制御します。ベース・マップを拡大および縮小すると、ベース・マップの様々なテーマが表示/非表示になります。ADF地図コンポーネントのレベルでは、管理者がベース・マップに作成したテーマの表示を、開発者がズーム係数を使用して制御することはできません。
複数のテーマをADF地図にオーバーレイする際は、そのテーマに関連するコンポーネントのmaxZoom
およびminZoom
プロパティを設定することでテーマの可視性を制御できます。実行時には、「マップ」ツールバーの表示メニューまたはページに作成した他のADFコンポーネントを使用してカスタム・テーマを表示/非表示にすることもできます。
データ・バインディング完了後の地理マップのカスタマイズの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「マップ・コンポーネントの使用方法」の章を参照してください。
地理ベース・マップの構成方法
地理マップを作成する場合は、最初にマップを構成してから、データ・コレクションに点、円グラフや棒グラフまたはマップの色テーマをバインドします。JDeveloperでは、作成するテーマに対して「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を行うことができます。
始める前に:
データバインドされた地理マップについて理解しておいてください。詳細は、「データバインドされた地理マップの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
-
「アプリケーション・モジュールの作成と変更」の説明に従い、ピボット・テーブルのデータ・モデルで必要になる、ビュー・オブジェクトのインスタンスが含まれているアプリケーション・モジュールを作成します。
たとえば、図41-1に示す製品在庫のピボット・テーブルのデータソースは、ADF DVTコンポーネントについてのSummitサンプル・アプリケーション用に作成したビュー・オブジェクトから取得しています。
-
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従って、JSFページを作成します。
地理ベース・マップを構成するには:
-
「データ・コントロール」パネルから、コレクションを選択します。
たとえば、世界中の各倉庫の製品インベントリ・レベルを表示する地理マップを作成する場合は、「データ・コントロール」パネルから
WorldProductInventory1
コレクションを選択します(図41-2を参照)。 -
JSFページにデータ・コレクションをドラッグし、ポップアップ・メニューから「地理マップ」→「マップおよび点のテーマ」、「マップおよび円グラフのテーマ」、「マップおよび色のテーマ」または「マップおよび棒グラフのテーマ」を選択します。
-
ページ上のマップを構成していない場合は、次に表示される「地理マップの作成」ダイアログで「新規」アイコンをクリックし、「地理マップ構成の作成」ダイアログを表示して、次の手順を実行します。
-
「ID」フィールドに、マップ構成の一意のIDを入力します。たとえば、
mapConfig1
などです。 -
「MapViewer URL」フィールドに、Oracle MapViewerサービスのURLを入力します。
ドロップダウン・リストを使用して既存の接続を選択するか、「追加」アイコンをクリックして新しい接続を構成します。「URL接続の作成」ダイアログで、URLエンドポイントのアドレスに
http://elocation.oracle.com/mapviewer
を使用し、「接続のテスト」をクリックして接続を確認します。図41-3に、必要事項を入力した「URL接続の作成」ダイアログを示します。 -
「ジオコーダURL」フィールドで、マップ作成用に住所を緯度と経度の座標に変換するGeocoder WebサービスのURLを入力します。
ノート:
ジオコーダのURLは、住所の経度および緯度情報をまだ持っていない場合のみ必要です。
ドロップダウン・リストを使用して既存の接続を選択するか、「追加」アイコンをクリックして新しい接続を構成します。「URL接続の作成」ダイアログで、URLエンドポイントのアドレスに
http://elocation.oracle.com/geocoder/gcserver
を使用し、「接続のテスト」をクリックして接続を確認します。図41-4に、必要事項を入力した「URL接続の作成」ダイアログを示します。 -
「OK」をクリックします。図41-5に、必要事項を入力した「地理マップ構成の作成」ダイアログを示します。
-
-
「OK」をクリックします。
-
「地理マップの作成」ダイアログで地理マップ・コンポーネントのベース・マップを選択し、次の手順を実行して、地理マップに使用するその他の設定を指定します。
-
データ・ソース・リストで、ベース・マップの選択元となるマップのコレクションを選択します。
-
「基準となるマップ」リストから、地理マップ・コンポーネントの背景となるマップを選択します。
-
「開始X」フィールドと「開始Y」フィールドの値を指定するには、マップのイメージをクリックしてマップを「プレビュー」ウィンドウ内の中央に配置します。
左上角のマップ・ナビゲータの矢印を使用すると、マップを適切な方向に移動できます。
-
オプションで、「プレビュー」ウィンドウのスライド矢印を使用して、地図のズーム係数を調整します。
-
「OK」をクリックします。図41-5に、必要事項を入力した「地理マップの作成」ダイアログを示します。
-
-
「テーマの作成」ダイアログを使用して、次に示すようにマップ・テーマをデータ・バインドします。
-
点テーマを作成して、ベース・マップ上のデータを表現します。詳細は、「点テーマを使用して地図を作成する方法」を参照してください。
-
色テーマを作成して、ベース・マップ上のデータを表現します。詳細は、「色テーマを使用して地理マップを作成する方法」を参照してください。
-
円グラフ・テーマまたは棒グラフ・テーマを作成して、ベース・マップ上のデータを表します。詳細は、「円グラフまたは棒グラフのテーマを使用した地理マップの作成方法」を参照してください。
-
点テーマを使用して地図を作成する方法
点テーマを使用して地理マップを作成すると、緯度と経度または住所で識別されるマップ内の特定の場所を表示できるようになります。たとえば、点テーマで倉庫の場所をマップに示します。表示される点のスタイルをカスタマイズすると、倉庫のセットに含まれる倉庫内の製品数(高、適正、低)に応じた個別のイメージを使用して、それぞれの製品数を区別できるようになります。
点テーマを使用した地理マップを作成する場合は、最初にベース・マップを構成してから、そのマップの点テーマをデータ・コレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。また、点テーマをレイヤー化して、それとは別のテーマ用に構成およびバインドされているベース・マップに重ねることもできます。
たとえば、図41-7に示す地理マップには、米国内の倉庫の場所と、それらの倉庫の製品数レベルを表す点テーマが設定されています。
始める前に:
データバインドされた地理マップについて理解しておいてください。詳細は、「データバインドされた地理マップの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
-
「アプリケーション・モジュールの作成と変更」の説明に従い、点テーマを使用した地理マップのデータ・モデルで必要になる、ビュー・オブジェクトのインスタンスが含まれているアプリケーション・モジュールを作成します。
たとえば、図41-7に示す地理マップの点テーマのデータソースは、Summit ADF DVTサンプル・アプリケーション用に作成したビュー・オブジェクトから取得しています。
-
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従って、JSFページを作成します。
データバインドされた点テーマを使用して地図を作成するには:
図41-9に、点テーマを使用した地理マップ用に入力が完了した「点マップ・テーマの作成」ダイアログを示します。この地理マップは、各倉庫の場所と製品数のレベルをイメージで表現します。
マップの点テーマの作成後に、マップに表示される点のスタイルをさらにカスタマイズすると、より詳細な情報を表現できるようになります。たとえば、図41-7のマップの点テーマでは、各倉庫の製品数についてのレベル(高、適正、低)を表現するために個別のイメージを使用しています。それぞれの点スタイルに、mapPointStyleItem
タグを使用します。詳細は、「点テーマの点スタイル・アイテムの作成方法」を参照してください。
点テーマの点スタイル・アイテムの作成方法
特定のマップ点テーマで使用する点スタイル・アイテムを作成するために使用できる様々なオプションがあります。それらは次のとおりです。
-
すべてのデータ・ポイントに対する単一イメージ
-
データ・ポイント・カテゴリごとに異なるイメージ
-
データ値の低、中および高範囲を表すイメージ
マップ点テーマのデータ・バインディングを作成すると、そのマップ・テーマのすべての点に対して使用される単一の組込みイメージを選択できるようになります。この選択には、「プロパティ」ウィンドウで、mapPointTheme
タグのbuiltInImage
属性を使用します。この属性のデフォルト値は、オレンジ色の球です。
あるいは、「点マップ・テーマの作成」ダイアログの「カテゴリ」に値を指定した場合は、一連の点スタイル・アイテムを作成して各カテゴリのデータ・ポイントを表す別のイメージを決定する必要もあります。その場合、点スタイル・アイテムのタグで最小/最大値を使用しないでください。かわりに、点スタイル・アイテムのタグのitemValue
属性に、「カテゴリ」に指定したデータ列のエントリと一致する値を設定します。
地理マップの点テーマでは、「カテゴリ」に値を指定しない場合でも、mapPointTheme
タグのmapPointStyleItem
子タグを使用して値の範囲(低、中、高など)とその範囲を表すイメージを指定できます。この指定をすると、各点は、その点のデータ値が含まれる範囲を識別するイメージによって表されます。
始める前に:
データバインドされた地理マップについて理解しておいてください。詳細は、「データバインドされた地理マップの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
-
「アプリケーション・モジュールの作成と変更」の説明に従い、点テーマを使用した地理マップのデータ・モデルで必要になる、ビュー・オブジェクトのインスタンスが含まれているアプリケーション・モジュールを作成します。
たとえば、図41-7に示す地理マップの点テーマのデータソースは、Summit ADF DVTサンプル・アプリケーション用に作成したビュー・オブジェクトから取得しています。
-
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従って、JSFページを作成します。
-
点テーマを使用した地理マップをページに追加します。詳細は、「点テーマを使用して地図を作成する方法」を参照してください。
点スタイルのアイテムをマップの点テーマに追加して、データ値の範囲を表現するには:
ノート:
mapPointStyleItem
子タグを使用して点のスタイルをカスタマイズする方法は、カスタム点イメージを指定できる宣言的な方法です。コールバックを使用してカスタム・イメージだけでなくカスタムHTMLを指定する方法の詳細は、「マップ点テーマへのカスタム点スタイル・アイテムの追加に関する必知事項」を参照してください。
点テーマを使用した地図の作成時の処理
点テーマを使用した地理マップを「データ・コントロール」パネルから作成すると、次の処理が行われます。
-
点テーマのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
-
地理マップ・コンポーネントに必要なタグをJSFページに追加します。
-
地理マップ・タグ内の必要な点テーマの子タグをJSFページに追加します。
次の例は、点テーマを使用する地理マップ用に生成された行セット・バインディングを示しています。
<bindings> <mapTheme xmlns="http://xmlns.oracle.com/adfm/dvt"></mapTheme> <mapTheme IterBinding="WorldProductInventory1Iterator" id="WorldProductInventory1" xmlns="http://xmlns.oracle.com/adfm/dvt"> <mapThemeDataMap convert="false" mapThemeType="point"> <data> <item value="AmountInStock" label="${adfBundle['view.ViewControllerBundle'].AMOUNT_IN_ STOCK}"/> </data> <item type="us_form_2" street="Address" city="City" state="State" zipCode="ZipCode" label="WarehouseId"/> </mapThemeDataMap> </mapTheme> <mapTheme IterBinding="SWarehouseView1Iterator" id="SWarehouseView1" xmlns="http://xmlns.oracle.com/adfm/dvt"> <mapThemeDataMap convert="false" mapThemeType="point"> <data> <item value="ProductCount" label="${adfBundle['view.ViewControllerBundle'].PRODUCT_COUNT}"/> </data> <item type="lat_long" longitude="Longitude" latitude="Latitude" label="ProductCount"/> </mapThemeDataMap> </mapTheme> </bindings>
次の例は、地理マップおよびその点テーマに対してJSFページで生成されるXMLコードを示しています。
<dvt:map id="map" startingX="-104.15" mapServerConfigId="mapConfig1" baseMapName="ELOCATION.WORLD_MAP" mapZoom="3" inlineStyle="width:600px; height:375px;" startingY="42.09"> <dvt:mapPointTheme id="mapPointTheme" value="#{bindings.SWarehouseView1.geoMapModel}"> <dvt:mapPointStyleItem maxValue="5.0" shortLabel="#{viewcontrollerBundle.PRODUCT_COUNT_LOW}" imageURL="/images/error.png" minValue="0.0"/> <dvt:mapPointStyleItem minValue="6.0" maxValue="7.0" shortLabel="#{viewcontrollerBundle.PRODUCT_COUNT_OK}" imageURL="/images/checkmark.png"/> <dvt:mapPointStyleItem minValue="8.0" shortLabel="#{viewcontrollerBundle.PRODUCT_COUNT_HIGH}" imageURL="/images/warning.png"/> </dvt:mapPointTheme> </dvt:map> <dvt:mapToolbar mapId="map" id="mt1"/>
マップ点テーマへのカスタム点スタイル・アイテムの追加に関する必知事項
マップの点にカスタムHTMLとカスタム・イメージを指定する場合は、mapPointTheme
タグのcustomPointCallback
属性を使用して、このカスタマイズを実行できます。
ノート:
マップ点テーマのcustomPointCallback
属性を設定すると、マップはdvt:mapPointStyleItem
子タグをすべて無視します。コールバックによってこれらのタグはオーバーライドされるためです。
コールバックを使用してマップ点のスタイルをカスタマイズするには:
色テーマを使用して地理マップを作成する方法
色テーマを使用して地理マップを作成すると、マップの領域を色分け表示できるようになります。たとえば、色テーマを使用すると、州ごとのインベントリ・レベルを色の範囲で表現する形式で倉庫のある州を識別できます。
色テーマを使用した地理マップを作成する場合は、最初にベース・マップを構成してから、そのマップの色テーマをデータ・コレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。また、色テーマをレイヤー化すると、それとは別のテーマ用に構成およびバインドされているベース・マップに重ねることもできます。
たとえば、図41-10に示す地理マップには、各州のインベントリ・レベルを表現する形式で倉庫のある州を識別する色テーマが設定されています。
図41-10 色テーマを使用した地理マップ
始める前に:
データバインドされた地理マップについて理解しておいてください。詳細は、「データバインドされた地理マップの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
-
「アプリケーション・モジュールの作成と変更」の説明に従い、色テーマを使用した地理マップのデータ・モデルで必要になる、ビュー・オブジェクトのインスタンスが含まれているアプリケーション・モジュールを作成します。
たとえば、図41-10に示す色テーマを使用した地理マップのデータ・ソースは、Summit ADF DVTサンプル・アプリケーション用に作成したビュー・オブジェクトから取得しています。
-
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従って、JSFページを作成します。
データバインドされた色テーマを使用して地理マップを作成するには:
-
「データ・コントロール」パネルから、コレクションを選択します。
図41-11に示す「データ・コントロール」パネルでは、地域(この例では、米国の州)の製品インベントリ・レベルを色で表すマップの色テーマを作成するために、
WorldProductInventory1
コレクションを選択しています。 -
すでに地理マップ・コンポーネントを含んでいるJSFページにコレクションをドラッグし、ポップアップ・メニューから「地理マップ」→「マップおよび色のテーマ」を選択します。
-
ページ上のマップをまだ構成していない場合は、「地理マップの作成」ダイアログの入力を完了してください。詳細は、「地理ベース・マップの構成方法」を参照してください。それ以外の場合は、以下のいずれかを実行します。
-
ドロップダウン・リストから、使用するマップ構成を選択します
-
「OK」クリックして、使用可能なマップ構成をそのまま使用します
-
「新規」をクリックして、新しいベース・マップを構成します
-
「編集」をクリックして、使用可能なマップ構成に変更を加えます
-
-
ベース・マップに色テーマをレイヤー表示するときに、それとは別のテーマ用にベース・マップが構成およびバインドされている場合は、「作成」ダイアログで「色テーマ」を選択します。
-
「色マップ・テーマの作成」ダイアログの「テーマID」フィールドで、「ID」フィールドのマップ・テーマに一意の識別子を入力します。
-
ベース・マップ・テーマ・セクションで、地理マップで使用するベース・マップのカラー・テーマを次のように指定します。
-
「名前」フィールドで、ベース・マップ・テーマの名前を選択します。
-
「位置」では、選択したベース・マップ・テーマ内の位置の列に対応するデータ・コレクション内の位置の列を選択します。
-
オプションで、「サンプル・テーマ・データの表示」をクリックし、「サンプル・テーマ・データ」ダイアログを表示します。このダイアログでは、実際のデータの先頭のいくつかの行を確認できるため、適切な位置列を指定できます。
たとえば、アメリカ合衆国のマップの州で構成される地域のデータを確認するには、図41-12で示すように、MAP_STATES_NAMEを選択できます。
ノート:
Oracle Spatialの管理者はサンプル・データの表示を無効にできます。このボタンが使用できない場合は、管理者に連絡して指示を求めてください。
-
-
「外観」セクションで、カラー・テーマの外観を次のように指定します。
-
「データ・バケット数」に、この地理マップのデータのグループ数を入力します。各グループは、色別にコード化されます。この数の指定後は、最小値と最大値に色を指定できます。他の値の色は、RGBアルゴリズムを使用して自動的に選択されます。
-
「最小値の色」で、最小値の色を選択します。
-
「最大値の色」で、最大値の色を選択します。
ノート:
データ・バケットごとに正確な色を指定する場合は、「マップ・カラー・テーマでの色のカスタマイズに関する必知事項」を参照してください。
-
-
「データ」セクションで、コレクション内のデータに関する次の情報を指定します。
-
「位置」では、ベース・マップ・テーマから選択した位置列の値に対応するデータ・コレクション内の列を選択します。
-
「ロケーション・ラベル」では、位置列の値に関連付けられているラベルを含むデータ・コレクション内の列を選択します。これらのラベルは、色をクリックしたときまたは色の上にカーソルを置いたときに表示される「情報」ウィンドウに表示されます。
-
「データ・ラベル」には、色をクリックしたときまたは色の上にカーソルを置いたときに表示される「情報」ウィンドウおよびツールチップでのデータの説明に使用されるラベルを入力します。たとえば、「情報」ウィンドウでは、データ値の前にProduct Popularityなどのラベルを表示できます。データ・ラベルに使用するテキスト・リソースを入力することもできます。テキスト・リソースは、リソース・バンドルからの翻訳可能な文字列または動的ラベル用に実行時に実行されるEL式のいずれかにできます。ドロップダウン・リストを使用して、「テキスト・リソースの選択」または「式ビルダー」ダイアログを選択します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
-
-
「行選択の有効化」は、マスター/ディテール関係を有効にする場合にのみ使用します。これは、マップ・テーマのデータ・コレクションが、ページ上の別のUIコンポーネントに表示されるディテール・ビューとのマスター/ディテール関係においてマスターである場合に便利です。
図41-13に、商品の人気を州別のカラー・テーマで示す「カラー・マップ・テーマの作成」ダイアログを示します。
地図へのカラー・テーマの追加時の処理
カラー・テーマを「データ・コントロール」パネルから既存の地図にドロップすると、次の処理が行われます。
-
カラー・テーマのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
-
地理マップ・タグ内の必要なカラー・テーマの子タグをJSFページに追加します。
次の例は、地理マップの色テーマに生成された行セット・バインディングを示しています。
<bindings> <mapTheme IterBinding="WorldProductInventory1Iterator" id="WorldProductInventory1" xmlns="http://xmlns.oracle.com/adfm/dvt"> <mapThemeDataMap convert="false" mapThemeType="color"> <item type="location" value="State" label="State"/> <data> <item value="AmountInStock" label="${adfBundle['view.ViewControllerBundle'].STOCK_LEVELS}"/> </data> </mapThemeDataMap> </mapTheme> </bindings>
次の例は、アメリカ合衆国のマップ上の各州における商品の人気を表す色テーマに対してJSFページで生成されるXMLコードを示しています。
<dvt:map id="map" startingX="-102.39" mapServerConfigId="mapConfig1" baseMapName="ELOCATION_MERCATOR.WORLD_MAP" mapZoom="3" inlineStyle="width:600px; height:375px;" startingY="40.27" summary="Geographic map with color theme"> <dvt:mapColorTheme id="mapColorTheme" themeName="MAP_STATES_ABBRV" value="#{bindings.WorldProductInventory1.geoMapModel}" bucketCount="5" minColor="#ff0000" maxColor="#00ff00" locationColumn="STATE_ABRV"/> </dvt:map>
マップ・カラー・テーマでの色のカスタマイズに関する必知事項
マップ・カラー・テーマのデータ・バインディング時には、データ・バケットに対する最小値の色および最大値の色のみを指定できます。最小値から最大値までのバケットの色は、マップがアルゴリズムを使用して決定します。しかし、データ・バインディングを完了すると、各データ・バケットに使用する正確な色を指定できるようになります。
dvt:mapColorTheme
タグの「プロパティ」ウィンドウで、colorList
属性を使用すると、各バケットの色を指定できます。色の配列をこの属性にバインドするか、セミコロンのセパレータを使用して色の文字列を指定できます。
たとえば、この属性の値を#ff0000;#00ff00;#0000ff
に設定した場合、最初のバケットは赤、2番目のバケットは緑、3番目のバケットは青となります。
円グラフまたは棒グラフのテーマを使用した地理マップの作成方法
円グラフ・テーマまたは棒グラフ・テーマを使用して地理マップを作成すると、緯度と経度または住所で識別されるマップ内の特定の場所を表示できるようになります。たとえば、点テーマで倉庫の場所をマップに示します。表示される点のスタイルをカスタマイズすると、倉庫のセットに含まれる倉庫内の製品数(高、適正、低)に応じた個別のイメージを使用して、それぞれの製品数を区別できるようになります。
円グラフまたは棒グラフのテーマを使用した地理マップを作成する場合は、最初にベース・マップを構成してから、そのマップの円グラフまたは棒グラフのテーマをデータ・コレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。また、円グラフまたは棒グラフのテーマをレイヤー化すると、それとは別のテーマ用に構成およびバインドされているベース・マップに重ねることもできます。
たとえば、図41-14に示す地理マップには、米国内の倉庫の場所と、それらの倉庫の製品数レベルを表す点テーマが設定されています。
たとえば、図41-14に示す地理マップには、米国内の倉庫の場所と、それらの倉庫の製品数レベルを表す点テーマが設定されています。
始める前に:
データバインドされた地理マップについて理解しておいてください。詳細は、「データバインドされた地理マップの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
-
「アプリケーション・モジュールの作成と変更」の説明に従い、円グラフまたは棒グラフのテーマを使用した地理マップのデータ・モデルで必要になる、ビュー・オブジェクトのインスタンスが含まれているアプリケーション・モジュールを作成します。
たとえば、図41-14に示す円グラフ・テーマと図41-15に示す棒グラフ・テーマのデータソースは、Summit ADF DVTサンプル・アプリケーション用に作成したビュー・オブジェクトから取得しています。
-
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従って、JSFページを作成します。
データバインドされた円グラフまたは棒グラフのテーマを使用した地理マップを作成するには:
-
「データ・コントロール」パネルから、コレクションを選択します。
図41-16に、
WorldProductInventory1
を選択し、ある州で人気のある製品カテゴリを表すために、既存の地図マップ・コンポーネントに円グラフまたは棒グラフの棒テーマを作成する例を示します。 -
JSFページにコレクションをドラッグし、ポップアップ・メニューから「地理マップ」→「マップおよび円グラフのテーマ」または「マップおよび棒グラフのテーマ」を選択します。
-
ページ上のマップをまだ構成していない場合は、「地理マップの作成」ダイアログの入力を完了してください。詳細は、「地理ベース・マップの構成方法」を参照してください。それ以外の場合は、以下のいずれかを実行します。
-
ドロップダウン・リストから、使用するマップ構成を選択します
-
「OK」クリックして、使用可能なマップ構成をそのまま使用します
-
「新規」をクリックして、新しいベース・マップを構成します
-
「編集」をクリックして、使用可能なマップ構成に変更を加えます
-
-
ベース・マップに円グラフ・テーマをレイヤー表示するときに、それとは別のテーマ用にベース・マップが構成およびバインドされている場合は、「作成」ダイアログで「円グラフ・テーマ」を選択します。
-
円グラフ・テーマの作成ダイアログで、次の手順を実行して、作業対象にする新しいテーマとベース・マップのテーマの要素を識別します。
-
「テーマID」で、作成する円グラフ・テーマの一意のIDを入力します。
-
ベース・マップ・テーマ・セクションで、ベース・マップの名前と、円グラフを配置する地域を選択します。
-
-
「外観」セクションで、「データ」の下で次のようにします。
-
「位置」では、選択したベース・マップ・テーマ内の位置の列に対応するデータ・コレクション内の位置の列を選択します。
必要に応じて、適切な位置の列を識別できるように、「サンプル・テーマ・データの表示」をクリックして実際のデータの最初の数行を確認します。
-
「ロケーション・ラベル」では、データ・コレクション内の位置のラベルを含むデータ・コレクション内の列を選択します。
-
「円グラフの区分の属性」のグリッド(円グラフの場合)、または「系列の属性」のグリッド(棒グラフの場合)で、作成中の円グラフまたは棒グラフで表す値を含む各属性を入力します。
-
各円グラフの区分の属性またはシリーズ属性の横に、その属性のデータ値のラベルとして使用するテキストを入力します。テキストを直接入力したり、データ値を1つ使用する場合のように
No Label
を選択してラベルを抑制したり、リソース・バンドルからテキスト・リソースを指定したりできます。またはEL式ビルダーを使用して実行時にラベル・テキストを評価することもできます。
-
-
「行選択の有効化」は、関連するコンポーネントで行を選択可能にする場合にのみ選択します。このコンポーネントは、作成中の地図に関連するデータ・コレクションにリンクされているコンポーネントがページに含まれる場合に使用します。
-
「OK」をクリックします。
図41-17に、製品別インベントリ・レベル用に必要事項を入力した「円グラフ・マップ・テーマの作成」ダイアログを示します。
図41-17に、製品別インベントリ・レベル用に必要事項を入力した「棒グラフ・マップ・テーマの作成」ダイアログを示します。
地理マップへの円グラフ・テーマまたは棒グラフ・テーマの追加時の処理
円グラフ・テーマを「データ・コントロール」パネルから既存の地図にドロップすると、次の処理が行われます。
-
円グラフ・テーマのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
-
マップXML内で必要な円グラフ・テーマのコードをJSFページに追加します。
次の例は、地理マップの円グラフ・テーマに生成された行セット・バインディングを示しています。
<mapTheme IterBinding="PopularCategoriesByState1Iterator" id="PopularCategoriesByState1" xmlns="http://xmlns.oracle.com/adfm/dvt"> <mapThemeDataMap mapThemeType="pieChart"> <item type="location" value="StateProvince" label="StateProvince"/> <data> <item value="AudioVideo" label="${adfBundle['view.ViewControllerBundle'].AUDIO_VIDEO}"/> <item value="CellPhones" label="${adfBundle['view.ViewControllerBundle'].CELL_PHONES}"/> <item value="Games" label="${adfBundle['view.ViewControllerBundle'].GAMES}"/> </data> </mapThemeDataMap> </mapTheme>
次の例は、地理マップの円グラフ・テーマに対してJSFページで生成されるXMLコードを示しています。
<dvt:mapPieGraphTheme id="mapPieGraphTheme1" themeName="MAP_STATES_NAME" shortLabel="#{viewcontrollerBundle.POPULAR_CATEGORIES}" pieRadius="10" styleName="comet" value="#{bindings.PopularCategoriesByState1.geoMapModel}" locationColumn="POLYGON_ID"/> </dvt:mapPieGraphTheme>
データバインドされたテーマ・マップの作成
テーマ・マップでは、ビジネス・データをスタイル設定されたエリア内にパターンまたは関連付けられたマーカーとして表し、リモートのOracle MapViewerサービスへの接続は必要ありません。テーマ・マップでは、地理マップでの地理的な詳細なしで、データに焦点を合せます。
テーマ・マップは、米国、世界をはじめ、世界の大陸や地域(EMEAやAPACなど)などのあらかじめ作成されたベース・マップとともにパッケージ化されています。それぞれのベース・マップには、いくつかのリージョンのセットと、都市の固定セットが1つ含まれます。リージョンまたは都市の1つのセットはレイヤーと呼ばれます。各レイヤーは、データ・コレクションにバインドし、データを色やパターンの塗りつぶし、またはデータ・マーカー、あるいはその両方で表すためにスタイルを設定できます。実行時には、テーマ・マップでドリルが有効になっていないかぎり、一度に表示できるのは1つのマップ・レイヤーとその関連するデータのみです。
テーマ・マップに表示されるデータは、データ・コレクションに基づいています。ADFデータ・コントロールを使用すると、JDeveloperではデータ・バインディングが宣言的なタスクとなります。「データ・コントロール」パネルからJSFページにコレクションをドラッグ・アンド・ドロップし、「コンポーネント・ギャラリ」を使用してデータを表示するベース・マップとマップ・レイヤーを選択します。レイヤー・ブラウザおよびバインディング・ダイアログを使用して、テーマ・マップでデータ・コレクション属性をデータ・レイヤーにバインドできます。
マップ・レイヤーをデータ・コレクションのデータ行に関連付けるには、スタンプを使用します。スタンプを使用すれば、データ・モデル内の各データ行をスタイル(色またはパターンなど)、マーカー(円形または四角形など)、またはイメージにより識別できます。スタンプを使用すると、テーマ・マップではエリア、マーカーまたはイメージごとに子コンポーネントが作成されません。むしろ、コンポーネントのコンテンツは、データ・コレクションの行など、データ属性ごとに1回、繰り返しレンダリングされるか、スタンプされます。
図41-19に、USAベース・マップを使用したテーマ・マップを示します。このSummit ADF DVTサンプル・アプリケーションのマップでは、州マップ・レイヤーを使用して、顧客の場所と倉庫の場所を表示し、倉庫のある州については製品インベントリ・レベルを表示しています。この例は、「データ・コントロール」パネルおよびテーマ・マップのバインディング・ダイアログを使用したときの、テーマ・マップのデフォルト機能を示しています。このデフォルト機能には、データにバインドされた凡例と、スタイル設定された点およびエリアに関連付けられるラベルなどがあります。
図41-19 顧客の場所と倉庫の場所を表示するテーマ・マップ
テーマ・マップのエンド・ユーザー機能とプレゼンテーション機能、ユースケース、タグ構造、テーマ・マップへの特殊機能の追加の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のテーマ・マップ・コンポーネントの使用方法に関する項を参照してください。
ADFデータ・コントロールを使用してテーマ・マップを作成する方法
thematicMap
コンポーネントは、モデルを使用して、基になるリストのデータにアクセスします。固有のモデル・クラスはoracle.adf.view.rich.model.CollectionModel
です。java.util.List
、java.util.Array
およびjavax.faces.model.DataModel
など、その他のモデル・インスタンスも使用できます。データ・レイヤーではインスタンスがCollectionModel
に自動的に変換されます。
始める前に:
データバインドされたテーマ・マップについて理解しておいてください。詳細は、「データバインドされたテーマ・マップの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
-
「アプリケーション・モジュールの作成と変更」の説明に従って、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
-
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従って、JSFページを作成します。
「データ・コントロール」パネルを使用してテーマ・マップを作成するには:
データ・コントロールを使用したテーマ・マップ作成時の処理
ADFデータ・コントロールを使用してテーマ・マップを作成すると、JDeveloperにより、次が実行されます。
-
JSFページのページ定義ファイルでテーマ・マップのバインディングが定義されます。
-
DVTテーマ・マップ・コンポーネント用のコードがJSFページに挿入されます。
次の例は、図41-19に例示したテーマ・マップの場合の、JSFページのページ定義ファイルに定義されたバインディングを示しています。
<bindings> <tree IterBinding="WorldProductInventory1Iterator" id="WorldProductInventory1"> <nodeDefinition DefName="model.WorldProductInventory" Name="WorldProductInventory10"> <AttrNames> <Item Value="Address"/> <Item Value="AmountInStock"/> <Item Value="Category"/> <Item Value="CategoryId"/> <Item Value="City"/> <Item Value="Country"/> <Item Value="CountryCode"/> <Item Value="CountryId"/> <Item Value="Id"/> <Item Value="Id1"/> <Item Value="Id2"/> <Item Value="Id3"/> <Item Value="Id4"/> <Item Value="Latitude"/> <Item Value="Longitude"/> <Item Value="ProdName"/> <Item Value="ProductId"/> <Item Value="RegName"/> <Item Value="RegionId"/> <Item Value="ReorderPoint"/> <Item Value="State"/> <Item Value="WarehouseId"/> <Item Value="ZipCode"/> </AttrNames> </nodeDefinition> </tree> <tree IterBinding="SCustomerView1Iterator" id="SCustomerView1"> <nodeDefinition DefName="model.SCustomerView" Name="SCustomerView10"> <AttrNames> <Item Value="Address"/> <Item Value="City"/> <Item Value="CountryId"/> <Item Value="Id"/> <Item Value="Name"/> <Item Value="State"/> <Item Value="ZipCode"/> </AttrNames> </nodeDefinition> </tree> <tree IterBinding="SWarehouseView1Iterator" id="SWarehouseView1"> <nodeDefinition DefName="model.SWarehouseView" Name="SWarehouseView10"> <AttrNames> <Item Value="Address"/> <Item Value="City"/> <Item Value="CountryId"/> <Item Value="Id"/> <Item Value="Latitude"/> <Item Value="Longitude"/> <Item Value="ManagerId"/> <Item Value="Phone"/> <Item Value="ProductCount"/> <Item Value="State"/> <Item Value="ZipCode"/> </AttrNames> </nodeDefinition> </tree> </bindings>
次の例は、図41-19に例示したテーマ・マップのJSFページに挿入されるコードを示しています。
<dvt:thematicMap id="tm1" basemap="usa" animationOnDisplay="alphaFade" summary="#{viewcontrollerBundle.THEMATIC_MAP_DISPLAYING_ WAREHOUSE_PRODUCT_INVENTORY_LEVELS}"> <dvt:areaLayer layer="states" id="al1"> <dvt:areaDataLayer id="dal1" value="#{bindings.SWarehouseView1.collectionModel}" var="row"> <dvt:areaLocation name="#{row.State}" id="al2"> <dvt:area id="a1" shortDesc="#{row.ProductCount} units"> <dvt:attributeGroups id="ag1" type="color" value="#{row.ProductCount le 5 ? 'low' : (row.ProductCount le 8 ? 'med' : 'high')}" label="#{row.ProductCount le 5 ? 'Low Product Counts' : (row.ProductCount le 8 ? 'Good Product Counts' : 'Surplus Product Counts')}"> <dvt:attributeMatchRule id="amr1" group="low"> <f:attribute name="color" value="#DD1E2F"/> </dvt:attributeMatchRule> <dvt:attributeMatchRule id="amr2" group="med"> <f:attribute name="color" value="#EBB035"/> </dvt:attributeMatchRule> <dvt:attributeMatchRule id="amr3" group="high"> <f:attribute name="color" value="#218559"/> </dvt:attributeMatchRule> </dvt:attributeGroups> </dvt:area> </dvt:areaLocation> </dvt:areaDataLayer> </dvt:areaLayer> <dvt:pointDataLayer id="dpl1" value="#{bindings.SCustomerView1.collectionModel}" var="row"> <dvt:pointLocation type="pointName" pointName="#{row.State}_ #{fn:toUpperCase(fn:replace(row.City, ' ', '_'))}" id="pl1"> <dvt:marker id="m2" fillColor="#00000" opacity="1.0" shape="human" scaleX="4.0" scaleY="4.0" shortDesc="#{row.Name}"> <f:attribute name="legendLabel" value="Customer Location"/> </dvt:marker> </dvt:pointLocation> </dvt:pointDataLayer> <dvt:pointDataLayer id="dpl2" value="#{bindings.SWarehouseView1.collectionModel}" var="row"> <dvt:pointLocation type="pointXY" pointX="#{row.Longitude}" pointY="#{row.Latitude}" id="pl2"> <af:image id="img1" source="/images/normalHouse.gif" shortDesc="#{row.Address}, #{row.City} #{row.ZipCode}"> <f:attribute name="legendLabel" value="Warehouse Location"/> </af:image> </dvt:pointLocation> </dvt:pointDataLayer> <dvt:legend id="l1"> <dvt:showLegendGroup id="slg1" label="Customer and Warehouse Locations"> <dvt:legendSection source="dpl1:m2" id="ls2"/> <dvt:legendSection source="dpl2:img1" id="ls1"/> </dvt:showLegendGroup> <dvt:showLegendGroup id="slg2" label="Warehouse Product Levels"> <dvt:legendSection source="al1:dal1:ag1" id="ls3"/> </dvt:showLegendGroup> </dvt:legend> </dvt:thematicMap>
データ・バインドされたテーマ・マップの作成を完了すると、ベース・マップの地理階層で使用可能なリージョンを表す別のマップ・レイヤーを追加したり、テーマ・マップの作成に使用したものと同じデータ・コレクションを使用して面データ・レイヤーや点データ・レイヤーを関連付けできます。レイヤー・ブラウザでは、マップ・レイヤー、面データ・レイヤーと点データ・レイヤー、スタイル設定されたエリアとマーカーの論理的構造を表します。レイヤー・ブラウザを使用して次を実行します。
-
ベース・マップの地理階層のその他のマップ・レイヤーをテーマ・マップに追加します。
-
下位レベルのリージョンを使用して、カスタム・レイヤーにリージョンを集約することにより、ベース・マップの地理階層でカスタム・マップ・レイヤーを定義します。詳細は、「カスタム・マップ・レイヤーの定義方法」を参照してください。
-
(グローバルまたはマップ・レイヤー固有の)面データ・レイヤーや点のデータ・レイヤーを追加、編集または削除します。詳細は、「テーマ・マップにデータ・レイヤーを追加する方法」を参照してください。
-
スタイル設定したエリアやマーカーを追加、編集または削除します。詳細は、「データを表示するためのエリア、マーカーおよびイメージのスタイル設定」を参照してください。
データ・コントロールを使用してテーマ・マップを作成すると、デフォルトのマップ・ラベルや凡例の表示をカスタマイズし、相互作用力やアニメーション効果を追加できます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』を参照してください。
テーマ・マップにデータ・レイヤーを追加する方法
データ・レイヤーを使用して、マップ・レイヤーをデータ・コレクションに関連付けます。スタンプを使用すれば、データ・モデル内の各データ行をスタイル(色またはパターンなど)、マーカー(円形または四角形など)、またはイメージにより識別できます。実行時にマップ・レイヤーが表示される場合は、データはスタイル設定されたエリア、マーカーまたはイメージとして表示されます。
マップ・レイヤーに面データ・レイヤーを追加する方法
マップ・レイヤーは、1つの面データ・レイヤーあるいは1つ以上の点データ・レイヤーを使用して、データを表示できます。面データ・レイヤーは、エリア、マーカーまたはイメージを使用してスタイル設定できます。点データ・レイヤーは、マーカーまたはイメージを使用してスタイル設定できます。
始める前に:
データバインドされたテーマ・マップについて理解しておいてください。詳細は、「データバインドされたテーマ・マップの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
-
「アプリケーション・モジュールの作成と変更」の説明に従って、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
-
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従って、JSFページを作成します。
-
「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」の説明に従い、データバインドされたテーマ・マップをJSFページに作成します。
面データ・レイヤーをマップ・レイヤーに追加するには:
図41-27に、設定済の面データ・レイヤーの作成ダイアログを示します。
図41-27 面データ・レイヤーの作成ダイアログ
デフォルトでは、areaDataLayer
コンポーネントを表す面データ・レイヤーおよびarea
コンポーネントを表すエリアが、レイヤー・ブラウザ階層に追加されます。次の例は、面データ・レイヤーをマップ・レイヤーに追加する際にJSFページに追加されるコードを示しています。
<dvt:thematicMap id="tm1" basemap="usa"> <dvt:areaLayer layer="counties" id="al1"> <dvt:areaDataLayer id="dl2" value="#{bindings.TmapStatesView11.collectionModel}" var="row"> <dvt:areaLocation name="#{row.Name}" id="al2"> <dvt:area id="a1"/> </dvt:areaLocation> </dvt:areaDataLayer> </dvt:areaLayer> ... </dvt:thematicMap>
面データ・レイヤーをテーマ・マップに追加したら、エリア、マーカーまたはイメージを使用してデータをスタイル設定します。詳細は、「データを表示するためのエリア、マーカーおよびイメージのスタイル設定」を参照してください。
マップ・レイヤーに点データ・レイヤーを追加する方法
マップ・レイヤーは、1つの面データ・レイヤーあるいは1つ以上の点データ・レイヤーを使用して、データを表示できます。面データ・レイヤーは、エリア、マーカーまたはイメージを使用してスタイル設定できます。点データ・レイヤーは、マーカーまたはイメージを使用してスタイル設定できます。
点データ・レイヤーが、特定のマップ・レイヤーの子としてではなくthematicMap
の直接の子としてベース・マップに関連付けられている場合は、データは常時表示され、グローバル・ポイント・レイヤーと呼ばれます。
始める前に:
データバインドされたテーマ・マップについて理解しておいてください。詳細は、「データバインドされたテーマ・マップの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
-
「アプリケーション・モジュールの作成と変更」の説明に従って、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
-
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従って、JSFページを作成します。
-
「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」の説明に従い、データバインドされたテーマ・マップをJSFページに作成します。
点データ・レイヤーをマップ・レイヤーに追加するには:
図41-28に、データ型がpointName
の、設定済の点データ・レイヤーの作成ダイアログを示します。
図41-28 点データ・レイヤーの作成ダイアログ
デフォルトでは、pointDataLayer
コンポーネントを表す点・データ・レイヤーおよびmarker
コンポーネントを表すマーカーが、レイヤー・ブラウザ階層に追加されます。次の例は、点データ・レイヤーをマップ・レイヤーに追加する際にJSFページに追加されるコードを示しています。
<dvt:thematicMap id="tm1" basemap="usa"> <dvt:areaLayer layer="states" id="al1"> <dvt:pointDataLayer id="dl1" value="#{bindings.TmapCitiesView11.collectionModel}" var="row"> <dvt:pointLocation type="pointName" pointName="#{row.City}" id="pl1"> <dvt:marker id="m2"/> </dvt:pointLocation> </dvt:pointDataLayer> </dvt:areaLayer> ... </dvt:thematicMap>
次の例は、グローバル・ポイント・データ・レイヤーをテーマ・マップに追加する際にJSFページに追加されるコードを示しています。
<dvt:thematicMap> <areaLayer layer="states" id="al1"/> <dvt:pointDataLayer id="dl2" value="#{bindings.TmapCitiesView12.collectionModel}" var="row"> <dvt:pointLocation type="pointXY" pointX="#{row.Longitude}" pointY="#{row.Latitude}" id="pl2"> <dvt:marker id="m3"/> </dvt:pointLocation> </dvt:pointDataLayer> ... </dvt:thematicMap>
点データ・レイヤーをテーマ・マップに追加したら、エリア、マーカーまたはイメージを使用してデータをスタイル設定します。詳細は、「データを表示するためのエリア、マーカーおよびイメージのスタイル設定」を参照してください。
データを表示するためのエリア、マーカーおよびイメージのスタイル設定
面データ・レイヤーを使用してマップ・レイヤーをデータ・コレクションに関連付けます。スタンプを使用すれば、データ・モデル内の各データ行をスタイル(色またはパターンなど)、マーカー(円形または四角形など)、またはイメージにより識別できます。
点データ・レイヤーを使用してマップ上のポイントのセットをデータ・コレクションに関連付けます。データ・ポイントは、マップ・レイヤー内の名前付きポイント(米国マップ内の都市など)、または経度と緯度により、指定できます。スタンプを使用すれば、データ・モデル内の各データ行をマーカー(円形や四角形など)またはイメージにより識別できます。
エリアをスタイル設定してデータを表示する方法
テーマ・マップareaLayer
内のすべてのエリアについてデフォルトのスタンプを使用してエリアを構成することも、子attributeGroups
タグを使用して、データ・セット内のカテゴリ・グループに基づいてスタイル属性タイプを自動的に生成することもできます。area
タグとattributeGroups
タグの両方で、同じスタイル属性が設定されている場合は、attributeGroups
スタイル・タイプが優先されます。
デフォルトでは、面データ・レイヤーを追加すると、構成可能なエリアがレイヤー・ブラウザに追加されます。レイヤー・ブラウザを使用して、追加のエリアやマーカーを面データ・レイヤーに追加したり、マーカーを点データ・レイヤーに追加できます。レイヤー・ブラウザは、マップ・レイヤー、面データ・レイヤーと点データ・レイヤー、テーマ・マップに構成されたエリアやマーカーの論理的構造を反映します。
たとえば、倉庫のある州を赤色で表示するように(図41-29を参照)、usa
ベース・マップのstates
レイヤーに含まれる州を属性グループでスタイル設定できます。
図41-29 エリア・スタンプが構成されたテーマ・マップ
始める前に:
データバインドされたテーマ・マップについて理解しておいてください。詳細は、「データバインドされたテーマ・マップの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
-
「アプリケーション・モジュールの作成と変更」の説明に従って、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
-
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従って、JSFページを作成します。
-
「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」の説明に従い、データバインドされたテーマ・マップをJSFページに作成します。
デフォルトのスタンプを使用してエリアをスタイル設定するには:
図41-30に、「エリアの構成」ダイアログの「デフォルト・スタンプ」ページを示します。
図41-30 「エリアの構成」ダイアログの「デフォルト・スタンプ」ページ
次の例は、構成したエリアのJSFページに挿入されるコードを示しています。
<dvt:thematicMap id="tm1" basemap="usa"> <dvt:areaLayer layer="states" id="al1"> <dvt:areaDataLayer id="dl1" value="#{bindings.TmapStatesView1.collectionModel}" var="row"> <dvt:areaLocation name="#{row.Name}" id="al2"><dvt:area id="a1" fillColor="#ff0000">
<f:attribute name="legendLabel"
value="#{Bundle.US_STATES}"/>
</dvt:area>
</dvt:areaLocation> </dvt:areaDataLayer> </dvt:areaLayer> </dvt:thematicMap>
データ・コレクション内のデータのカテゴリ・グループを使用してエリアをスタイル設定する場合は、「エリアの構成」ダイアログの「属性グループ」ページを使用します。サンプル・コードを含めた「属性グループ」ページの使用方法の詳細は、「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」に記載のユースケースを参照してください。
デフォルト・スタンプを使用してデータを表示するためにマーカーをスタイル設定する方法
テーマ・マップ・レイヤー内のすべてのマーカーについてデフォルトのスタンプを使用してマーカーを構成することも、子attributeGroups
タグを使用して、データ・セット内のカテゴリ・グループに基づいてスタイル属性タイプを自動的に生成することもできます。marker
タグとattributeGroups
タグの両方で、同じスタイル属性が設定されている場合は、attributeGroups
スタイル・タイプが優先されます。
デフォルトでは、点データ・レイヤーを追加すると、構成可能なマーカー要素がレイヤー・ブラウザに追加されます。レイヤー・ブラウザを使用して、追加のエリアやマーカーを面データ・レイヤーに追加したり、マーカーを点データ・レイヤーに追加できます。レイヤー・ブラウザは、マップ・レイヤー、面データ・レイヤーと点データ・レイヤー、テーマ・マップに構成されたエリアやマーカーの論理的構造を反映します。
たとえば、図41-31に示すように、デフォルトのスタンプを使用すると、米国のベース・マップの州レイヤーに事前定義されているすべての市区町村を、赤丸を付けることにより識別できます。この例では、マーカーは点データ・レイヤー上でスタイル設定されています。面データ・レイヤー上でのマーカーのスタイル設定も同様です。
図41-31 デフォルト・スタンプで構成したマーカーを含むテーマ・マップ
始める前に:
データバインドされたテーマ・マップについて理解しておいてください。詳細は、「データバインドされたテーマ・マップの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
-
「アプリケーション・モジュールの作成と変更」の説明に従って、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
-
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従って、JSFページを作成します。
-
「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」の説明に従い、データバインドされたテーマ・マップをJSFページに作成します。
デフォルトのスタンプを使用してマーカーをスタイル設定するには:
図41-32に、「マーカーの構成」ダイアログの「デフォルト・スタンプ」ページを示します。
図41-32 「マーカーの構成」ダイアログの「デフォルト・スタンプ」ページ
次の例は、構成したマーカーのJSFページに挿入されるコードを示しています。
<dvt:thematicMap id="tm1" basemap="usa"> <dvt:areaLayer layer="states" id="al1"> <dvt:pointDataLayer id="dl2" value="#{bindings.TmapCitiesView1.collectionModel}" var="row"> <<dvt:pointLocation type="pointName" pointName="#{row.City}" id="pl1"> <dvt:marker id="m2" fillColor="#ff0000"> <f:attribute name="legendLabel" value="#{Bundle.US_CITIES}"/> </dvt:marker> </dvt:pointLocation> </dvt:pointDataLayer> </dvt:areaLayer> </dvt:thematicMap>
カテゴリ・グループを使用してデータを表示するためにマーカーをスタイル設定する方法
テーマ・マップ・レイヤー内のすべてのマーカーについてデフォルトのスタンプを使用してマーカーを構成することも、子attributeGroups
タグを使用して、データ・セット内のカテゴリ・グループに基づいてスタイル属性タイプを自動的に生成することもできます。marker
タグとattributeGroups
タグの両方で、同じスタイル属性が設定されている場合は、attributeGroups
スタイル・タイプが優先されます。
データ・コレクション内のデータのカテゴリ・グループを使用してマーカーをスタイル設定する場合は、「マーカーの構成」ダイアログの「属性グループ」ページを使用します。マーカーは、点データ・レイヤーまたは面データ・レイヤーに対して構成できます。
始める前に:
データバインドされたテーマ・マップについて理解しておいてください。詳細は、「データバインドされたテーマ・マップの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
-
「アプリケーション・モジュールの作成と変更」の説明に従って、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
-
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従って、JSFページを作成します。
-
「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」の説明に従い、データバインドされたテーマ・マップをJSFページに作成します。
データのカテゴリ・グループを使用してマーカーをスタイル設定するには:
たとえば、図41-33に示すように、面データ・レイヤーでマーカーを使用してデータのカテゴリ・グループを色で表示できます。
図41-33 色別のマーカー属性グループ
次の例は、色別のマーカー属性グループのサンプル・コードを示しています。
<dvt:thematicMap basemap="usa" id="tm1" <dvt:areaLayer layer="states" id="al1" labelDisplay="off"> <dvt:areaDataLayer id="dl1" var="row" value="#{stateData.colorModel}"> <dvt:areaLocation id="al2" name="#{row.name}"> <dvt:marker id="m1" scaleX="3.0" scaleY="3.0" shape="circle"> <dvt:attributeGroups id="ag1" type="color" value="#{row.category}" label="#{row.category}"/> </dvt:marker> </dvt:areaLocation> </dvt:areaDataLayer> </dvt:areaLayer> <dvt:legend id="l1"> <f:facet name="separator"/> <dvt:legendSection id="ls1" label="Category" source="ag1"/> </dvt:legend> </dvt:thematicMap>
マーカーに色、形状などの複数の属性を指定してデータのカテゴリ・グループを表示することもできます。また、特定の条件を満たした場合にグループ化ルールに例外を表示できます。図41-34に、色と形状を使用してカテゴリ・グループを表示したテーマ・マップ(例外のTexas州を含む)を示します。
次の例は、例外ルールが設定された複数のマーカー属性グループのサンプル・コードを示しています。
<dvt:thematicMap basemap="usa" id="tm2" <dvt:areaLayer layer="states" id="al1" labelDisplay="off"> <dvt:areaDataLayer id="dl1" var="row" value="#{stateData.colorModel}"> <dvt:areaLocation id="al2" name="#{row.name}"> <dvt:marker id="m1" scaleX="3.0" scaleY="3.0" shape="circle"> <dvt:attributeGroups id="ag1" type="shape color" value="#{row.category}" label="#{row.category}"> <dvt:attributeExceptionRule id="aer1" condition="#{row.name=='TX'}" label="Texas"> <f:attribute name="color" value="#ff00ff"/> </dvt:exceptionRule> </dvt:attributeGroups> </dvt:marker> </dvt:areaLocation> </dvt:areaDataLayer> </dvt:areaLayer> <dvt:legend id="l1"> <f:facet name="separator"/> <dvt:legendSection id="ls1" label="Category" source="ag1"/> </dvt:legend> </dvt:thematicMap>
マーカーのスタイル設定に関する必知事項
テーマ・マップでは、事前定義された7つの形状セット(circle
、square
など)をサポートしており、これらはmarker
コンポーネントのshape
属性を使用して指定できます。カスタム・マーカーの場合、shapePath
属性を使用してSVGファイルのパスを指定すると、事前定義の形状のかわりに表示されます。
スケーラブル・ベクター・グラフィック(SVG)が、テーマ・マップのマーカーのカスタム形状作成のためのファイル形式としてサポートされています。
カスタム形状によってサポートされていないSVG機能には次のものがあります。
-
SVGファイル内のイメージ・タグ。SVGのベクター形状を使用して、すべてを宣言する必要があります。
-
パターンによる塗りつぶし
-
ストロークのグラデーション
マーカーの形状は、ADFスキン内のCSSスタイル・プロパティを使用して指定することもできます。テーマ・マップ・スタイルのプロパティを使用すれば、事前定義のマーカーの形状は上書きでき、カスタム・マーカーのSVGファイルのパスは、shapePath
属性を使用せずに定義できます。スタイル・プロパティを使用する場合、事前定義とカスタムの両方の形状の定義にmarker
コンポーネントのshape
属性が使用されます。
その形状の汎用またはコンポーネント固有のスタイル・プロパティがADFスキンで指定されている場合、事前定義の形状は上書きされます。たとえば、テーマ・マップ・コンポーネントのスタイル・プロパティで次のようにnewCircle.svg
ファイルを指定することにより、事前定義のcircle
形状を上書きできます。
af|dvt-thematicMap::shape-circle{ -tr-path: url(/resources/path/newCircle.svg); }
JSFページでは、marker
コンポーネントのshape
属性は次のように設定されます。
<dvt:marker id="m1" shape="circle"/>
marker
コンポーネントのshape
属性でカスタム形状を指定するには、形状スタイル・プロパティ名でcustom
の接頭辞を使用する必要があります。たとえば、カスタム形状がcustomName
という名前の場合、ADFスキン・ファイルで汎用の.AFDVTShapeCustomName:alias
スタイル・プロパティか、次のようにSVGファイルを指す-tr-path
プロパティを指定したテーマ・マップ固有のaf|dvt-thematicMap::shape-customName
のいずれかを定義する必要があります。
af|dvt-thematicMap::shape-customName{ -tr-path: url(/resource/path/newCShape.svg); }
JSFページでは、マーカー・コンポーネントの形状属性は次のように設定されます。
<dvt:marker id="m1" shape="customName"/>
ADFスキンおよびスタイル・プロパティの使用の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「スタイルおよびスキンを使用した外観のカスタマイズ」の章を参照してください。
属性グループのデフォルトのスタイル値に関する必知事項
attributeGroups
コンポーネントは、データ・コレクション内のデータのカテゴリ・グループに基づいて色または形状などのスタイル・プロパティ値を生成するために使用します。データ・モデルでグループ化の基準となる列を表す属性に基づき、attributeGroups
コンポーネントにより、データ内の一意の値またはグループごとにスタイル値を生成できます。
値を生成するスタイル・プロパティのタイプは、attributeGroups
コンポーネントのtype
属性で指定します。area
コンポーネントに対してサポートされているタイプは、color
、pattern
およびopacity
です。marker
コンポーネントに対してサポートされているタイプは、color
、shape
、pattern
、opacity
、scaleX
およびscaleY
です。これらのタイプは、一意のデータ値ごとに複数のスタイル・プロパティを生成するために、スペース区切りのリストにまとめることができます。
生成されるデフォルトのスタイル値は、ADFスキンのCSSスタイル・プロパティを使用して定義されます。各attributeGroups
タイプには、ADFスキンで定義されたデフォルトのランプがあり、索引ベースのセレクタを目的の値に設定することによりカスタマイズできます。次の例は、CSSスタイル・プロパティを使用するサンプル・コードを示しています。そのコードでは、CSSスタイル・プロパティを使用して属性グループを指定します。
af|dvt-attributeGroups::shape1{ -tr-shape: square; } af|dvt-attributeGroups::shape2{ -tr-shape: square; } ... af|dvt-attributeGroups::color1{ -tr-fill-color: #003366; }
属性グループ・タイプごとのデフォルトのランプを表41-2に示します。
表41-2 テーマ・マップ属性グループのデフォルトのランプ
タイプ | デフォルトのランプ |
---|---|
|
j |
|
|
|
|
|
|
|
|
ADFスキンおよびスタイル・プロパティの使用の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「スタイルおよびスキンを使用した外観のカスタマイズ」の章を参照してください。
イメージを使用したデータの表示方法
組込みまたはカスタム形状を使用してテーマ・マップにデータをスタイル設定するかわりに、イメージを使用してデータを表現できます。イメージは、面データ・レイヤーまたは点データ・レイヤーのどちらかに関連付けることができます。
たとえば、図41-35に示すように、面データ・レイヤーで家屋のイメージを使用して、米国ベース・マップの州マップ・レイヤー上で主要な不動産の位置を識別できます。
始める前に:
データバインドされたテーマ・マップについて理解しておいてください。詳細は、「データバインドされたテーマ・マップの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
-
「アプリケーション・モジュールの作成と変更」の説明に従って、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
-
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従って、JSFページを作成します。
-
「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」の説明に従い、データバインドされたテーマ・マップをJSFページに作成します。
イメージを使用してデータを表示するには:
次の例は、イメージを使用して図41-35に示したテーマ・マップのデータを表示するコード・サンプルを示しています。
<dvt:thematicMap id="thematicMap" imageFormat="flash" basemap="usa" summary="Thematic map showing the important real estate markets"> <dvt:legend label="Legend"> <dvt:legendSection source="areaLayer:dataLayer:img1"/> </dvt:legend> <dvt:areaLayer id="areaLayer" layer="states"> <dvt:areaDataLayer id="dataLayer" contentDelivery="immediate" value="#{tmapBean.colorModel}" var="row"varStatus="rowStatus"> <dvt:areaLocation id="dataLoc" name="#{row.name}"> <af:image id="img1" source="/resources/images/geoMap/mansion.gif" rendered="#{row.category == 'category1'}" shortDesc="House image"> <f:attribute name="legendLabel" value="Prime location"/> </af:image> </dvt:areaLocation> </dvt:areaDataLayer> </dvt:areaLayer> </dvt:thematicMap>
マーカー・イメージ・ソースを使用してデータを表示する方法
イメージ・ファイルを使用してデータを表示するようにマーカーを構成できます。個別のイメージを指定して、テーマ・マップ上でユーザーの選択とホバーの状態を表示できます。dvt:marker
コンポーネントを使用している場合は、イメージの回転もサポートされます。たとえば、図41-36のテーマ・マップは、航空機のフライトの位置と航路を表し、航路に沿って移動するときにイメージを回転します。
図41-36 テーマ・マップ・フライト・トラッカ
始める前に:
データバインドされたテーマ・マップについて理解しておいてください。詳細は、「データバインドされたテーマ・マップの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
-
「アプリケーション・モジュールの作成と変更」の説明に従って、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
-
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従って、JSFページを作成します。
-
「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」の説明に従い、データバインドされたテーマ・マップをJSFページに作成します。
マーカー・イメージ・ソースを使用してデータを表示するには:
次の例は、図41-36のテーマ・マップ・フライト・トラッカのコード・サンプルを示しています。
<dvt:thematicMap id="thematicMap" basemap="world" animationOnDisplay="none" tooltipDisplay="auto" summary="flight tracker demo"> <dvt:areaLayer id="al1" layer="countries"> <dvt:pointDataLayer id="pdl1" contentDelivery="immediate" value="#{flightTrackerBean.flights}" selectionListener="#{flightTrackerBean.processSelection}" var="row" varStatus="rowStatus" selectionMode="multiple" partialTriggers="::::sbcb1" selectedRowKeys="#{flightTrackerBean.selectedKeys}"> <dvt:pointLocation id="pl1" type="pointXY" pointX="#{row.currentLongLat.x}" pointY="#{row.currentLongLat.y}"> <dvt:marker id="m1" labelPosition="bottom" scaleX="3" scaleY="3" rotation="#{row.rotation}" shortDesc="OracleAir#{row.flightNumber}"#{row.flightNumber}" sourceHover="/resources/images/thematicMap/planeHover.png" source="/resources/images/thematicMap/plane.png" sourceSelected="/resources/images/thematicMap/planeSel.png" sourceHoverSelected="/resources/images/thematicMap/ planeHoverSel.png" labelDisplay="#{flightTrackerBean.showFlightNo ? 'on' : 'off'}" value="Flight #{row.flightNumber}"/> </dvt:pointLocation> </dvt:pointDataLayer> </dvt:areaLayer> </dvt:thematicMap>
基準となるマップの位置IDに関する必知事項
テーマ・マップ・コンポーネント用に用意されている基準となる各マップには、一連のリージョンを表す事前に作成された複数のマップ・レイヤーがあります。たとえば、基準となるworld
マップには、continents
用のマップ・レイヤーとcountries
用の別のレイヤーが含まれています。下位レベルのマップ・レイヤーのリージョンは、集約されて地理的階層内の次のレベルを構成します。マップ・レイヤーは、areaLayer
コンポーネントのlayer
属性で指定されます。
データ・コレクションをテーマ・マップにバインドする際、データが表示される基準となるマップからリージョンのマップ位置IDを使用してエリアまたはポイント・データの位置を指定する列を、データ・モデルに指定する必要があります。エリアの位置はareaLocation
コンポーネントのname
属性で指定され、ポイントの位置は、type
属性がpointName
に設定されている場合、pointLocation
コンポーネントのpointName
属性で指定されます。
米国の基準となるマップでは、位置IDは次のネーミング・ルールによって決まります。
-
country
レイヤー:USA
-
states
レイヤー: 2文字の郵便用の略号を使用します。たとえば、Massachusettsの位置IDはMA
で、Texasの位置IDはTX
です。 -
counties
レイヤー:states
レイヤー位置IDの後に、アンダースコア、郡の名前を続けます。すべて大文字にし、英字以外の文字はアンダースコアに置き換えます。たとえば、MassachusettsのMiddlesex郡の位置IDはMA_MIDDLESEX
で、TexasのRed River郡の位置IDはTX_RED_RIVER
です。 -
cities
レイヤー:states
レイヤー位置IDの後に、アンダースコア、都市名を続けます。すべて大文字にし、英字以外の文字はアンダースコアに置き換えます。たとえば、MassachusettsのBostonの位置IDはMA_BOSTON
で、TexasのSan Antonio位置IDはTX_SAN_ANTONIO
です。
他の基準となるマップでは、位置IDは次のネーミング・ルールによって決まります。
-
continents
レイヤー:world
、africa
、asia
、australia
、europe
、northAmerica
およびsouthAmerica
の基準となるマップでは、AF
(アフリカ)、AS
(アジア)、AU
(オーストラリア)、EU
(ヨーロッパ)、NA
(北米)およびSA
(南米)となります。 -
worldRegions
レイヤー:worldRegions
、apac
、emea
、latinAmerica
およびusaAndCanada
の基準となるマップでは、APAC
(アジア太平洋)、EMEA
(ヨーロッパおよび中近東)、LAT
(中南米)、NA
(米国およびカナダ)となります。 -
countries
レイヤー: ISO 3166-1 alpha-3国名コードを使用します。たとえば、カナダの位置IDはCAN
で、中国の位置IDはCHN
です。 -
cities
レイヤー: 3文字のcountries
位置IDの後に、アンダースコア、都市名を続けます。すべて大文字にし、英字以外の文字はアンダースコアに置き換えます。たとえば、カナダのTorontoの位置IDはCAN_TORONTO
、米国のLos Angelesの位置IDはUSA_LOS_ANGELES
です。
事前作成されたマップ・レイヤーごとに、すべてのテーマ・マップの基準となるマップの位置IDを記載したカンマ区切りの値(CSV)ファイルをダウンロードできます。これらのリンクは、areaLocation
コンポーネントのname
属性のタグ・ドキュメントで検索します。データ視覚化コンポーネントのタグ・ドキュメントにアクセスするには、構造ウィンドウで該当のコンポーネントを選択し、「プロパティ」でヘルプ・ボタンをクリックします。
マスター/ディテール関係の構成に関する必知事項
テーマ・マップを構成し、表などの、ページ上の別のUIコンポーネントにその関連するデータを表示できます。この構成では、テーマ・マップのデータ・コレクションが、別のUIコンポーネントに表示されるディテール・ビューとのマスター/ディテール関係でのマスターとなります。図41-37に、州ごとの失業率を表示するテーマ・マップを示します。ユーザーは、1つ以上の州を選択してデータのディテール・ビューを表に表示できます。
このマスター/ディテール処理を宣言的に実現するには、次の要件を満たす必要があります。
-
次のように、同じデータ・コレクションを使用して両方のビューにデータを提供する必要があります。
-
テーマ・マップ
areaDataLayer
またはpointDataLayer
をデータ・コレクションにバインドします。その属性は、テーマ・マップ・レイヤーでエリアまたはマーカーによってスタイル設定されるデータを表します。 -
その他のADFコンポーネント(表など)を同じデータ・コレクションにバインドします。
-
-
「データ・レイヤーの作成」ダイアログで現在の行をマスター/ディテールに設定を選択し、テーマ・マップ
areaLayer
コンポーネントのselectionListener
属性に値を自動的に設定し、すでにテーマ・マップ・バインディングの一部であるprocessSelection
メソッドを使用します。たとえば、テーマ・マップの面データ・レイヤー・コンポーネントの
value
属性がvalue="#{stateData.employmentData}"
である場合は、selectionListener
属性は次のように設定されます。selectionListener="#{stateData.employmentData.processSelection}".
-
areaDataLayer
またはpointDataLayer
コンポーネントのselectionMode
属性が、テーマ・マップの要件に応じてsingle
またはmultiple
に設定されていることを確認します。
カスタム・マップ・レイヤーの定義方法
カスタム・マップ・レイヤーを固有のリージョン・データから定義し、テーマ・マップの自然の地理階層に挿入できます。カスタム・レイヤーは、事前定義のマップ・レイヤーを開き、下位レベルのリージョンを集約することで作成され、カスタム・レイヤー内に新規のリージョンが形成されます。定義したカスタム・マップ・レイヤーは、他のマップ・レイヤーと同じように使用されます。
たとえば、図41-38に示すように、米国リージョンのカスタム・マップ・レイヤーに米国北東部、中西部、西部および南部という地理的なリージョンを定義できます。この図では、米国リージョンのカスタム・レイヤーは米国のベース・マップの州レイヤーから拡張されています。レイヤー内の新しいエリアは、州レイヤーの州から集約されます。米国南部リージョンのラベルには、そのリージョンにある州が一覧で表示されます。米国中西部のリージョンは、下位レベルの郡リージョンの売上げカテゴリを表示するまでドリルダウンされています。ドリルの詳細は、「テーマ・マップでドリルを構成する方法」を参照してください。
図41-38 米国リージョンのカスタム・マップ・レイヤー
customAreaLayer
コンポーネントは、モデルを使用して、基になるリストのデータにアクセスします。固有のモデル・クラスはoracle.adf.view.rich.model.CollectionModel
です。java.util.List
、java.util.Array
およびjavax.faces.model.DataModel
など、その他のモデル・インスタンスも使用できます。customAreaLayer
は、インスタンスをCollectionModel
に自動的に変換します。
始める前に:
テーマ・マップの属性やテーマ・マップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のテーマ・マップの構成に関する項を参照してください。
拡張対象の事前定義のベース・マップで集約したエリアを定義するADFデータ・コントロールまたはADFマネージドBeanは、すでに用意されています。
ページにすでにテーマ・マップが存在している必要があります。ない場合は、この章の指示に従ってテーマ・マップを作成します。詳細は、「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」を参照してください。
カスタム・マップ・レイヤーを追加および構成する手順は次のとおりです。
図41-39に、設定済の「カスタム・レイヤーの作成」ダイアログを示します。
図41-40に、カスタム・レイヤー定義後のレイヤー・ブラウザを示します。レイヤー構造では、カスタム・レイヤーcal1
は、マップ・レイヤーal1
で参照されます。ここで、面データ・レイヤーまたは点データ・レイヤーを追加してデータを表示します。詳細は、「テーマ・マップにデータ・レイヤーを追加する方法」を参照してください。
図41-40 レイヤー・ブラウザでのカスタム・マップ・レイヤー
次の例は、JSFページに挿入されるコードを示しています
<dvt:thematicMap> ... <dvt:areaLayer layer="states" id="al1"/> <dvt:areaLayer layer="cal1" id="al3"/> <dvt:customAreaLayer id="cal1" value="#{bindings.TmapStatesView.collectionModel}" var="row" extendsLayer="states"> <dvt:customArea areaId="#{row.RowID}" areaList="#{row.RowID}" label="#{row.RowID}" id="ca1"/> </dvt:customAreaLayer> ... </dvt:thematicMap>
カスタム・レイヤーを構成してマップ・レイヤー階層に追加すると、他のマップ・レイヤーと同様の方法でそのマップ・レイヤーを使用できるようになります。たとえば、図41-38に示すようにテーマ・マップを作成するには、次を実行する必要があります。
-
テーマ・マップでドリルをサポートするように構成します。詳細は、「テーマ・マップでドリルを構成する方法」を参照してください。
ノート:
テーマ・マップでドリルが有効な場合は、カスタム・レイヤーとカスタム・レイヤーの集約に使用するマップ・レイヤー間のドリルが可能です。その際、どちらのレイヤーもデータ表示を構成する必要はありません。
-
郡データ・ビューに面データ・レイヤーを追加し、構成します。詳細は、「テーマ・マップにデータ・レイヤーを追加する方法」を参照してください。
-
エリア・コンポーネントを追加してスタイル設定し、各マップ・レイヤーの関連するデータを表示します。詳細は、「データを表示するためのエリア、マーカーおよびイメージのスタイル設定」を参照してください。
-
テーマ・マップの凡例を構成します。詳細は、「データバインドされた凡例の作成」を参照してください。
次の例は、テーマ・マップでカスタム・レイヤーを使用するためのサンプル・コードを示しています。
<dvt:thematicMap id="thematicMap" imageFormat="flash" basemap="usa" drilling="on" maintainDrill="true" controlPanelBehavior="initExpanded" summary="US Custom Regions"> <dvt:customAreaLayer id="crl1" value="#{tmapRegions.collectionModel}" var="row" varStatus="rowStatus" extendsLayer="states"> <dvt:customArea areaId="#{row.name}" label="#{row.name}" areaList="#{row.regions}" id="ca1"/> </dvt:customAreaLayer> <dvt:areaLayer id="custom" layer="crl1"> <dvt:areaDataLayer contentDelivery="immediate" value="#{tmapRegions.collectionModel}" selectionMode="single" var="row" varStatus="rowStatus" id="adl1"> <dvt:areaLocation name="#{row.name}" id="al1"> <dvt:area fillColor="#{row.color}" shortDesc="#{row.regions}" id="a1" value="#{row.name}"/> </dvt:areaLocation> </dvt:areaDataLayer> </dvt:areaLayer> <dvt:areaLayer id="areaLayerS" layer="states" <dvt:areaDataLayer id="dataLayerS" selectionMode="multiple" contentDelivery="immediate" value="#{tmapStates.collectionModel}" var="row" varStatus="rowStatus"> <dvt:areaLocation id="areaLocS" name="#{row.name}"> <dvt:area id="area1S" fillColor="#{row.color}"></dvt:area> </dvt:areaLocation> </dvt:areaDataLayer> </dvt:areaLayer> <dvt:areaLayer id="areaLayer" layer="counties"> <dvt:areaDataLayer id="dataLayer" selectionMode="single" contentDelivery="immediate" value="#{tmapCounty.collectionModel}" var="row" varStatus="rowStatus"> <dvt:areaLocation id="areaLoc" name="#{row.name}"> <dvt:area id="area1" fillColor="#{row.color}" value="#{row.category}"></dvt:area> </dvt:areaLocation> </dvt:areaDataLayer> </dvt:areaLayer> <dvt:legend label="Sales Regions" id="l1"> <dvt:legendSection source="custom:adl1:a1" id="ls1"/> <dvt:legendSection label="Counties" source="areaLayer:dataLayer:areaLoc" id="ls3"/> </dvt:legend> </dvt:thematicMap>
テーマ・マップでドリルを構成する方法
各種マップ・レイヤーの関連するデータ・ビューを備えたテーマ・マップは、上位と下位のデータ・ビュー間でドリルを実行するように構成できます。たとえば、図41-38に示すように、テーマ・マップでは、米国の州別の売上げカテゴリのデータを郡別にドリルダウンして表示できます。州や郡を選択した場合は、ポップアップ・メニューの選択やコントロール・パネルの設定により、ドリルアップやドリルダウンが開始されます。
テーマ・マップ・エリアのドリルを宣言的に実現するには、次の要件を満たす必要があります。
-
ドリル階層の各マップ・レイヤー(
areaLayer
)について、その子であるareaDataLayer
を該当するマップ・レイヤーの関連データを定義するデータ・コントロールにバインドする必要があります。 -
マップ・レイヤー・ドリル階層の各
areaDataLayer
のselectionMode
属性は、single
またはmultiple
に設定されている必要があります。 -
下位レベルのマップ・レイヤー・ドリル階層の
area
を構成し、上位レベルのマップ・レイヤーのarea
コンポーネントと同じデフォルトのスタンプやカテゴリ属性のスタイルを使用してデータを表示する必要があります。 -
thematicMap
コンポーネントのdrilling
属性はon
に設定する必要があります。
ノート:
テーマ・マップでドリルが有効な場合は、カスタム・レイヤーとカスタム・レイヤーの集約に使用するマップ・レイヤー間のドリルが可能です。
始める前に:
テーマ・マップの属性やテーマ・マップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のテーマ・マップの構成に関する項を参照してください。
ページにすでにテーマ・マップが存在している必要があります。ない場合は、この章の指示に従ってテーマ・マップを作成します。詳細は、「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」を参照してください。
ドリル階層の各データ・レイヤーのデータ・モデルを定義するデータ・コントロールはすでに用意されています。
テーマ・マップ・エリアを構成してドリルを可能にするには:
図41-40に、売上げカテゴリのデータを表示するようにスタイル設定されたエリアを持つ米国の州と郡のマップ・レイヤーに対し、ドリルを有効化したサンプル・コードを示します。
<dvt:thematicMap id="thematicMap" basemap="usa" drilling="on" maintainDrill="true" drillBehavior="zoomToFit" animationOnDisplay="none" <dvt:areaLayer id="al1" layer="states"> <dvt:areaDataLayer id="adl1" selectionMode="single" contentDeliver="immediate" value="#{row.state}" var="row" var="rowStatus"> <dvt:areaLocation id="areaLocS" name="#{row.stname}"> <dvt:area id="a1" fillColor="#{row.state}"/> </dvt:areaLocation> </dvt:areaDataLayer> </dvt:areaLayer> <dvt:areaLayer id="al2" layer="counties"> <dvt:areaDataLayer id="adl2" selectionMode="single" contentDelivery="immediate" value="#{row.county}" var="row" varStatus="rowStatus"> <dvt:areaLocation id="areaLocC" name="#{row.coname}"> <dvt:area id="a2" fillColor="#{row.county}"/> </dvt:areaLocation> </dvt:areaDataLayer> </dvt:areaLayer> ... </dvt:thematicMap>
データバインドされた凡例の作成
凡例には、シンボルとラベルのペア表記による、テーマ・マップのスタイル設定されたデータに関する説明表が付いています。テーマ・マップの凡例コンポーネント(legend
)では、色、形状、カスタム形状、塗りつぶしパターン、不透明度、イメージおよびサイズのシンボルをサポートしています。1つ以上の子凡例アイテム・コンポーネント(legendSection
)のソースは、テーマ・マップに表示するデータをスタイル設定するためにスタンプされる、テーマ・マップのarea
、marker
、attributeGroups
またはaf:image
コンポーネントです。凡例セクションの構造では、コンテンツの順序付けと外観に対する制御をサポートしています。showLegendSection
コンポーネントを使用して、凡例アイテムを公開可能なセクションにまとめることができます。図41-41に、マップのエリアおよびマーカーの公開可能なセクションを設定した凡例を示します。
attributeGroups
コンポーネントからの凡例アイテムにより、エリアまたはマーカーの属性タイプを異なるセクションに自動的に分割できます。セパレータ・ファセットを指定して、凡例セクション間にセパレータを描画できます。図41-42に、色、形状、塗りつぶしパターン、不透明度およびサイズに関する属性グループを使用し、各セクション間にセパレータを描画した凡例を示します。
図41-42 属性グループを使用した凡例
凡例は、Flash(デフォルト)およびPNGイメージ形式のどちらでも表示できます。どちらの形式も、右から左に表示するロケールをサポートしています。PNG形式にレンダリングすると、たとえば、テーマ・マップを印刷する場合に凡例の公開可能なセクションはサポートされず、凡例アイテムが公開として表示されます。
「データ・コントロール」パネルとテーマ・マップ・バインディング・ダイアログを使用してテーマ・マップを作成すると、凡例のデータ・バインディングが作成されます。テーマ・マップのすべてのエリアについて、1つのエリアまたはマーカーをデフォルトのスタンプとして構成した場合は、静的テキスト・リソースを凡例の固定エリアまたはマーカーに割り当てることができます。
行数が変動するデータを表示するデフォルトのスタンプに対し、EL式を使用して凡例テキストおよびマネージドBean(オプション)を割り当て、行数変動キーを取得してリソース・バンドルでテキスト・リソースを検索できます。次の例は、エリアとマーカーのスタンプの凡例エントリを生成するコード・サンプルを示しています。このコードは、行数が変動するエリアおよびテキスト・リソースが割り当てられた固定マーカーの公開可能なセクションを示しています。
<dvt:thematicMap id="tm1" basemap="usa" ...> <dvt:legend label=“Legend“> <dvt:showLegendGroupLabel label="Voting Majority"> <dvt:legendSection id="ls1" source="al1:adl1:areaStamp“/> </dvt:showLegendGroupLabel> <dvt:legendSection id="ls2" source="al1:adl1:fixedMarker"> </dvt:legend> <dvt:areaLayer id="al1" layer="states"> <dvt:areaDataLayer id="adl1"...> <dvt:areaLocation id="aloc1" ,,,> <dvt:area id="areaStamp"> fillColor="#{row.value > 50 ? tmapLegendBean,color1 : tmapLegendBean.color2}" <f:attribute name="legendLabel" value="#{row.value > 50 ? 'Candidate 2' : 'Candidate 1'}" /> <dvt:marker id=“fixedMarker“ shape=“human" fillColor=“"#FF9900" scaleX="3" scaleY="3"> <f:attribute name="legendLabel“ value="#{Bundle.Office_Locations}"/> </dvt:marker> </dvt:areaLocation> </dvt:areaDataLayer> </dvt:area> </dvt:thematicMap>
エリアまたはマーカーを構成し、属性グループを使用してデータ・コレクション内のデータのカテゴリ・グループのスタイルを指定する場合は、EL式を使用して凡例テキストおよびマネージドBean(オプション)を割り当て、行数変動キーを取得してリソース・バンドルでテキスト・リソースを検索できます。
属性グループに一致ルールを指定した場合は、凡例テキストはgroup
属性で指定されます。例外ルールを指定する場合は、アプリケーション・リソース・バンドルからのテキスト・リソースを指定できます。次の例は、一致ルールと例外ルールの両方が組み込まれ、凡例セクション間にセパレータを指定した属性グループを使用する凡例のサンプル・コードを示しています。
<dvt:thematicMap id="tm1" basemap="usa" ...> <dvt:legend id="l1" label="Legend"> <f:facet name="separator" <af:separator/> <dvt:legendSection id="ls1" source="al1:adl1:attributeGroupColor" /> <dvt:legendSection id="ls2" source="al1:adl1:attributeGroupShape" /> <dvt:legendSection id="ls3" source="al1:adl1:attributeGroupPattern" /> <dvt:legendSection id="ls4" source="al1:adl1:attributeGroupOpacity" />> </dvt:legend> <dvt:areaLayer id="al1" layer="states"> <dvt:areaDataLayer id="adl1" value=" " var=" " ...> <dvt:areaLocation id="dataLoc" name="#{row.name}"> <dvt:marker id="m1"... > <dvt:attributeGroups id="attributeGroupColor" type="color" label="#{row.category1}" value="#{row.category1}" /> <dvt:attributeMatchRule id="amrl" group="Mountain Dew"> <f:attribute name="color" value="#ffff00"/> </dvt:attributeMatchRule> <dvt:attributeGroups id="attributeGroupShape" type="shape" label="#{row.category2}" value="#{row.category2}" /> <dvt:attributeExceptionRule id="aer1" condition="#{row.name=='TX'}" label="#{viewcontroller.Texas}"> <f:attribute name="shape" value="human"/> </dvt:exceptionRule> <dvt:attributeGroups id="attributeGroupShape" type="pattern" label="#{row.category3}" ... /> <dvt:attributeGroups id="attributeGroupShape" type="opacity" label="#{row.category4}" ... /> </dvt:marker> </dvt:areaLocation> </dvt:areaDataLayer> </dvt:areaLayer> </dvt:thematicMap>
テーマ・マップの凡例エリアまたはマーカーを、他のマップ・レイヤーと同様の方法でカスタム・リージョンで構成します。カスタム・マップ・レイヤーの凡例のサンプル・コードを示します。
<dvt:thematicMap> <dvt:legend> <dvt:legendSection label=“Sales Regions" source="customAreaStamp"/> </dvt:legend> ... <dvt:customAreaLayer id="crl1“> ... </dvt:customAreaLayer> <dvt:areaLayer layer="crl1"> <dvt:areaDataLayer var="row"> <dvt:areaLocation name="#{row.name}" id="al1"> <dvt:area id=“customAreaStamp" fillColor="#{row.color}“> <f:attribute name="legendLabel“ value=“#{row.name}"/> </dvt:area> </dvt:areaLocation> </dvt:areaDataLayer> </dvt:areaLayer> </dvt:thematicMap
ADFスキンを使用して、テーマ・マップの凡例の外観をカスタマイズできます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「スタイルおよびスキンを使用した外観のカスタマイズ」の章を参照してください