1. マップ・ビジュアライゼーション開発者ガイド
  2. Oracle Maps

4 Oracle Maps

Oracle Mapsは、Webベースの高性能な対話型マッピング・アプリケーションを開発するための一連のテクノロジの名前です。

Oracle Mapsは、マップ視覚化コンポーネントに含まれています。

マップ視覚化コンポーネントによって、有効なライセンスを持ち、マップ・タイル・プロバイダの使用条件に準拠するユーザーが、ライセンスされているサービスからマップ・タイルを表示できます。

  • Oracle Maps JavaScript API
    Oracle Maps JavaScriptクライアントは、ブラウザベースのマップ視覚化エンジンであり、マップ・タイル・サーバーの上位で動作し、HTML5テクノロジを使用します。
  • Oracle Mapsアプリケーションの開発
    このトピックは、Oracle Mapsアプリケーションの開発方法を説明しています。
  • Google Mapsの使用
    マップ・ウィンドウにMVGoogleTileLayerのインスタンスを作成および追加することで、アプリケーションでGoogle Mapsタイルを組込みタイル層として表示できます。
  • Spherical Mercator座標系へのデータ変換
    Google Mapsのような一般的なオンライン・マップ・サービスは、地図にSpherical Mercator投射を使用します。
  • 動的タイル層の使用
    動的タイル層とは、クライアント側で定義されるタイル層です。

4.1 Oracle Maps JavaScript API

Oracle Maps JavaScriptクライアントは、ブラウザベースのマップ視覚化エンジンであり、マップ・タイル・サーバーの上位で動作し、HTML5テクノロジを使用します。

次の機能が実装されています。

  • マップ・タイル・サーバーからマップ・タイルをフェッチし、マップ・タイル層としてWebブラウザに表示する機能。

  • マップ・ナビゲーション用のドラッグ、機能のクリック、矩形の描画、レッドライニングなどのユーザー操作を制御する機能。

    矩形の描画とは、アプリケーション・ユーザーが矩形の1つの隅をクリックした後、マウス・ボタンを押したままマウスを対角の隅までドラッグし、マウス・ボタンを離して矩形を作成することです。

    レッドライニングとは、アプリケーション・ユーザーがマウス・ボタンをクリックした後、マウスを移動しクリックを複数回実行する(各クリックにより、まっすぐな線分を使用してレッドラインを伸ばす)ことにより、ポリゴンまたはポリラインを作成することです。(多くの場合レッドラインの描画は赤色でレンダリングされますが、任意の色を使用する線スタイルも指定できます。)

これらの機能にアクセスするには、JavaScript API (いくつかのJavaScriptクラスから構成される)を使用します。Oracle Maps JavaScript API内の全クラスの詳細は、Javadocスタイルのリファレンス・ドキュメント(mvdemo.earファイルに同梱されており、http://host:port/mvdemo/api/oracle_maps_html5_api.jspで利用可能)を参照してください

APIのチュートリアルとデモは、ルート・コンテキスト・パス/mvdemoで、スタンドアロンのパッケージ・アプリケーションとして提供されます。このチュートリアルでは、まず基本事項(マップ・タイル層の表示、ナビゲーション・パネルの追加、インタラクティブな地物と情報ウィンドウの表示)について説明した後、より複雑なトピック(イベント・リスナーの登録、プログラムによるスタイルの作成と使用、空間フィルタ処理など)に移ります。

すべてのチュートリアルは、MVDEMOサンプル・データセット(Oracle Technology Networkのマップ視覚化コンポーネント・ページから入手可能)に基づいており、mvdemoという名前のデータソースを前提としています。チュートリアル・ページには、3つのパネルがあります。左にはサンプル・コード(デモ)のタイトルがリストされます。いずれかをクリックすると、マップ(そのサンプル・コードの実行結果)が右上のパネルに表示されます。下のパネルには「JavaScript」および「HTML」というタブがあり、それぞれのタブに、選択したデモのJavaScriptおよびHTMLコードが表示されます。

4.1.1 Oracle Maps JavaScript APIについて

Oracle Maps JavaScript APIは、最新のブラウザおよびHTML5の機能を利用します。次のような機能があります。

  • maps.oracle.com、Nokia Maps、OpenStreet Mapsなどのマッピング・サービス・プロバイダをはじめとする、様々なサード・パーティのマップ・タイル・サービスに対する組込みのサポート

  • レンダリング・スタイルおよび効果(グラデーション、アニメーション、ドロップ・シャドウなど)のオンザフライ適用による、クライアント側での地理空間データの優れたレンダリング

  • 多くのポイントの自動クラスタリングとクライアント側でのヒート・マップの生成

  • 属性値と空間述語(問合せウィンドウ)に基づく、クライアント側での地物のフィルタ処理

  • 優れた一連の組込みコントロールおよびツール(カスタマイズ可能なナビゲーション・バーと情報ウィンドウ、構成可能な層コントロール、レッドライン・ツール、距離測定ツールなど)

既存のサーバー側の事前定義済スタイルおよびテーマは、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
            }
  });

