| Oracle® Fusion Middleware Oracle MapViewerユーザーズ・ガイド 12c リリース2 (12.2) E79361-02 |
|
 前 |
 次 |
Oracle Mapsは、Webベースの高性能な対話型マッピング・アプリケーションを開発するための一連のテクノロジの名前です。Oracle Mapsは、MapViewerに同梱されています。
この章の主な項目は、次のとおりです。
対象地物(FOI)とは、Webブラウザ内で動作するJavaScriptマップ・クライアントを使用して操作できるビジネス・エンティティまたは地理的地物のことです。FOIデータは、動的に表示され、マップ・タイル層の一部ではありません。FOIにはポイント、線文字列、ポリゴンなどの任意の空間ジオメトリ・タイプを使用できます。FOIの検索、参照、検査および操作機能は、位置ベースのサービスにとって必要不可欠です。
FOIサーバーは、MapViewer内で動作するJavaサーブレットです。これは、データベースに対する問合せ、FOI画像のレンダリング、およびクライアントに対するFOI画像とFOI属性データの送信を実行することにより、JavaScriptマップ・クライアントから受け取るFOIリクエストに応答します。JavaScriptマップ・クライアントは、FOI画像をエンド・ユーザーに表示し、画像を操作する機能を提供します。
FOIサーバーは、テーマベースおよびユーザー定義という2つのタイプのFOIリクエストを受け付けます。いずれのタイプのFOIリクエストも、リクエストのタイプに適したデータ層を返します。
関連項目:
テーマベースFOI層は、類似した特性を備えデータベースに格納される空間地物の集合です。クライアントは、テーマベースFOI層リクエストをFOIサーバーに送信することにより、テーマベースFOI層をフェッチします。このリクエストの結果として、特定の問合せ基準を満たす一連のFOIデータ・エントリが得られます。各FOIデータ・エントリは、該当するFOI画像と、JavaScriptマップ・クライアントがクライアント側の双方向性を実装する際に使用できる一連のFOI属性から構成されます。
テーマベースFOI層は、事前定義済のMapViewerテーマ(6.1.1.1項を参照)または動的JDBC問合せテーマ(6.1.1.3項を参照)に基づいており、FOIデータのレンダリングに必要なすべての情報を定義します。この情報には、ジオメトリ地物の格納先の表、データベース問合せ時に使用される基準、FOIデータの一部である属性およびFOI画像のレンダリング時に使用されるスタイルが含まれます。事前定義済テーマの定義および構成は、Map Builderツール(第7章を参照)を使用して行えます。
関連項目:
クライアントは、事前定義済テーマベースFOIリクエストを使用してFOIデータをリクエストする場合、事前定義済テーマの名前、地物画像のスケール、およびジオメトリ地物に対する問合せの際に使用する問合せウィンドウを指定する必要があります。テーマの名前はアプリケーションが定義する必要がありますが、地物画像のスケールおよび問合せウィンドウはJavaScriptマップ・クライアントによって自動的に計算されます。
たとえば、次のような定義を持つCUSTOMERSという名前の表上では、CUSTOMERSという事前定義済テーマを定義できます。
SQL> DESCRIBE CUSTOMERS Name Null? Type --------------------------------- ------ ---------------------------- NAME VARCHAR2(64 CHAR) CITY VARCHAR2(64 CHAR) COUNTY VARCHAR2(64 CHAR) STATE VARCHAR2(64 CHAR) LOCATION SDO_GEOMETRY SALES NUMBER
LOCATION列は、顧客マーカーのレンダリングに使用される空間列です。
CUSTOMERSテーマのXMLスタイリング・ルールを、例6-1に示します。
例6-1 FOI層用事前定義済テーマのXMLスタイリング・ルール
<?xml version="1.0" standalone="yes"?>
<styling_rules>
<hidden_info>
<field column="CITY" name="City"/>
<field column="SALES" name="Sales"/>
</hidden_info>
<rule>
<features style="M.CIRCLE"> </features>
<label column="NAME" style="T.TEXT"> 1 </label>
</rule>
</styling_rules>
例6-1のスタイリング・ルールでは、次の事柄を指定しています。これらの指定がマップの表示に及ぼす影響については、[図は別の場所に移動]を参照してください。
マーカー・スタイルM.CIRCLEは、顧客のレンダリングに使用。
NAME列は、ラベル付け用属性として使用(label column="NAME")。NAME列の値(顧客の名前)は、ユーザーがマウスを顧客マーカーの上に移動したときにJavaScriptマップ・クライアントが表示する情報ウィンドウに含まれる。
情報ウィンドウには、該当する顧客の<hidden_info>要素(この例ではCITYおよびSALES)で指定されている列の値も含まれる。各<field>要素では、2つの属性を指定する。つまり、columnではデータベース列を指定し、nameでは情報ウィンドウで使用されるテキスト文字列を指定する。
MapViewerの事前定義済テーマには、標準の事前定義済テーマとテンプレート付き事前定義済テーマがあります。いずれのタイプの事前定義済テーマも、USER_SDO_THEMESビューを使用して定義します。ただし、標準の事前定義済テーマの問合せ条件は固定ですが、テンプレート付き事前定義済テーマの問合せ条件には動的なバインディング変数を含められ、それらの値はテーマ・リクエストの発行時に変更可能です。
バインディング変数を2つ使用するテンプレート付き事前定義済テーマのXMLスタイリング・ルールを、例6-2に示します(該当するテキストは<features>要素内の太字部)。
例6-2 テンプレート付き事前定義済テーマのXMLスタイリング・ルール
<?xml version="1.0" standalone="yes"?>
<styling_rules>
<hidden_info>
<field column="NAME" name="Name"/>
<field column="CITY" name="City"/>
<field column="SALES" name="Sales"/>
</hidden_info>
<rule>
<features style="M.CIRCLE">(city=:1 and sales>:2)</features>
<label column="NAME" style="T.TEXT"> 1 </label>
</rule>
</styling_rules>
例6-2では、必要条件を満たす地物が存在する都市の名前をバインディング変数:1、必要条件を満たす地物の最低売上高をバインディング変数:2で指定しています。(つまり、指定した都市で特定の最低値を超える売上高を持つ顧客のみに、店舗マーカーが表示されます。)これら2つのバインディング変数の値は、テーマの定義時には確定されず、クライアントがサーバーに送信するリクエストの中で与えられます。
クライアントは、動的JDBCテーマベースFOIリクエストを使用してFOIデータをリクエストする際、JDBCテーマの完全な定義を指定する必要があります。テーマの定義では、すべてのジオメトリ属性および非ジオメトリ属性を含め、レンダリング・スタイルと、FOIデータの問合せに使用されるSQL問合せを指定する必要があります。
例6-3は、各顧客位置の周りにバッファを表示するFOI層を作成するためのJavaScriptクライアント・コードを示しています。
例6-3 動的JDBC問合せのテーマ
var theme = '<themes><theme name="JDBC_THEME" >' +
'<jdbc_query asis="true" spatial_column="location"
jdbc_srid="8307" render_style="C.RED"
datasource="mvdemo">' +
'select sdo_geom.sdo_buffer(A.location,1,0.005,'+
'\'unit=mile arc_tolerance=0.005\') location '+
' from customers A' +
'</jdbc_query></theme></themes>' ;
buffertheme = new MVThemeBasedFOI('buffertheme',theme);
ユーザー定義FOIとは、クライアント側で定義される地物のことです。地物の集合としてレンダリングされるテーマベースFOI層とは異なり、ユーザー定義FOIの場合はリクエストとレンダリングが個々に実行されます。
ジオメトリの表現やレンダリング・スタイルも含め、ユーザー定義FOIの属性はすべて、アプリケーションで提供する必要があります。JavaScriptマップ・クライアントでは、ジオメトリ表現およびレンダリング・スタイルに関する情報を指定したリクエストを、FOIサーバーに送信します。FOIサーバーは、FOI画像をレンダリングし、クライアントに返します。レンダリング・スタイルは、USER_SDO_STYLESビュー内で事前定義済である必要があります。
Oracle Maps JavaScriptクライアントは、ブラウザベースのマップ視覚化エンジンであり、マップ・タイル・サーバーおよびFOIサーバーの上位で動作します。次の機能が実装されています。
マップ・タイル・サーバーからマップ・タイルをフェッチし、マップ・タイル層としてWebブラウザに表示する機能。
FOIリクエストをFOIサーバーに送信し、ユーザー定義の地物およびOracle Spatial and Graph問合せベースの地物をマップ・タイル層の上にオーバーレイ表示する機能。
マップ・ナビゲーション用のドラッグ、FOIのクリック、矩形の描画、レッドライニングなどのユーザー操作を制御する機能。
矩形の描画とは、アプリケーション・ユーザーが矩形の1つの隅をクリックした後、マウス・ボタンを押したままマウスを対角の隅までドラッグし、マウス・ボタンを離して矩形を作成することです。
レッドライニングとは、アプリケーション・ユーザーがマウス・ボタンをクリックした後、マウスを移動しクリックを複数回実行する(各クリックにより、まっすぐな線分を使用してレッドラインを伸ばす)ことにより、ポリゴンまたはポリラインを作成することです。(多くの場合レッドラインの描画は赤色でレンダリングされますが、任意の色を使用する線スタイルも指定できます。)
これらの機能にアクセスするには、JavaScript API (いくつかのJavaScriptクラスから構成される)を使用します。JavaScript APIには、次に示す2つのバージョンがあります。
従来のAPIとして現在もサポートされているバージョン1 (V1)。第6.2.1項「JavaScript API V1」を参照してください。
リリース11.1.1.7で導入された新しいAPIであるバージョン2 (V2)。6.2.2項「JavaScript API V2」を参照してください。
Oracle Maps JavaScript API (V1およびV2)内の全クラスの詳細は、Javadocスタイルのリファレンス・ドキュメント(mvdemo.earファイルに同梱されており、次の場所で利用可能)を参照してください。
http://host:port/mvdemo/api/oracle_maps_api.jsp (V1)
http://host:port/mvdemo/api/oracle_maps_html5_api.jsp (V2)
V1 APIおよびV2 APIのチュートリアルとデモは、ルート・コンテキスト・パス/mvdemoで、スタンドアロンのパッケージ・アプリケーションとして提供されます。このチュートリアルでは、まず基本事項(マップ・タイル層の表示、ナビゲーション・パネルの追加、インタラクティブな地物と情報ウィンドウの表示)について説明した後、より複雑なトピック(イベント・リスナーの登録、プログラムによるスタイルの作成と使用、空間フィルタ処理など)に移ります。
すべてのチュートリアルは、MVDEMOサンプル・データセット(Oracle Technology NetworkのMapViewerページから入手可能)に基づいており、mvdemoという名前のデータソースを前提としています。チュートリアル・ページには、3つのパネルがあります。左にはサンプル・コード(デモ)のタイトルがリストされます。いずれかをクリックすると、マップ(そのサンプル・コードの実行結果)が右上のパネルに表示されます。下のパネルには「JavaScript」および「HTML」というタブがあり、それぞれのタブに、選択したデモのJavaScriptおよびHTMLコードが表示されます。
Oracle Maps JavaScriptクライアントの機能にアクセスするには、次のものを含むいくつかのJavaScriptクラスから構成される、JavaScript APIバージョン1 (V1)を使用します。
MVMapViewクラスは、該当APIのメインのエントリ・ポイントです。ほとんどのマップ制御インタフェースが実装されています。
MVMapTileLayerクラス(以前の名称はMVBaseMapクラス)は、マップ・タイル・サーバーによってレンダリングされたマップ・タイルを表示するマップ・タイル層を定義します。
MVThemeBasedFOIクラスでは、テーマベースFOI層の定義および制御を実行します。
FOIクラスでは、ユーザー定義FOIの定義と制御を実行します。
MVSdoGeometryクラスでは、ジオメトリ・オブジェクトを定義します。ジオメトリには、Oracle Spatial and Graphでサポートされている任意のジオメトリ・タイプを使用できます。
MVRedLineToolクラスでは、レッドライン・ユーティリティの定義および制御を実行します。
MVRectangleToolクラスでは、矩形ツールの定義および制御を実行します。
MVOverviewMapクラスでは、メイン・マップが小さな矩形としてミニチュア表示される概要マップ(自体は矩形ツール内にあるマップ)の定義および制御を実行します。
MVMapDecorationクラスでは、マップ装飾の定義および制御を実行します。
MVMapViewは、Webブラウザ内の全マップ操作におけるメインのエントリ・クラスです。ユーザーのWebマッピング・アプリケーションにロジックを追加するための必須のインタフェースはすべて、MVMapViewなどのクラスによって提供されます。そのような論理的インタフェースには、次のようなものがあります。
マップ・クライアント・インスタンスを作成し、それをWebページ内で作成したマップ・コンテナDIVオブジェクトと関連付ける。
マップの中心やズーム・レベルなどのマップ・パラメータを構成するもの。
マップ・タイル層を作成し、操作するもの。
テーマベースFOI層を作成し、操作するもの。
ユーザー定義の各FOIを作成し、操作するもの。
マップ上に情報ウィンドウを表示するもの。
マップ・タイトル、カスタムな著作権表示、コントロール・ボタンなどの固定のマップ装飾を作成するもの。
ナビゲーション・バー、スケール・バー、矩形ツール、レッドライン・ツール、概要マップなどの組込みユーティリティにアクセスするもの。
イベント・リスナーを使用してイベント処理をカスタマイズするもの。適切なAPIメソッドを使用すると、イベント・リスナーをMVMapViewクラス、MVThemeBasedFOIクラスおよびMVFOIクラスに追加できます。
Oracle Maps JavaScript APIバージョン2 (V2)は、最新のブラウザの機能を利用します。次のような機能があります。
maps.oracle.com、Nokia Maps、Bing Maps、OpenStreet Mapsなどのマッピング・サービス・プロバイダをはじめとする、様々なサード・パーティのマップ・タイル・サービスに対する組込みのサポート
レンダリング・スタイルおよび効果(グラデーション、アニメーション、ドロップ・シャドウなど)のオンザフライ適用による、クライアント側での地理空間データの優れたレンダリング
多くのポイントの自動クラスタリングとクライアント側でのヒート・マップの生成
属性値と空間述語(問合せウィンドウ)に基づく、クライアント側での地物のフィルタ処理
優れた一連の組込みコントロールおよびツール(カスタマイズ可能なナビゲーション・バーと情報ウィンドウ、構成可能な層コントロール、レッドライン・ツール、距離測定ツールなど)
V2 APIには、既存のOracle Maps JavaScript V1 APIアプリケーションとの後方互換性はありません。V2固有の地物を既存のV1アプリケーション(つまり、MVThemeBasedFOIなどのクラスを使用する、V1 APIで記述されたアプリケーション)で使用する場合は、まずそれらのアプリケーションを移行する必要があります。
ただし、既存のサーバー側の事前定義済スタイルおよびテーマは、V2 APIと連携して動作しません。たとえば、次のコード・スニペットでは、関連する事前定義済スタイルを持つ事前定義済テーマmvdemo.customersに基づいて、インタラクティブなベクター層を作成します。
var baseURL = "http://"+document.location.host+"/mapviewer";
var layer = new OM.layer.VectorLayer("layer1",
{
def:{
type:OM.layer.VectorLayer.TYPE_PREDEFINED,
dataSource:"mvdemo",
theme:"customers",
url: baseURL
}
});
V2 APIには、次の最上位クラスおよびサブパッケージがあり、これらはすべてネームスペースOMに含まれています。
Mapクラスは、このAPIのメイン・クラスです。
Featureクラスは、個々の地理的地物(V1ではFOIとして知られている)を表します。
MapContextクラスは、現在のマップの中心点やズーム・レベルなど、いくつかの重要なコンテキスト情報をカプセル化した最上位クラスです。通常はイベント・リスナーに渡されます。
controlパッケージには、ナビゲーション・バーや概要マップなど、すべてのマップ・コントロールが含まれています。
eventパッケージには、すべてのマップおよび層イベント・クラスが含まれています。
filterパッケージには、表示したベクター層の地物を選択またはサブセット化するためのすべてのクライアント側フィルタ(空間またはリレーショナル)が含まれています。
geometryパッケージには、様々なジオメトリ・クラスが含まれています。
layerパッケージには、様々なタイルおよびベクター層クラスが含まれています。タイル層クラスには、Oracle、Nokia、Bing、OpenStreetMapなど、いくつかのオンライン・マップ・サービスへのアクセスが含まれています。ベクター層は、インタラクティブな地物層であり、V1のMVThemeBasedFOIおよびMVFOIクラスに対応しています。
infowindowパッケージには、カスタマイズ可能な情報ウィンドウと、それらのスタイルが含まれています。
styleパッケージには、クライアント側のベクター・データに適用できるスタイルが含まれています。また、アニメーション、グラデーション、ドロップ・シャドウなどのビジュアル効果も含まれています。
toolパッケージには、距離測定ツール、レッドライン・ツール、ジオメトリ描画ツールなど、様々なマップ・ツールが含まれています。
universeパッケージには、組込み(事前定義済)マップ汎用が含まれています。マップ汎用は、マップ・コンテンツの枠ボックスと一連のズーム・レベル定義を定義します。これは、V1 APIのタイル層の構成と似ています。
utilパッケージには、様々なユーティリティ・クラスが含まれています。
visualfilterパッケージでは、グラデーションやドロップ・シャドウなど、様々なビジュアル効果を実現するためのインタフェースが提供されます。
OM.Mapは、Webブラウザ内の全マップ操作におけるメインのエントリ・クラスです。このクラスや他のクラスにより、アプリケーション固有のロジック、操作および双方向性をWebマッピング・アプリケーションに追加するためのインタフェースが提供されます。次のようなアプリケーション・ロジックおよび操作があります。
マップ・クライアント・インスタンスを作成し、それをWebページ内で作成したマップ・コンテナDIVオブジェクトと関連付ける。
マップの中心やズーム・レベルなどのマップ・パラメータを構成するもの。
マップ・タイル層を作成し、操作する(オプション)。V1の場合と異なり、V2ではマップ・タイル層は必須ではありません。アプリケーションに含めることができるのは、ズーム・レベルとスケールをプログラムによって定義するカスタム汎用を使用する、インタラクティブなベクター層のみです。
ベクター層(V1ではFOIとして知られている)を作成し、操作する。
マップ上に情報ウィンドウを表示するもの。
マップ・タイトル、著作権表示、マップ・コントロールなどの固定のマップ装飾を作成する。
ナビゲーション・パネル、矩形ツール、円形ツール、スケール・バー、概要マップ・パネルなどの組込みユーティリティにアクセスする。
イベント・リスナーを使用してイベント処理を(したがって、マップの相互作用も)カスタマイズする。
V2 APIを使用したアプリケーションの開発の詳細は、第6.3.2項「V2 APIの使用」とOracle提供のチュートリアルおよびデモを参照してください。
V1 APIとV2 APIの主な類似点は次のとおりです。
これらには、同じアーキテクチャとコンテンツの組織があります。([以前は図6-1、現在は変更]と[以前は図6-4、現在は変更]は、両方のバージョンに適用されます。)
Oracle Spatial and GraphまたはLocatorを使用して、空間分析(近接性、包含、最も近い隣接物および距離に関する問合せ)および座標系のサポート(SRIDと変換)を行います。
ただし、大きな相違点がいくつかあります。
V2を使用した、クライアント側でのインタラクティブな地物のレンダリング(つまり、HTML5 CanvasまたはSVGを使用)により、クライアントの双方向性とユーザーの操作性が向上します。
V1の「FOIサーバー」に対応するV2のデータ・サーバーは、地物のベクター・ジオメトリと属性をクライアントにストリーミングして、ローカルでレンダリングを実行できるようにします。このため、V1の「FOI層」はV2ではベクター層と呼ばれます。
V2では、インタラクティブなベクター層を表示するために、バックグラウンド・マップ・タイル層は必要ありません。このため、たとえばV2では、アプリケーションがバックグラウンド・タイル層を使用することなく、州のテーマ・マップを(人口の五分位値別に色分けするなどして)表示することが可能です。
V2 APIはJQueryおよびJQueryUIに依存し、これらをインクルードします。このため、oraclemapsv2.jsはjquery-1.7.2.min.jsおよびjquery-ui-1.8.16.min.jsをインクルードします。アプリケーションでもJQueryとJQueryUIを使用し、これらをすでにインクルードしている場合は、Oracle Maps V2ライブラリをロードするかわりに、ファイルoraclemapsv2_core.jsを<script>タグ内で使用します。つまり、次を使用します。
<script src="/mapviewer/jslib/v2/oraclemapsv2_core.js"></script>
次は使用しません。
<script src="/mapviewer/jslib/v2/oraclemapsv2.js"></script>
表6-1に、V1とV1のクラス間の一般的な対応関係を示します。この関係は常に一対一ではありません。
表6-1 V1とV2のAPIクラス間の対応関係
| V1 APIクラス | V2 APIクラス |
|---|---|
|
|
|
|
|
|
|
|
カスタム・タイル層は、現在のリリースのV2では直接サポートされていません。ただし、 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
スタイル( |
|
|
ツール( |
|
|
装飾とコントロール( |
|
すべてのマップ・データがOracleデータベースに格納されており、Oracle Fusion MiddlewareにMapViewerがデプロイされている場合は、使用しているAPIバージョンに関連する項の手順に従ってOracle Mapsを使用すれば、Webベースのマッピング・アプリケーションを開発できます。
バージョン1 (V1) APIを使用してOracle Mapsアプリケーションを開発するには、次の項の手順に従います。
MapViewerがサービスを提供するクライアント側に表示される各マップ・タイル層について、対応するマップ・タイル層をMapViewerサーバー側に作成する必要があります。たとえば、[以前は6.1.2項、現在は変更]で説明したサンプル・アプリケーションの場合、クライアント側にマップ・タイル層として海、郡の境界線、都市および高速道路を表示するには、サーバー側にマップ・タイル層を作成する必要があります。ただし、タイル層がカスタムまたは組込み外部タイル層の場合、サーバー側にタイル層を定義する必要はありません。
マップ・タイル層を作成する場合は、マップ・タイル画像のレンダリング元となるマップ・ソースが使用可能な状態にあることを事前に確認する必要があります。データベースに格納されているマップ・データに基づいてマップ・タイル画像をレンダリングする場合は、事前定義済の一連のテーマから構成されるMapViewerベース・マップを作成する必要があります。(ベース・マップの作成は、第7章で説明するMap Builderツールを使用して行えます。)外部マップ・プロバイダを使用してマップ・タイル画像をレンダリングする場合は、マップ・タイル・サーバーによって指定されているタイル画像の定義を使用して外部サーバーからマップ画像をフェッチできるマップ・ソース・アダプタを作成する必要があります。
マップ・ソースが使用可能な状態にある場合は、1.6.3項で説明したように、MapViewer管理ページを使用して、マップ・タイル層を作成できます。マップ・タイル層を作成する場合は、適切な座標系の定義、マップ・ソースの定義(内部または外部)およびズーム・レベルの定義(ズーム・レベルの数とマップ・スケール)を指定する必要があります。
マップ・タイル層は、作成し終わったら、MapViewerに同梱されているJavaServer Page (JSP)デモ・アプリケーションを使用してテストできます。JSPデモ・アプリケーションには、http://host:port/mapviewer/fsmc/omaps.jspでアクセスできます。このアプリケーションでは、ユーザーの入力に基づいて、MapViewerインスタンスで定義されている任意のマップ・タイル層によって表示されるマップを表示できます。
データベース問合せの結果に基づきアプリケーションで動的地物をテーマベースFOI層として表示する必要がある場合は、テーマベースFOI層ごとに、事前定義済のMapViewerテーマを作成する必要があります。個々の動的地物をアプリケーションでユーザー定義FOIとして表示する必要がある場合は、FOIサーバーによって使用されるレンダリング・スタイル(複数可)を定義してFOI画像をレンダリングする必要があります。事前定義済のテーマおよびレンダリング・スタイルを作成するには、Map Builderツール(第7章を参照)を使用します。
Webブラウザ内で動作するOracle Mapsクライアント・アプリケーションは、プラグインを必要としない純粋なHTMLページおよびJavaScriptページです。そのため、そのようなアプリケーションは、純粋なHTMとしてコンテンツを配信する任意のWebテクノロジを使用して作成できます。そのようなテクノロジには、JavaServer Pages、Javaサーブレット、ASP、.NET C#などがあります。この項では純粋なHTML形式を使用したクライアント・アプリケーションの開発についてのみ説明しますが、それは他のWebテクノロジにも簡単に適用できます。
[以前は例6-1、現在は変更]に示すように、一般的にOracle Mapsアプリケーションのソース・コードはHTMLページにパッケージされますが、それは次の部分から構成されます。
<script>要素: Oracle Mapsクライアント・ライブラリをブラウザのJavaScriptエンジンにロードします。[以前は例6-1、現在は変更]の場合、この要素は次のとおりです。
<script language="Javascript" src="jslib/oraclemaps.js"></script>
HTML DIV要素 - Webページ内でマップ・コンテナとして使用されます。DIV要素のサイズと位置は、ユーザーのニーズに合わせてカスタマイズできます。[以前は例6-1、現在は変更]の場合、この要素は次のとおりです。
<div id="map" style="left:10; top:60;width: 600px; height: 500px"></div>
JavaScriptコード: マップ・クライアント・インスタンスの作成および初期化を実行します。マップ・クライアント・インスタンスの作成、初期マップ・コンテンツ(マップ・タイル層、FOI層など)の設定、初期マップの中心とズーム・レベルの設定、アプリケーションに固有なロジックの実装、マップの表示、およびその他のアプリケーションに固有なロジックの実装が実行されます。
このコードは、JavaScript関数(サーバーからクライアントWebブラウザにHTMLページがロードされたときに実行される)の中にパッケージします。[以前は例6-1、現在は変更]の場合、この関数はon_load_mapviewという名前です。
function on_load_mapview()
{
var baseURL = "http://"+document.location.host+"/mapviewer";
// Create an MVMapView instance to display the map
var mapview = new MVMapView(document.getElementById("map"), baseURL);
// Add a map tile layer as background.
mapview.addMapTileLayer(new MVMapTileLayer("mvdemo.demo_map"));
// Add a theme-based FOI layer to display customers on the map
var themebasedfoi = new MVThemeBasedFOI('themebasedfoi1','mvdemo.customers');
themebasedfoi.setBringToTopOnMouseOver(true);
mapview.addThemeBasedFOI(themebasedfoi);
// Set the initial map center and zoom level
mapview.setCenter(MVSdoGeometry.createPoint(-122.45,37.7706,8307));
mapview.setZoomLevel(4);
// Add a navigation panel on the right side of the map
mapview.addNavigationPanel('east');
// Add a scale bar
mapview.addScaleBar();
// Display the map.
mapview.display();
}
この関数は、<body>要素のonload属性で指定するため、Webページがロードされた後に実行されます。[以前は例6-1、現在は変更]の場合、このコードは次のとおりです。
<body onload= JavaScript:on_load_mapview() >
その他のHTML要素およびJavaScriptコード: アプリケーションに固有なその他のユーザー・インタフェースおよび制御ロジックを実装します。[以前は例6-1、現在は変更]の[以前は例6-1、現在は変更]の場合、JavaScript関数setLayerVisibleは、ユーザーが顧客の表示チェック・ボックスを選択または選択解除したときにテーマベースFOI層を表示または非表示にするために実装されています。setLayerVisible関数のコードは、次のとおりです。
function setLayerVisible(checkBox)
{
// Show the theme-based FOI layer if the check box is checked
// and hide the theme-based FOI layer otherwise.
if(checkBox.checked)
themebasedfoi.setVisible(true) ;
else
themebasedfoi.setVisible(false);
}
この関数は、チェック・ボックスを定義する<INPUT>要素のonclick属性で指定されているので、該当するチェック・ボックスをユーザーがクリックするたびに実行されます。[以前は例6-1、現在は変更]の場合、このコードは次のとおりです。
<INPUT TYPE="checkbox" onclick="setLayerVisible(this)" checked/>Show customers
V2 APIを使用したアプリケーションの開発は、V1 APIのプロセスと似ています。ベース・マップ、マップ・タイル層およびインタラクティブな層またはテーマに使用するすべての空間データがOracleデータベースに格納されている場合、Map Builderツールを使用したマップ作成プロセスは、どちらのAPIでも同じです。
基礎となるベース・マップおよび層をOracleデータベース内で管理する場合、クライアント・アプリケーションに表示される各マップ・タイル層は、対応するデータベース・メタデータ・エントリをUSER_SDO_CACHED_MAPSメタデータ・ビュー内に保持している必要があります(第2.9.4項を参照)。同様に、インタラクティブな層がデータベース・コンテンツに基づいている場合、その層はメタデータ・エントリをUSER_SDO_THEMESビュー内に保持している必要があります(第2.9項、特に第2.9.2項を参照)。このようなタイル層とインタラクティブな層、およびそれらのスタイルとスタイリング・ルールは、Map Builderツールを使用して定義できます(第7章を参照)。
バージョン2 (V2) APIを使用してOracle Mapsアプリケーションを開発するには、次の基本的な手順に従います。
oraclemapsv2.jsライブラリをインポートします。
このAPIは、MapViewer EARアーカイブの一部としてパッケージされた単一のJavaScriptライブラリに含まれています。
MapViewerをデプロイおよび起動した後、次のように<script>タグを通じてライブラリをロードします。
<script type="text/javascript" url="http://localhost:8080/mapviewer/jslib/v2/oraclemapsv2.js"/>
HTMLページ内で、インタラクティブなマップを格納する<DIV>タグを作成します。(これはV1 APIの場合と同じです。)
すべてのマップ表示関数を処理するクライアント側マップ・インスタンスを作成します。
クラスの名前はOM.Mapであり、これがV2 APIのメインのエントリ・ポイントです。このため、V2のOM.Mapは、V1のMVMApViewと同等です。
マップ汎用を設定します(次のオプション手順を実行した場合は除く)。
基本的に、マップ汎用はマップ全体のエクステント、ズーム・レベルの数、およびオプションで各ズーム・レベルの解像度(ピクセル当たりのマップ単位)を定義します。V1 APIでは、この情報はタイル層の定義に含まれています。これらはV2でも引き続き機能しますが、V2ではインタラクティブなベクター層やテーマを表示するために、事前定義済タイル層は必要ありません。たとえば、地域別の売上を示すインタラクティブなテーマ・マップには、バックグラウンド・マップやタイル層は必要ありません。
(オプション)バックグラウンド・マップとして機能するタイル層を追加します。
タイル層には、データベースのmvdemo.demo_mapや、サポートされているNokia Mapsなどのサービスを使用できます。タイル層を追加した場合、マップ汎用も暗黙的に定義されるため、前述の手順(マップ汎用の設定)を実行する必要はありません。
1つまたは複数のインタラクティブなベクター層を追加します。
OM.layer.VectorLayerは、V1 APIのMVThemeBasedFOIと同等です。主な相違点は、OM.VectorLayerがHTML5 (CanvasまたはSVG)テクノロジを使用して、すべてのデータをブラウザ内にレンダリングすることです。このため、別途指定されていないかぎり、ベクター層のすべてのコンテンツを一度ロードした後に、マップのズームまたはパン操作でデータベースへの問合せやデータのフェッチが発生することはありません。
1つまたは複数のマップ・コントロール、ツールおよびその他のアプリケーション固有のUIコントロールを追加して、表示する層、スタイリングおよびビジュアル効果をユーザーが設定できるようにします。
テーマがデフォルトでストリーミングされるのを防ぐ必要がある場合は、認証の追加によって保護する必要があります。つまり、MapViewer web.xmlファイルにセキュリティ制約を追加し、様々なテーマへのアクセスを認可するmds.xmlファイルを構成します。詳細は、1.6.2.16項「HTML5 API用のマップ・データ・サーバーの構成および保護」を参照してください。
V2 APIの使用の詳細な手順と関連情報は、Oracle提供のチュートリアルとデモを参照してください。
関連項目:
Oracle Maps V2アプリケーションはWebブラウザ内で動作し、その要件はHTML5 (Canvas)のサポートとJavaScriptの有効化のみです。追加のプラグインは必要ありません。
[以前は例6-1、現在は変更]に示すように、一般的にOracle MapsアプリケーションのソースはHTMLページにパッケージされますが、それは次の部分から構成されます。
<script>要素 - Oracle Maps V2クライアント・ライブラリをブラウザのJavaScriptエンジンにロードします。例:
<script src="/mapviewer/jslib/v2/oraclemapsv2.js"></script>
HTML <div>要素 - マップを格納します。例:
<div id="map" style="width: 600px; height: 500px"></div>
JavaScriptコード - マップ・クライアント・インスタンスを作成し、初期マップ・コンテンツ(タイルおよびベクター層)、初期マップの中心とズームおよびマップ・コントロールを設定します。このコードは、HTMLページがロードされたとき、または準備完了になったときに実行される関数の中にパッケージします。この関数は、HTMLページの<body>要素のonload属性で指定します。例:
function on_load_mapview()
{
var baseURL = "http://"+document.location.host+"/mapviewer";
// Create an OM.Map instance to display the map
var mapview = new OM.Map(document.getElementById("map"),
{
mapviewerURL:baseURL
});
// Add a map tile layer as background.
var tileLayer = new OM.layer.TileLayer(
"baseMap",
{
dataSource:"mvdemo",
tileLayer:"demo_map",
tileServerURL:baseURL+"/mcserver"
});
mapview.addLayer(tileLayer);
// Set the initial map center and zoom level
var mapCenterLon = -122.45;
var mapCenterLat = 37.7706;
var mapZoom = 4;
var mpoint = new OM.geometry.Point(mapCenterLon,mapCenterLat,8307);
mapview.setMapCenter(mpoint);
mapview.setMapZoomLevel(mapZoom);
// Add a theme-based FOI layer to display customers on the map
customersLayer = new OM.layer.VectorLayer("customers",
{
def:
{
type:OM.layer.VectorLayer.TYPE_PREDEFINED,
dataSource:"mvdemo", theme:"customers",
url: baseURL,
loadOnDemand: false
}
});
mapview.addLayer(customersLayer);
// Add a navigation panel on the right side of the map
var navigationPanelBar = new OM.control.NavigationPanelBar();
navigationPanelBar.setStyle(
{backgroundColor:"#FFFFFF",buttonColor:"#008000",size:12});
mapview.addMapDecoration(navigationPanelBar);
// Add a scale bar
var mapScaleBar = new OM.control.ScaleBar();
mapview.addMapDecoration(mapScaleBar);
// Display the map.
// Note: Change from V1. In V2 initialization and display is done just once
mapview.init();
}
その他のHTML要素およびJavaScriptコード - アプリケーション固有のその他のユーザー・インタフェースおよび制御ロジックを実装します。たとえば、HTML <input>要素をJavaScript関数setLayerVisibleとともに使用して、層の表示コントロールを実装します。setLayerVisible関数のコードは、次のとおりです。
function setLayerVisible(checkBox)
{
// Show the customers vector layer if the check box is checked and
// hide it otherwise.
if(checkBox.checked)
customersLayer.setVisible(true) ;
else
customersLayer.setVisible(false);
}
この関数は、チェック・ボックスを定義する<input>要素のonclick属性で指定します。次の例では、ユーザーが「Show Customers」チェック・ボックスをクリックしたときに関数を実行します。
<INPUT TYPE="checkbox" onclick="setLayerVisible(this)" checked/>Show Customers
アプリケーションでは、Google MapsタイルまたはMicrosoft Bing Mapsタイルを組込みのマップ・タイル層として表示できます。これを行うには、MVGoogleTileLayerまたはMVBingTileLayerのインスタンスをそれぞれ作成し、マップ・ウィンドウに追加します。Oracle Mapsクライアントは、内部的に公式のGoogle MapsまたはBing Maps APIを使用して、Google MapsまたはMicrosoft Bing Mapsサーバーによって直接提供されるマップを表示します。
Google Mapsタイルを使用するには、タイルの使用方法がGoogleによって規定されているサービス条件に適合する必要があります(https://developers.google.com/readme/termsを参照)。
Bing Mapsタイルを使用するには、Bing Mapsアカウントを取得する必要があります。使用方法は、Microsoftが規定するライセンス要件に適合する必要があります(http://www.microsoft.com/maps/を参照)。
Google MapsまたはMicrosoft Bing Mapsタイル層の上部にユーザー独自の空間データをオーバーレイする必要がある場合は、6.5項「Spherical Mercator座標系へのデータ変換」を参照してください。
次の項では、組込みマップ・タイル層を使用する2つのオプションについて説明します。
組込みのマップ・タイル層をクライアント側で定義するには、MVGoogleTileLayerまたはMVBingTileLayerオブジェクトを作成し、それをMVMapViewオブジェクトに追加する必要があります。(Oracle Fusion Middlewareリリース11.1.1.6では、MVGoogleTileLayerはデフォルトでGoogle Mapsバージョン3 APIを使用し、MVBingTileLayerはデフォルトでBing Mapsバージョン7 APIを使用します。)
たとえば、Googleタイルを使用するには、マップにGoogleタイル層を追加します。
mapview = new MVMapView(document.getElementById("map"), baseURL);
tileLayer = new MVGoogleTileLayer() ;
mapview.addMapTileLayer(tileLayer);
アプリケーションで、メソッドMVGoogleTileLayer.setMapTypeまたはMVBingTileLayer.setMapTypeを起動して、マップ・タイプをマップ・プロバイダがサポートするタイプのいずれか(道路、衛星、ハイブリッドなど)に設定できます。
使用例と詳細は、JavaScript APIドキュメントのMVGoogleTileLayerとMVBingTileLayer、およびチュートリアル・デモの組込みGoogle Mapsタイル層と組込みBing Mapsタイル層を参照してください。
サーバー側で定義した組込みマップ・タイル層は、クライアント側で標準のMapViewerタイル層として使用できます。サーバー側で組込みマップ・タイル層を定義するには、次の手順に従います。
MapViewer管理ページにログインします(1.6.1項を参照)。
マップ・タイル層の管理タブを選択し、「作成」をクリックします。
マップ・ソースのタイプを選択するように求められたら、Google MapsまたはBing Mapsを選択し、「続行」をクリックします。
タイル層を定義するデータソースを選択します。
マップ・プロバイダから取得したライセンス・キーを設定します。
「送信」をクリックして、タイル層を作成します。
サーバー側で作成した組込みマップ・タイル層は、MapViewerが提供する他のタイル層のように使用できます。外部JavaScriptライブラリをロードするために、<script>タグを追加する必要はありません。
次の例は、サーバー側に定義したBing Mapsタイル層を示しています。
mapview = new MVMapView(document.getElementById("map"), baseURL);
// The Bing tile layer is defined in data source "mvdemo".
tileLayer = new MVMapTileLayer("mvdemo.BING_MAP") ;
mapview.addMapTileLayer(tileLayer);
アプリケーションで、メソッドMVMapTileLayer.setMapTypeを起動して、マップ・タイプをマップ・プロバイダがサポートするタイプのいずれか(道路、衛星、ハイブリッドなど)に設定できます。
Google MapsやMicrosoft Bing Mapsのような一般的なオンライン・マップ・サービスは、地図にSpherical Mercator投射を使用します。Oracle Databaseリリース11.1.0.7より前の製品を使用し、Google MapsやMicrosoft Bing Mapsといったタイル層の上に独自の空間データをオーバーレイする必要がある場合は、タイル層の座標系と独自のデータ座標系間で座標系の変換を正しく処理できるように、データベースを設定する必要があります(2つの座標系が異なる場合)。
|
注意: この項のアクションを実行するには、データベースのリリースが10.2.0.1以降である必要があります。 |
Google MapsはSpherical Mercator座標系(EPSG: 3785)を使用しています。これは、Yahoo! MapsやMicrosoft Bing Mapsなどの商用APIプロバイダの間でも広く使用されています。この座標系(SRID 3785)は、Oracle Spatial and Graphリリース11.1.0.7より前の製品では提供されていませんでした。独自データをこの座標系に変換するためにMapViewerおよびOracle Spatial and Graphを有効にするには、先にこの座標系定義をOracleデータベースに追加する必要があります(まだ定義されていない場合)。
この座標系が定義されているかチェックするには、以下の文を入力します。
SELECT srid FROM mdsys.cs_srs WHERE srid=3785;
この文で行が返された場合、この項のアクションを実行する必要はありません。この文で行が返されない場合は、この項のアクションを実行して、独自の空間データをタイル層の上にオーバーレイできるようにする必要があります。
次の手順を実行します。
DBAロールを持つユーザーなど、権限のあるユーザーとしてデータベースに接続します。
次のようにcsdefinition.sqlスクリプトを実行します。($MAPVIEWER_HOMEを、MapViewerがデプロイされているWebLogic Serverインスタンスのルート・ディレクトリと置き換え、コマンドを1行で入力します。)
Linux: $MAPVIEWER_HOME/j2ee/home/applications/mapviewer/web/WEB-INF/admin/csdefinition.sql
Windows: $MAPVIEWER_HOME\j2ee\home\applications\mapviewer\web\WEB-INF\admin\csdefinition.sql
必要に応じて、指定の座標系からSpherical Mercator座標系に変換する際に、Oracle Spatial and Graphがデータ変換をスキップするように変換ルールを作成します。このような変換ルールを作成する必要があるかどうか判断するには、6.5.1項を参照してください。
パフォーマンスを向上させるために空間データを事前に変換するか、MapViewerによって実行時にデータ変換を行ってください(「オンザフライ」)。データベースのリリースが10.2.0.4より前の場合、事前に変換するしか手段はありません。
すべてのデータをSpherical Mercator座標系に事前に変換するには、すべてのデータにSDO_CS.TRANSFORM_LAYERプロシージャを使用し、変換されたデータをマッピングに使用します。(Oracle Spatial and Graph開発者ガイドのSDO_CS.TRANSFORM_LAYERのリファレンスの項を参照してください。)
MapViewerで実行時にデータを変換する場合、マッピングに使用する前にデータを変換しないでください。
空間データは通常、WGS84やBNGなどの楕円データに基づく座標系で使用されます。この場合、データをSpherical Mercator座標系に変換する際に、Oracle Spatial and Graphはデフォルトでデータ変換を適用します。これによって、ユーザーのデータとGoogle Mapsや他のマップ・サービス・タイルとの間で、わずかな不一致や誤差が発生します。この問題を解決するには、指定の座標系からSpherical Mercator座標系に変換する際に、Oracle Spatial and Graphがデータ変換をスキップするように変換ルールを作成します。
例6-4は、csdefinition.sqlスクリプトに含まれている、こうしたトランスフォーメーション・ルールを作成するSQL文を示します。ただし、使用する空間データの座標系が例6-4に示すルールの対象でない場合は、データの座標系がこれらのルールの対象でなければ、独自のルールを作成できます。(座標系の変換ルールの作成の詳細は、Oracle Spatial and Graph開発者ガイドを参照してください。)
図6-4 csdefinition.sqlスクリプトに定義されたトランスフォーメーション・ルール
-- Create the tfm_plans, that is, the transformation rules. -- Note: This will result in an incorrect conversion since it ignores a datum -- datum between the ellipsoid and the sphere. However, the data will match -- up better on Google Maps. -- For wgs84 (8307) call sdo_cs.create_pref_concatenated_op( 83073785, 'CONCATENATED OPERATION 8307 3785', TFM_PLAN(SDO_TFM_CHAIN(8307, 1000000000, 4055, 19847, 3785)), NULL); -- For 4326, EPSG equivalent of 8307 call sdo_cs.create_pref_concatenated_op( 43263785, 'CONCATENATED_OPERATION_4326_3785', TFM_PLAN(SDO_TFM_CHAIN(4326, 1000000000, 4055, 19847, 3785)), NULL); -- For OS BNG, Oracle SRID 81989 call sdo_cs.create_pref_concatenated_op( 819893785, 'CONCATENATED OPERATION 81989 3785', TFM_PLAN(SDO_TFM_CHAIN(81989, -19916, 2000021, 1000000000, 4055, 19847, 3785)), NULL); -- For 27700, EPSG equivalent of 81989 call sdo_cs.create_pref_concatenated_op( 277003785, 'CONCATENATED_OPERATION_27700_3785', TFM_PLAN(SDO_TFM_CHAIN(27700, -19916, 4277, 1000000000, 4055, 19847, 3785)), NULL); commit;
Oracle Maps JavaScript APIでは、定義またはタイル画像がサーバー側に格納されていない場合でも、外部タイル層の動的な表示がサポートされます。基本的には、クラスMVCustomTileLayerを使用して、ESRI ArcGISタイル・サーバー、OpenStreetマップ・タイル・サーバー、その他のベンダー固有のマップ・タイル・サーバーなど、Web上にある任意の外部マップ・タイル・サーバーから直接提供されるタイル層を参照して表示できます。
これを行うには、新しいMVCustomTileLayerインスタンスの作成時に、次のことを行う必要があります。
マップ・タイル層の構成(特に座標系、境界およびズーム・レベル)を確認する。
Oracle Mapsからのタイル・リクエストを外部タイル・サーバーからのタイルURLに変換できる関数を提供する。
タイル層の構成にはJSONオブジェクトの形式が使用され、通常は次の例のような形式になります。
var mapConfig = {mapTileLayer:"custom_map", format:"PNG",
coordSys:{srid:8307,type:"GEODETIC",distConvFactor:0.0, minX:-180.0,minY:-90.0,maxX:180.0,maxY:90.0},
zoomLevels:
[{zoomLevel:0,name:"level0",tileWidth:15.286028158107968,tileHeight:15.286028158107968,tileImageWidth:256,tileImageHeight:256},
{zoomLevel:1,name:"level1",tileWidth:4.961746909541633,tileHeight:4.961746909541633,tileImageWidth:256,tileImageHeight:256},
{zoomLevel:2,name:"level2",tileWidth:1.6105512127664132,tileHeight:1.6105512127664132,tileImageWidth:256,tileImageHeight:256},
{zoomLevel:3,name:"level3",tileWidth:0.5227742142726501,tileHeight:0.5227742142726501,tileImageWidth:256,tileImageHeight:256},
{zoomLevel:4,name:"level4",tileWidth:0.16968897570090388,tileHeight:0.16968897570090388,tileImageWidth:256,tileImageHeight:256},
{zoomLevel:5,name:"level5",tileWidth:0.05507983954154727,tileHeight:0.05507983954154727,tileImageWidth:256,tileImageHeight:256},
{zoomLevel:6,name:"level6",tileWidth:0.017878538533723076,tileHeight:0.017878538533723076,tileImageWidth:256,tileImageHeight:256},
{zoomLevel:7,name:"level7",tileWidth:0.005803187729944108,tileHeight:0.005803187729944108,tileImageWidth:256,tileImageHeight:256},
{zoomLevel:8,name:"level8",tileWidth:0.0018832386690789012,tileHeight:0.0018832386690789012,tileImageWidth:256,tileImageHeight:26},
{zoomLevel:9,name:"level9",tileWidth:6.114411263243185E-4,tileHeight:6.114411263243185E-4,tileImageWidth:256,tileImageHeight:256} ]
};
Oracle Mapsからのタイル・リクエストを外部タイル・サーバーからのタイルURLに変換できる関数を提供するには、次の例のような関数を指定します。
function getMapTileURL(minx, miny, width, height, level)
{
var x = (minx-mapConfig.coordSys.minX)/mapConfig.zoomLevels[level].tileWidth ;
var y = (miny-mapConfig.coordSys.minY)/mapConfig.zoomLevels[level].tileHeight ;
return "http://localhost:8888/mapviewer/mcserver?request=gettile&format=" + mapConfig.format + "&zoomlevel="+level+"&mapcache=mvdemo.demo_map&mx=" + Math.round(x) + "&my=" + Math.round(y) ;
}
前述の例において、アプリケーションによって実装された関数getMapTileURL()は、マップ・タイル画像を外部タイル・サーバーからフェッチし、そのマップ・タイル画像の左上隅を、Oracle Mapsクライアントによって指定されたマップ位置(minx,miny)に配置する、有効なURLを提供します。各マップ・タイル画像には、指定されたサイズ(width,height)および指定されたズーム・レベル(level)が使用されます。この特定の例で実際に返されるのは、ローカルMapViewerタイル・サーバーからのgettile URLですが、この方法はMapViewer以外のどのタイル・サーバーにも適用できます。
新しいカスタム・タイル層は、組込みのマップ・タイル層であるかのように、クライアントmapViewerに追加されます。
