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

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アプリケーションを開発するには、次の基本的なステップに従います。

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

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

マップ・ビジュアライゼーション・コンポーネントをデプロイおよび起動した後、次のように<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>

HTMLページ内で、インタラクティブなマップを格納する<DIV>タグを作成します。
すべてのマップ表示関数を処理するクライアント側マップ・インスタンスを作成します。

クラスの名前はOM.Mapであり、これがAPIのメインのエントリ・ポイントです。
マップ汎用を設定します(次のオプション・ステップを実行した場合は除く)。

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

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

OM.VectorLayerはHTML5 (CanvasまたはSVG)テクノロジを使用して、すべてのデータをブラウザ内にレンダリングします。このため、別途指定されていないかぎり、ベクター層のすべてのコンテンツを一度ロードした後に、マップのズームまたはパン操作でデータベースへの問合せやデータのフェッチが発生することはありません。
1つまたは複数のマップ・コントロール、ツールおよびその他のアプリケーション固有のUIコントロールを追加して、表示する層、スタイリングおよびビジュアル効果をユーザーが設定できるようにします。

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

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

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

親トピック: Oracle Maps

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
```

親トピック: Oracle Mapsアプリケーションの開発