APIには、次の最上位クラスおよびサブパッケージがあり、これらはすべてネームスペースOMに含まれています。

  • Mapクラスは、このAPIのメイン・クラスです。

  • Featureクラスは、個々の地理的地物を表します。

  • MapContextクラスは、現在のマップの中心点やズーム・レベルなど、いくつかの重要なコンテキスト情報をカプセル化した最上位クラスです。通常はイベント・リスナーに渡されます。

  • controlパッケージには、ナビゲーション・バーや概要マップなど、すべてのマップ・コントロールが含まれています。

  • eventパッケージには、すべてのマップおよび層イベント・クラスが含まれています。

  • filterパッケージには、表示したベクター層の地物を選択またはサブセット化するためのすべてのクライアント側フィルタ(空間またはリレーショナル)が含まれています。

  • geometryパッケージには、様々なジオメトリ・クラスが含まれています。

  • layerパッケージには、様々なタイルおよびベクター層クラスが含まれています。タイル層クラスには、Oracle、Nokia、OpenStreetMapなど、いくつかのオンライン・マップ・サービスへのアクセスが含まれています。ベクター層は、インタラクティブな機能層です。

  • infowindowパッケージには、カスタマイズ可能な情報ウィンドウと、それらのスタイルが含まれています。

  • styleパッケージには、クライアント側のベクター・データに適用できるスタイルが含まれています。また、アニメーション、グラデーション、ドロップ・シャドウなどのビジュアル効果も含まれています。

  • toolパッケージには、距離測定ツール、レッドライン・ツール、ジオメトリ描画ツールなど、様々なマップ・ツールが含まれています。

  • universeパッケージには、組込み(事前定義済)マップ汎用が含まれています。マップ汎用は、マップ・コンテンツの枠ボックスと一連のズーム・レベル定義を定義します。

  • utilパッケージには、様々なユーティリティ・クラスが含まれています。

  • visualfilterパッケージでは、グラデーションやドロップ・シャドウなど、様々なビジュアル効果を実現するためのインタフェースが提供されます。

OM.Mapは、Webブラウザ内の全マップ操作におけるメインのエントリ・クラスです。このクラスや他のクラスにより、アプリケーション固有のロジック、操作および双方向性をWebマッピング・アプリケーションに追加するためのインタフェースが提供されます。次のようなアプリケーション・ロジックおよび操作があります。

  • マップ・クライアント・インスタンスを作成し、それをWebページ内で作成したマップ・コンテナDIVオブジェクトと関連付ける。

  • マップの中心やズーム・レベルなどのマップ・パラメータを構成するもの。

  • マップ・タイル層を作成し、操作する(オプション)。マップ・タイル層は不要です。アプリケーションに含めることができるのは、ズーム・レベルとスケールをプログラムによって定義するカスタム汎用を使用する、インタラクティブなベクター層のみです。

  • ベクター層を作成し、操作する。

  • マップ上に情報ウィンドウを表示するもの。

  • マップ・タイトル、著作権表示、マップ・コントロールなどの固定のマップ装飾を作成する。

  • ナビゲーション・パネル、矩形ツール、円形ツール、スケール・バー、概要マップ・パネルなどの組込みユーティリティにアクセスする。

  • イベント・リスナーを使用してイベント処理を(したがって、マップの相互作用も)カスタマイズする。

Oracle Maps APIの使用に関するその他の注意点および考慮事項を次に示します。

  • 前のバージョンのAPIの「FOIサーバー」に対応するデータ・サーバーは、地物のベクター・ジオメトリと属性をクライアントにストリーミングして、ローカルでレンダリングを実行できるようにします。したがって、前のバージョンの「FOI層」は、ベクター層と呼ばれます。

  • インタラクティブなベクター層を表示するために、バックグラウンド・マップ・タイル層は必要ありません。たとえば、アプリケーションがバックグラウンド・タイル層を使用することなく、州のテーマ・マップを(人口の五分位値別に色分けするなどして)表示することが可能です。

  • APIはJQueryおよびJQueryUIに依存し、これらをインクルードします。このため、oraclemapsv2.jsはjquery-1.7.2.min.jsおよびjquery-ui-1.8.16.min.jsをインクルードします。アプリケーションでもJQueryとJQueryUIを使用し、これらをすでにインクルードしている場合は、Oracle Mapsライブラリをロードするかわりに、ファイルoraclemapsv2_core.jsを<script>タグ内で使用します。つまり、次を使用します。

    <script src="/mapviewer/jslib/v2/oraclemapsv2_core.js"></script>

    次は使用しません。

    <script src="/mapviewer/jslib/v2/oraclemapsv2.js"></script>

APIを使用したアプリケーションの開発の詳細は、「Oracle Mapsアプリケーションの開発」とOracle提供のチュートリアルおよびデモを参照してください。

4.2 Oracle Mapsアプリケーションの開発

このトピックは、Oracle Mapsアプリケーションの開発方法を説明しています。

基礎となるベース・マップおよび層をOracleデータベース内で管理する場合、クライアント・アプリケーションに表示される各マップ・タイル層は、対応するデータベース・メタデータ・エントリをUSER_SDO_CACHED_MAPSメタデータ・ビュー内に保持している必要があります(「xxx_SDO_CACHED_MAPSビュー」を参照)。同様に、インタラクティブな層がデータベース・コンテンツに基づいている場合、その層はメタデータ・エントリをUSER_SDO_THEMESビュー内に保持している必要があります(「マップ・ビジュアライザ・メタデータ・ビュー」、特に「xxx_SDO_THEMESビュー」を参照)。このようなタイル層とインタラクティブな層、およびそれらのスタイルとスタイリング・ルールは、Map Builderツールを使用して定義できます(「Oracle Map Builderツール」を参照)。

APIを使用してOracle Mapsアプリケーションを開発するには、次の基本的な手順に従います。

  1. oraclemapsv2.jsライブラリをインポートします。

    このAPIは、マップ視覚化コンポーネントEARアーカイブの一部としてパッケージされた単一のJavaScriptライブラリに含まれています。

  2. マップ視覚化コンポーネントをデプロイおよび起動した後、次のように<script>タグを通じてライブラリをロードします。 

    <script  type="text/javascript" url="http://localhost:8080/mapviewer/jslib/v2/oraclemapsv2.js"/>

    注意:

    (前述の例で示した)oraclemapsv2.jsにパッケージされているもの以外の特定のjQueryバージョンば必要な場合、まず適切なjQueryを追加し、その後にライブラリのリストを追加できます。次に例を示します。 

    <script src="your_preferred_jQuery_library_listed_here_first.js "></script>
<script src="v2/jquery/jquery.hammer-full.min.js"></script>
<script src="v2/jquery/jquery.i18n.properties-min-1.0.9.js"></script>
<script src="v2/jquery/jquery.mousewheel.min.js"></script>
<script src="v2/rtree/rtree-min.js"></script>
<script src="v2/fortknox-libs/fortknox-canvas.js"></script>
<script src="v2/oraclemapsv2_core.js"></script>

  3. HTMLページ内で、インタラクティブなマップを格納する<DIV>タグを作成します。

  4. すべてのマップ表示関数を処理するクライアント側マップ・インスタンスを作成します。

    クラスの名前はOM.Mapであり、これがAPIのメインのエントリ・ポイントです。

  5. マップ汎用を設定します(次のオプション手順を実行した場合は除く)。

    基本的に、マップ汎用はマップ全体のエクステント、ズーム・レベルの数、およびオプションで各ズーム・レベルの解像度(ピクセル当たりのマップ単位)を定義します。インタラクティブなベクター層やテーマを表示するために、事前定義済タイル層は必要ないことに注意してください。たとえば、地域別の売上を示すインタラクティブなテーマ・マップには、バックグラウンド・マップやタイル層は必要ありません。

  6. (オプション)バックグラウンド・マップとして機能するタイル層を追加します。

    タイル層には、データベースのmvdemo.demo_mapや、サポートされているNokia Mapsなどのサービスを使用できます。タイル層を追加した場合、マップ汎用も暗黙的に定義されるため、前述の手順(マップ汎用の設定)を実行する必要はありません。

  7. 1つまたは複数のインタラクティブなベクター層を追加します。

    OM.VectorLayerはHTML5 (CanvasまたはSVG)テクノロジを使用して、すべてのデータをブラウザ内にレンダリングします。このため、別途指定されていないかぎり、ベクター層のすべてのコンテンツを一度ロードした後に、マップのズームまたはパン操作でデータベースへの問合せやデータのフェッチが発生することはありません。

  8. 1つまたは複数のマップ・コントロール、ツールおよびその他のアプリケーション固有のUIコントロールを追加して、表示する層、スタイリングおよびビジュアル効果をユーザーが設定できるようにします。

テーマがデフォルトでストリーミングされるのを防ぐ必要がある場合は、認証の追加によって保護する必要があります。つまり、マップ視覚化コンポーネントweb.xmlファイルにセキュリティ制約を追加し、様々なテーマへのアクセスを認可するmds.xmlファイルを構成します。詳細は、「HTML5 API用のマップ・データ・サーバーの構成および保護」を参照してください。

APIの使用の詳細な手順と関連情報は、Oracle提供のチュートリアルとデモを参照してください。

4.2.1 APIを使用したクライアント・アプリケーションの作成

Oracle MapsアプリケーションはWebブラウザ内で動作し、その要件はHTML5 (Canvas)のサポートとJavaScriptの有効化のみです。追加のプラグインは必要ありません。

一般的にOracle MapsアプリケーションのソースはHTMLページにパッケージされますが、それは次の部分から構成されます。

  • <script>要素: Oracle Mapsクライアント・ライブラリをブラウザの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.
  // The 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

4.3 Google Mapsの使用

アプリケーションでは、Google Mapsタイルを組込みのマップ・タイル層として表示できます。これを行うには、MVGoogleTileLayerのインスタンスを、マップ・ウィンドウに作成および追加します。

内部ではOracle Mapsクライアントは、正式なGoogle Maps APIを使用してマップを表示します。このマップは、Google Mapsサーバーから直接サービスを受けます。

Google Mapsタイルを使用するには、タイルの使用方法がGoogleによって規定されているサービス条件に適合する必要があります(https://developers.google.com/readme/termsを参照)。

(Google Mapsタイル層の上に独自の空間データをオーバーレイする必要がある場合、「Spherical Mercator座標系へのデータ変換」も参照してください)。

次の項では、組込みマップ・タイル層を使用する2つのオプションについて説明します。

4.3.1 クライアント側でのGoogle Mapsタイル層の定義

組込みのマップ・タイル層をクライアント側で定義するには、MVGoogleTileLayerオブジェクトを作成し、それをMVMapViewオブジェクトに追加する必要があります。(Oracle Fusion Middlewareリリース11.1.1.6では、MVGoogleTileLayerはデフォルトでGoogle Mapsのバージョン3 APIを使用します。)

たとえば、Googleタイルを使用するには、マップにGoogleタイル層を追加します。

mapview = new MVMapView(document.getElementById("map"), baseURL);
tileLayer = new MVGoogleTileLayer() ;
mapview.addMapTileLayer(tileLayer);

アプリケーションで、メソッドMVGoogleTileLayer.setMapTypeを起動して、マップ・タイプをマップ・プロバイダがサポートするタイプのいずれか(道路、衛星、ハイブリッドなど)に設定できます。

使用例および詳細は、MVGoogleTileLayerのJavaScript APIドキュメントおよびチュートリアル・デモの組込みGoogle Mapsタイル層を参照してください。

4.3.2 サーバー側での組込みマップ・タイル層の定義

メタデータのサーバー側で組込みマップ・タイル層(外部タイル層とも呼ばれる)を定義し、クライアント側で標準マップ視覚化コンポーネント・タイル層として使用できます。 サーバー側で組込みマップ・タイル層を定義するには、次の手順に従います。

  1. マップ視覚化コンポーネントの「管理」ページにログインします(「マップ視覚化コンポーネントの「管理」ページへのログイン」を参照)。

  2. 「管理」タブを選択し、「タイル・レイヤーの作成」をクリックします。

  3. 「タイル・レイヤー・タイプ」では、 「Oracle Maps」、「Googleマップ」、「HEREマップ」、「OpenStreetMap」、「TomTomマップ」 または「LocationBoxマップ」を選択し、 「次」をクリックします。

  4. この外部タイル層に名前を指定し(GOOGLE_MAPなど)、タイル層定義を格納するデータ・ソースを選択します。

  5. マップ・プロバイダから取得したライセンス・キーおよびその他の関連プロパティ(特定の外部タイル層については詳細あり)を設定し、  「次」をクリックします。

  6. 外部タイル層のXMLの説明を確認します。「前」をクリックして前のページに移動し、変更を加えることができます。

  7. 「送信」をクリックして、タイル層を作成します。

サーバー側で作成した組込みマップ・タイル層は、MapViewerが提供する他のタイル層のように使用できます。外部JavaScriptライブラリをロードするために、<script>タグを追加する必要はありません。

次のコード・スニペットは、サーバー側に定義されたGoogle Mapsタイル層を示します。

 var tileLayer = new OM.layer.TileLayer("google1", {
      dataSource:"mvdemo", 
      tileLayer:"GOOGLE_MAP"
      });
	
  map.addLayer(tileLayer) ;

注意:

各組込みタイル層には独自の固有プロパティがあります。要件については、サービス・プロバイダに確認する必要がある場合があります。

Google Mapsを使用する場合は、次のプロパティを指定する必要がある場合があります。

  • key: Google Mapsから取得したキーです。

  • client: Google Mapsから取得できるオプションのプロパティであるクライアントIDです。クライアントIDが指定されている場合でも、キー・プロパティは必要です。

  • lib_url: Google Maps API URL (たとえばhttp://maps.google.com/maps/api/js?sensor=false)です。指定されていない場合は、デフォルト値が使用されます。

  • version: APIの現在のバージョンは3です。

  • mapTyelList: マップ・タイプのリストを指定できます。MVGoogleTileLayer.TYPE_ROAD; MVGoogleTileLayer.TYPE_SHADED; MVGoogleTileLayer.TYPE_SATELLITE; MVGoogleTileLayer.TYPE_HYBRID。

  • mapTypeVisible: ブール値trueまたはfalseの値は、マップ・タイプを選択するために、マップ・タイプ・ボタンを表示するかどうかを指定します。

4.4 Spherical Mercator座標系へのデータ変換

Google Mapsのような一般的なオンライン・マップ・サービスは、地図にSpherical Mercator投射を使用します。

Oracle Databaseリリース11.1.0.7より前の製品を使用し、Google Mapsといったタイル層の上に独自の空間データをオーバーレイする必要がある場合は、タイル層の座標系と独自のデータ座標系間で座標系の変換を正しく処理できるように、データベースを設定する必要があります(2つの座標系が異なる場合)。

注意:

この項のアクションを実行するには、データベースのリリースが10.2.0.1以降である必要があります。

Google Mapsは、Spherical Mercator座標系(EPSG: 3785)を使用しています。これはYahoo!マップなどの商用APIプロバイダでも幅広く使用されています。この座標系(SRID 3785)は、Oracle Spatial and Graphリリース11.1.0.7より前の製品では提供されていませんでした。独自データをこの座標系に変換するためにマップ視覚化コンポーネントおよびOracle Spatial and Graphを有効にするには、先にこの座標系定義をOracleデータベースに追加する必要があります(まだ定義されていない場合)。

この座標系が定義されているかチェックするには、以下の文を入力します。 

SELECT srid FROM mdsys.cs_srs WHERE srid=3785;

この文で行が返された場合、この項のアクションを実行する必要はありません。この文で行が返されない場合は、この項のアクションを実行して、独自の空間データをタイル層の上にオーバーレイできるようにする必要があります。

次の手順を実行します。

  1. DBAロールを持つユーザーなど、権限のあるユーザーとしてデータベースに接続します。

  2. 次のように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

  3. 必要に応じて、指定の座標系からSpherical Mercator座標系に変換する際に、Oracle Spatial and Graphがデータ変換をスキップするように変換ルールを作成します。このような変換ルールを作成する必要があるかどうか判断するには、「データ変換をスキップするトランスフォーメーション・ルールの作成」を参照してください。

  4. パフォーマンスを向上させるために空間データを事前に変換するか、マップ視覚化コンポーネントによって実行時にデータ変換を行ってください(「オンザフライ」)。データベースのリリースが10.2.0.4より前の場合、事前に変換するしか手段はありません。

    • すべてのデータをSpherical Mercator座標系に事前に変換するには、すべてのデータにSDO_CS.TRANSFORM_LAYERプロシージャを使用し、変換されたデータをマッピングに使用します。(Oracle Spatial and Graph開発者ガイドのSDO_CS.TRANSFORM_LAYERのリファレンスの項を参照してください。)

    • マップ視覚化コンポーネントで実行時にデータを変換する場合、マッピングに使用する前にデータを変換しないでください。

4.4.1 データ変換をスキップする変換ルールの作成

空間データは通常、WGS84やBNGなどの楕円データに基づく座標系で使用されます。この場合、データをSpherical Mercator座標系に変換する際に、Oracle Spatial and Graphはデフォルトでデータ変換を適用します。これによって、ユーザーのデータとGoogle Mapsや他のマップ・サービス・タイルとの間で、わずかな不一致や誤差が発生します。この問題を解決するには、指定の座標系からSpherical Mercator座標系に変換する際に、Oracle Spatial and Graphがデータ変換をスキップするように変換ルールを作成します。

例4-1は、csdefinition.sqlスクリプトに含まれている、こうしたトランスフォーメーション・ルールを作成するSQL文を示します。ただし、使用する空間データの座標系が例4-1に示すルールの対象でない場合は、データの座標系がこれらのルールの対象でなければ、独自のルールを作成できます。(座標系の変換ルールの作成の詳細は、Oracle Spatial and Graph開発者ガイドを参照してください。)

図4-1 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;

4.5 動的タイル層の使用

動的タイル層とは、クライアント側で定義されるタイル層です。

動的タイル層は、次の点で通常のタイル層とは異なります。

  • これはクライアント・アプリケーションによって定義されるため、USER_SDO_CACHED_MAPSメタデータによって事前に定義する必要はありません。

  • サーバーは、マップ・タイルをキャッシュしません。

  • マップ・タイル画像URL生成機能が提供されている場合、サード・パーティのマップ・サービスを使用できます。

したがって、動的タイル層は、クライアント・アプリケーションによって動的に定義可能であり、マップ画像は、マップ視覚化コンポーネント・サーバーまたはサード・パーティのマップ・サービスから取得されます。

4.5.1 動的タイル層の汎用および構成インスタンスの作成

動的タイル層インスタンスを作成するには、動的タイル層の汎用およびタイル層構成を作成する必要があります。

たとえば、baseURLという名前の変数が適切に定義され(http://myapp.mycorp.com/mapviewerなど)、指定されたデータ・ソースが存在しているものとします。タイル層の構成インスタンスおよび汎用インスタンスを作成する必要があります。Oracle Maps JavaScript API組込みの汎用を使用することも、独自のものを作成することもできます。わかりやすくするため、ここでは組込みの汎用を使用します。

タイル層構成インスタンスは、画像タイルのディメンションのみを定義する必要があり、タイル画像の幅および高さには256ピクセルが一般的に使用されます。次のコード・スニペットは、このインスタンスを作成します。

  var  myuniv= new OM.universe.LatLonUniverse();  // a built-in universe
  var  myconfig=new OM.layer.TileLayerConfig(  // a tile layer configure instance
          {
	        tileImageWidth: 256,  
	        tileImageHeight: 256
          });

4.5.2 ベース・マップを使用した動的タイル層の作成

マップ・コンテンツは、サーバー側マップ視覚化コンポーネントのベース・マップによってすでに定義されているため、ベース・マップを使用した動的タイル層の作成は最も簡単な方法です。次の手順に従います。

  1. ServerMapRequestインスタンスを作成し、そのプロパティを設定します。次に例を示します。 

            var req = new OM.server.ServerMapRequest(baseURL);
        req.setProperties({
            dataSource:"MVDEMO",
            basemap: 'demo_map',  // this basemap property defines the map contents
            transparent:true,
            antialiase:"false"
        });

  2. この動的タイル層のプロパティを含むオブジェクトを作成します。次に例を示します。

            var dtl_props = {  
            universe: myuniv,            
            tileLayerConfig: myconfig,
            tileServerURL: baseURL + "/omserver",  // map images come from this omserver
            enableUTFGrid: true,  // the UTFGrid is enabled
            enableUTFGridInfoWindow: true,  // the info window for displaying UTFGrid is enabled
            utfGridResolution: 4   // one grid cell represents 16 (4 by 4) image pixels
        };

    この例では、変数tileServerURLの文字列値は、マップ視覚化コンポーネント・サーバーを指しています。これは、Webアプリケーションがデプロイされているサーバーと同じサーバーまたは別のマップ視覚化コンポーネント・サーバー・インスタンスです。たとえば、次のフォームのいずれかになります。

    • 同じOracle Mapsサーバー・インスタンスからの場合です。次に例を示します。

      var baseURL=document.location.protocol+"//"+document.location.host+"/mapviewer";

    • 別のOracle Mapsサーバー・インスタンスからの場合です。次に例を示します。

      var baseURL="http://myapp.mycorp.com/mapviewer ";

  3. 動的タイル層を作成します。次に例を示します。

      var dynamic_tilelayer_1 = new OM.layer.DynamicTileLayer("dtl1", dtl_props, req);

    動的タイル層は、マップ視覚化コンポーネントのマップ・サーバー(omserver)からのマップ画像をリクエストし、これにより、フレッシュなマップ画像がレンダリングされ、画像はディスクにキャッシュされません。

前述の例では、動的タイル層を作成するために、3つの文が指定されています: (1) マップ・リクエスト・インスタンスの作成(ServerMapRequest)、(2) 動的タイル層関連のプロパティを含むオブジェクトの作成、(3) 動的タイル層のインスタンス化。

動的タイル層は、マップ視覚化コンポーネントのマップ・サーバー(omserver)からのマップ画像をリクエストし、これにより、フレッシュなマップ画像がレンダリングされ、画像はディスクにキャッシュされません。

4.5.3 事前定義済テーマを使用した動的タイル層の作成

動的タイル層を作成するための別の方法として、事前定義済テーマを使用する方法があります。次の手順に従います。

  1. ServerMapRequestインスタンスを作成し、そのプロパティを設定します。次に例を示します。 

            var req = new OM.server.ServerMapRequest(baseURL);
        req.setProperties({
            dataSource:"MVDEMO",
            transparent:true,
            antialiase:"false",
        });
        // the three themes below are defined in the metadata already.
        var t1 = new OM.server.ServerPredefinedTheme("THEME_DEMO_STATES");
        var t2 = new OM.server.ServerPredefinedTheme("THEME_DEMO_HIGHWAYS");
        var t3 = new OM.server.ServerPredefinedTheme("THEME_DEMO_CITIES");
        req.addThemes([t1, t2, t3]);

  2. この動的タイル層のプロパティを含むオブジェクトを作成します。次に例を示します。

            var dtl_props = {  
            universe: myuniv,            
            tileLayerConfig: myconfig,
            tileServerURL: baseURL + "/omserver",
            enableUTFGrid: true,
            enableUTFGridInfoWindow: true,
            utfGridResolution: 4
        };

  3. 動的タイル層を作成します。次に例を示します。

      var dynamic_tilelayer_2 = new OM.layer.DynamicTileLayer("dtl2", dtl_props, req);

    動的タイル層は、マップ視覚化コンポーネントのマップ・サーバー(omserver)からのマップ画像をリクエストし、これにより、フレッシュなマップ画像がレンダリングされ、画像はディスクにキャッシュされません。

サーバー・ベース・マップを指定するのではなく、この手法では、ServerMapRequestインスタンスがマップ視覚化コンポーネント・サーバーの事前定義済テーマを追加します。実用的な観点から、これにより、クライアント側のアプリケーションは、ビューUSER_SDO_THEMES内のサーバー側の定義済テーマを使用してタイル層を作成できます。

4.5.4 空間表を直接使用した動的タイル層の作成

ServerJBCThemeインスタンスを作成して、これらをServerMapRequestインスタンスに追加することで、動的タイル層に空間表を直接使用できます。次の手順に従います。

  1. スタイルを作成します。次に例を示します。 

            var myc1 = new OM.style.Color({
            styleName: "mycolor1",
            stroke: "#333333", 
            strokeOpacity: 1.0,
            fill: "#F2EFE9", 
            fillOpacity: 1.0
        });

  2. JDBCテーマを作成し、そのプロパティを設定します。空間表は、SQL問合せ文で使用されます。文は、文字列タイプの変数として、OM.server.ServerJDBCThemeインスタンス内の属性として設定されます。次に例を示します。 

            var jdbcTStates= new OM.server.ServerJDBCTheme('theme_jdbc_states');
        jdbcTStates.setDataSourceName('mvdemo');
        jdbcTStates.setSRID('8307');
        jdbcTStates.setGeometryColumnName('geom');
        var sql='select totpop, poppsqmi, state, state_abrv, geom from states'; // the query
        jdbcTStates.setQuery(sql);  // set the SQL string
        jdbcTStates.addInfoColumn({column: 'state_abrv', name:'State'});
        jdbcTStates.addInfoColumn({column: 'totpop', name:'Population'});
        jdbcTStates.addInfoColumn({column: 'poppsqmi', name:'Pop. Density'});
        jdbcTStates.setRenderingStyleName('mycolor1');

  3. ServerMapRequestインスタンスを作成し、そのプロパティを設定します。次に例を示します。 

            var req = new OM.server.ServerMapRequest(baseURL);
        req.setProperties({
            dataSource:"MVDEMO",
            transparent:true,
            antialiase:"false",
        });
        req.addTheme(jdbcTStates);
        req.addStyle(myc1);

  4. この動的タイル層のプロパティを含むオブジェクトを作成します。次に例を示します。

            var dtl_props = {  
            universe: myuniv,            
            tileLayerConfig: myconfig,
            tileServerURL: baseURL + "/omserver",
            enableUTFGrid: true,
            enableUTFGridInfoWindow: true,
            utfGridResolution: 4
        };

  5. 動的タイル層を作成します。次に例を示します。

      var dynamic_tilelayer_3 = new OM.layer.DynamicTileLayer("dtl3", dtl_props, req);

この例では、動的に定義されたスタイルおよびServerJDBCThemeオブジェクトは最初に作成されます。ServerJDBCThemeは、SQL文を使用して、空間表を直接使用できます。この表は、次にServerMapRequestオブジェクトのaddThemeおよびaddStyleメソッドによって使用されます。

4.5.5 サード・パーティ・マップ・サービスを使用した動的タイル層の作成

動的タイル層を作成するための別の方法として、サード・パーティのマップ・サービスを使用する方法があります。サード・パーティのマップ・サービスURLは、クライアントが提供するURL生成機能によって提供されます。次の手順に従います。

  1. サード・パーティのマップ・サービス・プロバイダの仕様を使用して、動的タイル層によるマップ画像リクエストを構築するURL構築ファンクションを作成します。次に例を示します。

    var urlb = function (w, h, minX, minY, maxX, maxY, options){
      var str="http://my.mycorp.com:8080/geoserver/ows?";
      var optParams="";
      str = str+"request=getmap"+
      "&bbox="+minX+","+minY+","+maxX+","+maxY+
      "&width="+w+
      "&height="+h;
      
    if (!OM.isNull(options)) {
      for (var key in options) {
        optParams=optParams +"&"+key +"="+options[key];
      }
    }    
    return str+optParams;
  }

  2. この動的タイル層のプロパティを含むオブジェクトを作成します。次に例を示します。

    var dtl_props = {  
    universe: myuniv,            
    tileLayerConfig: myconfig,
    urlBuilder: urlb,
    urlBuilderOptions: {
              "layers":  "topp:states,sf:sfdem,sf:roads,sf:streams",
              "CRS":     "CRS:84",
              "service": "WMS",
              "version": "1.3.0",
              "format":  "image/png"
        } 
};

  3. 動的タイル層を作成します。次に例を示します。

      var dynamic_tilelayer_4 = new OM.layer.DynamicTileLayer("dl4", dtl_props);

この例では、動的タイル層インスタンス(dynamic_tilelayer_4)には、URL生成ファンクション(iurlb)を提供するurlBuilderプロパティが含まれます。URL生成ファンクションは、指定されたマップ・サービス・プロバイダから画像をフェッチするために動的タイル層によって使用されます。この例では、サード・パーティ・マップ・プロバイダGeoServerインスタンスが使用され、マップ画像が提供されます。

追加のマップ・サービス・プロバイダで必要とされるパラメータは、urlBuilderOptionsプロパティで提供可能です。この例では、GeoServerインスタンスで必要とされるいくつかの追加パラメータ(layers、CRS、service、versionおよびformat)が指定されています。

4.5.6 動的タイル層の使用例

このトピックでは、動的タイル層の使用例について説明します。

コードの例は、動的タイル層アプリケーションからのものです。アプリケーションでは、マップ画像タイルを提供するためにマップ視覚化コンポーネント・サーバーが使用されます。OM.server.ServerJDBCThemeインスタンスを介して空間表を直接使用します。

  1. getWhereClauseFromUI()ファンクションを使用して、SQL問合せの"where"句をアプリケーションのユーザー・インタフェースから取得します(このファンクションは、アプリケーションの内ですでに適切に定義済であり、期待される結果を返すものと想定しています)。次に例を示します。 

        var  wherec = getWhereClauseFromUI();

  2. JDBCテーマを作成し、そのプロパティを設定します。次に例を示します。

        var objJDBCTheme= new OM.server.ServerJDBCTheme();
    objJDBCTheme.setDataSourceName('storm');
    objJDBCTheme.setSRID('3857');
    objJDBCTheme.setXColumnName('long_loc');
    objJDBCTheme.setYColumnName('lat_loc');

    objJDBCTheme.addInfoColumn({column: 'YEAR', name:'Year'});
    objJDBCTheme.addInfoColumn({column: 'MONTH', name:'Month'});
    objJDBCTheme.addInfoColumn({column: 'DAY', name:'Day'});
    objJDBCTheme.addInfoColumn({column: 'STATE', name:'State'});
    objJDBCTheme.addInfoColumn({column: 'LOSS', name:'Loss'});
    objJDBCTheme.addInfoColumn({column: 'CROPLOSS', name:'Crop_loss'});
    objJDBCTheme.addInfoColumn({column: 'FATALITIES', name:'Fatalities'});
    objJDBCTheme.addInfoColumn({column: 'INJURIES', name:'Injuries'});

    objJDBCTheme.setName('theme_tornado');
    objJDBCTheme.setQuery("SELECT s.geom.sdo_point.x long_loc,s.geom.sdo_point.y lat_loc,year,month,day,state,fatalities,injuries,loss,croploss from tornado_3857 s"+
(wherec === "" ?"": wherec));
    objJDBCTheme.setRenderingStyleName('V.TORNADO');

  3. ServerMapRequestインスタンスを作成し、そのプロパティを設定します。次に例を示します。 

            var req = new OM.server.ServerMapRequest(baseURL);
        req.setProperties({
            dataSource:'storm',
            transparent:true,  // map image is set to be transparent
            antialiase:"false"
        });
        req.addTheme(objJDBCTheme);

  4. この動的タイル層のプロパティを含むオブジェクトを作成します。次に例を示します。

            var dtl_props = {  
            universe: myuniv,            
            tileLayerConfig: myconfig,
            tileServerURL: baseURL + "/omserver",
            enableUTFGrid: true,
            enableUTFGridInfoWindow: true,
            utfGridResolution: 4
        };

  5. 動的タイル層を作成します。次に例を示します。

      var tornado_damage = new OM.layer.DynamicTileLayer("tornado_damage", dtl_props, req);

前述の手順内のコードの例は、次を表しています。

  • マップ・アプリケーションは、マップ視覚化コンポーネント・サーバーからマップ画像をフェッチします。このため、マップ視覚化コンポーネント・サーバーの使用可能なすべての地物が使用される場合があります。

  • マップ画像は、透明に設定されています(つまり、プロパティtransparentの値はtrueです)。この設定により、複数の動的タイル層の表示が重なった場合、重なりなしの地物がすべて表示されます。たとえば、tornado_damage動的タイル層をhail_damage動的タイル層の上に重ねた場合、(その名前が示すような)イベントが、重なりなしの場所で発生した場合、両方の層がマップ上に表示されます。この設定は、線形およびポイント地物を含む複数の層に対してより便利です。APIでは、層の可視性をオン/オフにできるため、常に、興味のある層をアプリケーション内で目立たせ、表示させることができます。

  • また、動的タイル層は、マップ視覚化コンポーネント・サーバーのUTFGridサポートを有効化します(具体的に、プロパティenableUTFGridがtrueに設定され、utfGridResolutionプロパティの解像度の値は4に設定されます)。この設定は、マップ視覚化コンポーネントのAPIに、マップ・タイル画像のコンパニオンとして追加のUTFGridファイルをリクエストするよう指示します。これはJSONファイルであり、タイル画像と一致するUTFエンコーディングの2次元のグリッド表を含みます。また、各グリッド・セルのテキスト属性も含みます。

    画像ピクセルでマウス・イベント(マウス・クリックなど)がトリガーされると、対応するグリッド・セルを特定できるようになり、そのUTFコードが取得され、続いて、そのグリッド・セルのUTFコードに関連付けられているテキスト属性を取得でき、ポップアップ情報ウィンドウに表示できます。

    このJSONファイルに含まれるテキスト属性は、addInfoColumn()メソッドを使用して指定します。テキスト属性は、マップ上でクリックされているピクセルに対する情報ウィンドウに表示されます。

    サーバー側の事前定義済ジオメトリ・テーマが、動的タイル層で使用されている場合、情報ウィンドウのテキスト属性がテーマの<hidden_info>要素に指定されている必要があります。これは、ベース・マップに基づく動的タイル層にも適用され、この場合、事前定義済テーマはマップ視覚化コンポーネントのベース・マップ定義内にあります

    解像度の値("utfGridResolution":4など)は、グリッド・セルの幅と高さがそのコンパニオン・マップ・タイル画像ピクセルと対照されることを示します。この例では、UTFGridデータセットの1つのグリッド・セルは、16ピクセル(4x4=16)を表します。

  • この動的タイル層は、ServerJDBCThemeを介して空間表を直接使用して、マップ・コンテンツを定義します。クライアントWebアプリケーションの埋込みSQL文では、使用する表、選択する列および問合せを絞り込む"where"句など、柔軟に文全体を構築できます。コード・スニペットでは、クライアント・ファンクションgetWhereClauseFromUI()は、JDBCテーマ定義の'where'句のみを構築すると仮定しています。

Oracle Maps JavaScript APIでサポートされている動的タイル層により、マップ視覚化コンポーネント・サーバー・メタデータがタイル層で使用可能になり、動的タイル層の定義方法、およびクライアント・アプリケーションによるマップ画像のフェッチ場所を柔軟に指定できます。