Oracle Application Server 10g MapViewer

(1)

はじめての

はじめての Oracle MapViewer

2007 年 3 月

日本オラクル株式会社

(2)

はじめに 5 対応バージョン 5 前提スキル 5 システム構成について 5 ファイルパスの表記について 5 1. Oracle MapViewer とは 6 1.1 地図アプリケーションの必要性 6 実行環境の課題と解決 6 地図管理の課題と解決 6 MapViewer の適用領域 6 ハイブリッドな環境での使用 7 1.2 アーキテクチャ概要 7 地図画像の配信 (MapCacheServer) 8 業務データの配信 (FOI Server) 8

JavaScript ライブラリ (JavaScript Map Client) 8

2. MapViewer のインストール 9 2.1 必要な動作環境 9 対象バージョン 9 利用可能なエディション 9 データベースの対象バージョン 9 地図データ 10 クライアント・ブラウザ 10 2.2 入手方法 11 MapViewer 製品コンポーネント 11 本資料のために必要なファイル 11 オラクル製品の入手方法 12 3. MapViewer のインストール 13 3.1 mapviewer.ear のデプロイ 13 3.2 ディクショナリ・テーブルの作成 17 3.3 データベース接続の設定 17 DB ユーザの作成 17 MapViewer 管理者画面へのログイン 17 データソースの設定 19 まとめ 22 4. 地図の表示 23 4.1 地図の種類 23

(3)

内部地図ソース 23 外部地図ソース 23 4.2 地図アダプタの入手 24 4.3 プロキシサーバーの指定 24 4.4 マップキャッシュ・インスタンスの定義 25 4.5 シンプルな地図の表示 28 4.6 地図コンポーネントの追加 30 まとめ 31 5. FOI の表示 33 5.1 点（ポイント）情報の表示 33 データの格納 33 MapBuilder の起動 33 スタイルの定義 35 テーマの定義 38 ブラウザでの表示 44 5.2 吹き出しによるデータ属性の表示 45 吹き出し表示列の指定 45 メタデータのキャッシュ削除 47 ブラウザでの表示 48 5.3 表示データの絞込み 49 検索条件の追加 49 ブラウザでの表示 51 5.4 線（ライン）情報の表示 53 データの格納 53 スタイルの定義 54 テーマの定義 55 ブラウザでの表示 61 5.5 多角形（エリア）情報の表示 62 データの格納 63 スタイルの定義 63 テーマの定義 65 ブラウザでの表示 71 まとめ 72 6. インタラクティブな画面の作成 74 6.1 テーマの表示／非表示の切替え 74 6.2 検索条件の動的な変更 76

(4)

まとめ 79 付録 A. JavaScript API リファレンスとチュートリアルの確認方法 80 リファレンスの確認方法 80 チュートリアルのセットアップ方法 81 デモデータの入手 81 デモ用スキーマ mvdemo の作成 81 デモデータとメタデータのインポート 82 データソースの作成 82 デモ用地図の作成 83 チュートリアルの確認 86 付録 B. ログの確認方法 90

Oracle Application Server 10g のログファイル 90 Oracle HTTP Server(OHS)のログ 90 OC4J が出力する標準出力と標準エラー出力 90 MapViewer のログファイル 90 MapViewer 全般のログ 90 MapCacheServer と地図アダプタに関するログ 90 ログの出力レベルの設定 90

(5)

はじめに

本資料は Oracle Application Server 10g のコンポーネントである Oracle MapViewer（以下、MapViewer）のチュートリアルで、エンジニアの方に基本機能を理解していただくことを目的としています。

対応

対応バージョン

バージョン

本資料は、Oracle MapViewer 10.1.3.1.0 に対応しています。

前提

前提スキル

スキル

本資料の内容をご理解いただくために必要なスキルは次のとおりです。 Oracle Database 10g のインストールスキル、オペレーションスキル

Oracle Application Server 10g のインストールスキル、オペレーションスキル Oracle Spatial の概要：SDO_GEOMETRY 型に関する知識

HTML および JavaScript を使った Web アプリケーション開発スキル

システム

システム構成

構成

構成について

について

本資料は MapViewer の基本機能と開発手法を理解していただくことを目的としており、極力シンプルなシステム構成を前提として記述されています。運用のためのサーバー構成などは別途検討してください。

ファイルパス

ファイルパスの

の

の表記

表記

表記について

について

ファイルパス区切り文字を UNIX および Linux で使用されている「/（スラッシュ）」で表記しています。Microsoft Windows 上では「\（円マーク、英語環境ではバックスラッシュ）」となります。

(6)

1. Oracle MapViewer とは

とは

MapViewer を導入すると企業は保有する物件、店舗、顧客、車両などの様々なデータを地図上に表示することができます。本章では地図アプリケーションの必要性や MapViewer の構成などの概要を理解していただきます。

1.1 地図

地図

地図アプリケーション

アプリケーション

アプリケーションの

の

の必要性

必要性

業務システムでは物件、店舗、顧客などのデータを扱いますが、これらは住所などの位置情報データを持っているため地図上にマッピングすることができます。地図に表示することで鉄道の駅や高速道路の出入り口などの周辺施設との地理的な関係を可視化でき、売り上げ分析や顧客開拓などの重要な情報を得ることができます。しかし、これまで地図に関するアプリケーション構築には専門知識が必要で、導入コストも高いため行政やマーケティングなどの一部の業種以外ではあまり普及していませんでした。実行環境実行環境実行環境実行環境のののの課題課題課題課題ととと解決と解決解決解決地図アプリケーションをスタンドアロン・アプリケーションの環境で利用すると複数の担当者の間で情報共有がうまくできなかったり、クライアント・サーバー環境で利用するとソフトウェアの配布管理が難しく多数の利用者に公開できなかったりという課題がありました。 MapViewer ではアプリケーション環境にウェブブラウザを利用しますので、誰でもインストールなしで使えます。また、データはデータベースに一元管理されるので複数の利用者が同時に使用してもバージョン管理が問題になることはありません。地図管理地図管理地図管理地図管理のののの課題課題課題課題ととと解決と解決解決解決日本全国の地図データは非常にデータ容量が大きいため、自社で購入して管理しようとすると、ハードウェアに対する投資や地図データの保守に多大な費用がかかります。 MapViewer では地図配信 ASP を利用することで、簡単に、短期間で、安価にシステム構築をすることができます。そのため個々の企業の要件に応じたアプリケーション・ロジックの作成にリソースを集中できます。 MapViewer のののの適用領域適用領域適用領域適用領域 MapViewer により地図アプリケーションの開発が容易になりますが、全ての利用シーンにおいて万能に適用できるわけではありません。MapViewer はその名の

(7)

とおりビューアとして利用するのに適しており、既に企業が保有している各種の位置情報データを閲覧する目的に最適です。ハイブリッドハイブリッドハイブリッドハイブリッドなななな環境環境環境での環境でのでのでの使用使用使用使用都市計画アプリケーションなどで地図データの編集作業が主体の場合には、 MapViewer ではなく旧来の専用アプリケーションを使用されることをお勧めします。その場合でもデータ編集担当者が編集を終了した時点で結果データをデータベースに格納することができますので、MapViewer を使って他の社員や社外のユーザーに対して情報公開のために配信することができます。例えば自治体の水道部が専用アプリケーションで作成した市内の水道管網の情報をデータベースに取り込み、インターネット上で市民や民間業者に公開するためにのアプリケーションを MapViewer で作成することができます。

1.2 アーキテクチャ

アーキテクチャ

アーキテクチャ概要

概要

MapViewer を使ったプリケーションは、データベース、アプリケーション・サーバー、ウェブブラウザの 3 層構成で動作します。 MapViewer は主に次の 3 つの機能を提供します。

(8)

地図画像地図画像地図画像地図画像のののの配信配信配信配信 (MapCacheServer) アプリケーションの背景に使用する地図画像は JPEG, PNG などの画像ファイルとしてウェブブラウザに配信します。画像ファイルはデータベースに格納されたベクトル地図データをもとに MapViewer が画像生成する場合と、インターネット上の地図配信 ASP から地図画像を取得する 2 つの方法があります。日本では手頃な価格で利用できる地図配信 ASP を利用するのが一般的です。一度生成または取得された地図は MapViewer がアプリケーション・サーバー上のファイルシステムに画像ファイルとしてキャッシュしますので、多くのユーザーが利用する環境でも高速に動作させることができます。 MapCacheServer の設定は MapViewer のウェブ管理画面で行います。業務業務業務業務データデータデータのデータののの配信配信配信配信 (FOI Server) 地図上にマッピングして表示するデータは FOI(Feature of Interest)と総称され、その形状により点、線、多角形などの種類があります。データベースに格納された位置情報データは MapViewer が取得し、データの形状に応じてアイコンや図形画像を生成してウェブブラウザに配信します。

FOI Server の設定のために Oracle MapBuilder（以下、MapBuilder）という GUI ツールが提供されています。

JavaScript ライブラリライブラリライブラリ (JavaScript Map Client) ライブラリ

MapCacheServer により配信された地図画像と、FOI Server により生成された画像をブラウザ画面上で適切に重ね合わせる機能は MapViewer が提供する JavaScript ファイルに実装されています。このファイルをユーザー・アプリケーションの HTML で読み込むことで、マウスによる地図操作などの機能が提供されます。

ユーザーは MapViewer の JavaScript API を用いてアプリケーション画面を開発していきます。サーバー側で動作する Servlet や JSP を作成する必要がないため、非常に簡単にアプリケーションを開発できます。

(9)

2. MapViewer の

の

のインストール

の

インストール

本章では MapViewer の動作に必要なシステム環境とその入手方法について解説します。

2.1 必要

必要

必要な

な

な動作環境

動作環境

MapViewer は Oracle Application Server 10g で動作する J2EE アプリケーションで、ライセンスは Oracle Application Server 10g に含まれています。位置情報データの格納先として Oracle Databse 10g も別途必要です。

対象対象対象

対象バージョンバージョンバージョンバージョン

Oracle Application Server 10g Release 3(10.1.3.1.0)以降

Oracle Application Server 10g のバージョン 10.1.3.1.0 のインストールは Oracle SOA Suite 10g (10.1.3.1.0)の CD Pack から行います。インストール・タイプで「拡張インストール」の「J2EE サーバーと WEB サーバー」を選んでください。バージョン 10.1.2 では動作しません。利用可能利用可能利用可能利用可能ななななエディションエディションエディションエディション

MapViewer は Oracle Application Server 10g の J2EE コンテナである Oracle Container for J2EE(以下、OC4J)上で動作します。MapViewer と OC4J は Oracle Application Server 10g の全てのエディションで利用いただけます。

Java Edition

Standard Edition One Standard Editon Enterprise Edition

Oracle Application Server 10g の Standard Edition One 以上で利用できる WebCache を利用すると地図画像の配信が高速になります。運用環境では Standard Edition One 以上を推奨します。

データベースデータベースデータベース

データベースのののの対象対象対象バージョン対象バージョンバージョンバージョン

Oracle Dabase 10g Release1(10.1.0)以降

地図上に表示する企業データは Oracle Spatial/Locator が提供する空間ジオメトリ・データ型(SDO_GEOMETRY)を使用して格納されます。Oracle Spatial は空間情

(10)

Oracle Database 10g の Enterprise Edition に追加して購入いただけます。Oracle Locator は空間データの格納と検索だけに機能を限定した Oracle Spatial のサブセットで、データベースの全てのエディションに付属しており追加費用は必要ありません。

Oracle Spatial と Oracle Locator の提供機能の比較は Oracle Spatial の製品ドキュメントの付録を参照してください。本書で紹介している内容は Oracle Locator だけで動作可能です。

Oracle Spatial は Oracle Universal Installer(OUI)で Enterprise Edition を選択した場合にオプション選択画面で Oracle Spatial にチェックすることでインストールできます。Oracle Locator は通常のデータベース・インストールに含まれており、特別なインストール作業は必要ありません。

Oracle Database 10g Release2(10.2.0)では Oracle Spatial と Oracle Locator のそれぞれで各種の新機能が追加されていますので最新バージョンの利用を推奨します。地図地図地図地図データデータデータデータ MapViewer を使ったアプリケーションでは背景に地図を表示します。地図配信 ASP 提供企業と利用契約を結んで地図画像を受信できるようにするか、地図データを地図会社から購入して企業内でセットアップする必要があります。前者の ASP 利用の方が手軽に始めることができますが、特殊な用途の地図を使う場合は後者の方法も選択できます。 ASP 利用契約または地図データの購入契約は日本オラクルでは契約仲介をしておりませんので、地図会社各社と直接契約してください。なお、日本オラクルでは各社の地図サービスに対する動作検証を行っていますので、最新状況についてはお問い合わせください。本資料のチュートリアルを実施していただく際は、各地図配信 ASP の地図を試使用することができますので契約の必要はありません。クライアントクライアントクライアントクライアント・・・・ブラウザブラウザブラウザブラウザ MapViewer がサポートしているウェブブラウザは次のとおりです。 Microsoft Internet Explorer 6 SP2 以降

(11)

Mozilla FireFox 1.5 以降 (Windows / MacOS X)

2.2 入手方法

入手方法

MapViewer および本資料で使用する各種ファイルは Oracle Technology Network(OTN) Japan ホームページからダウンロードしてください。

http://otn.oracle.co.jp/products/mapviewer/index.html

MapViewer は Oracle Appplication Server 10g の CD Pack には含まれません。OTN Japan からダウンロードした製品コンポーネントがサポート対象になります。

MapViewer 製品製品製品製品コンポーネントコンポーネントコンポーネントコンポーネント MapViewer kit

MapViewer 本体の J2EE アプリケーション (mapviewer.ear) MapBuilder kit

MapViewer の GUI 設定ツール (mapviewer.jar) Demo Data Set

MapViewer に付属のチュートリアルを実施するために必要です。本資料の付属 A を参照してください。ユーザーズ・ガイド MapViewer の製品ドキュメントです。ユーザーズ・ガイドは 2007 年 3 月時点で翻訳中で、今後日本語版を提供予定です。本資料本資料本資料本資料のためにのためにのためにのために必要必要必要な必要なななファイルファイルファイルファイル本資料のチュートリアルを実行するために必要なファイルです。チュートリアルの付属ファイルチュートリアルで使用する SQL ファイルと HTML ファイル地図配信 ASP の試使用アダプタチュートリアルの背景地図に使用する地図アダプタを１つ選んでください。チュートリアルでは東京地域のサンプルデータを使用します。株式会社きもとの Flag System は沖縄の地図のため、SQL ファイルを変更する必要があります。

(12)

オラクルオラクルオラクルオラクル製品製品製品製品のののの入手方法入手方法入手方法入手方法オラクル製品のライセンスがない場合は 30 日間評価版を OTN Japan ホームページからダウンロードすることができます。本資料で解説する内容はこの評価版でも動作します。

(13)

3. MapViewer の

の

のインストール

の

インストール

本章では MapViewer のインストール方法を解説します。

3.1 mapviewer.ear の

の

のデプロイ

デプロイ

Oracle Application Server 10g では、EAR ファイルを Oracle Enterprise Manager 10g Application Server Control（以下、ascontrol）画面からデプロイします。MapViewer の EAR ファイル名は mapviewer.ear です。

ウェブブラウザで ascontrol 画面 (http://localhost/em)にアクセスします。

Linux 環境ではデフォルトポートは 7777 のため、http://localhost:7777/em にアクセスしてください。

ユーザ名は oc4jadmin 、パスワードは Oracle Application Server 10g のインストール時に指定したものを使用します。

ascontrol ログインログインログインログイン画面画面画面画面

ログインに成功すると ascontrol ホームページに遷移します。システム・コンポーネントの「home」をクリックし、OC4J ホームページへ遷移します。

(14)

ascontrol ホームページホームページホームページホームページ

OC4J ホームページの上部にある「アプリケーション」タブをクリックし、「デプロイ」ボタンをクリックします。

(15)

OC4J ホームページホームページホームページホームページ「デプロイ:アーカイブの選択」画面へ遷移します。「アーカイブの場所」の「参照…」ボタンをクリックし、mapviewer.ear ファイルを選択します。「次へ」ボタンをクリックします。「「「「デプロイデプロイデプロイ:アーカイブデプロイアーカイブアーカイブアーカイブのの選択のの選択選択」選択」」」画面画面画面画面「デプロイ:アプリケーション属性」画面へ遷移します。「アプリケーション名」に、「mapviewer」と入力します。「コンテキスト・ルート」に「/mapviewer」が設定されているのを確認して、「次へ」ボタンをクリックします。「「「「デプロイデプロイデプロイ:アプリケーションデプロイアプリケーションアプリケーションアプリケーション属性属性属性」属性」」」画面画面画面画面「デプロイ：デプロイ設定」画面へ遷移します。「デプロイ」ボタンをクリックします。

(16)

「「「「デプロイデプロイデプロイデプロイ：：：：デプロイデプロイ設定デプロイデプロイ設定設定設定」」」」画面画面画面画面次の確認画面ではデプロイが実行され、ログが表示されます。エラーがないことを確認し、「戻る」ボタンをクリックします。これでデプロイは完了です。

(17)

「「「「確認確認確認確認」」」画面」画面画面画面

3.2 ディクショナリ

ディクショナリ

ディクショナリ・

・

・テーブル

・

テーブル

テーブルの

の

の作成

作成

MapCacheServer や FOI Server などの設定情報はデータベースのディクショナリ・テーブルに格納されます。ここではデータベースに MapViewer 特有のディクショナリ・テーブルの定義を追加します。

SQL*Plus を起動して system ユーザでデータベースに接続してください。Oracle Application Server 10g のインストール・ディレクトリ以下にある次の SQL ファイルを実行してください。 $ORACLE_HOME/j2ee/home/applications/mapviewer/web/WEB-INF/admin/mcsdefin ition.sql

3.3 データベース

データベース

データベース接続

接続

接続の

接続

の

の設定

設定

本資料で解説するサンプル・アプリケーションのデータを格納するスキーマを作成し、MapViewer が接続できるように設定します。 DB ユーザユーザユーザのユーザののの作成作成作成作成サンプル・アプリケーション用に mv_sample という DB ユーザを作成し、connect と resource ロールを割り当ててください。ここではパスワードを wendy にします。

SQL> create user mv_sample identified by wendy; SQL> grant connect, resource to mv_sample;

MapViewer 管理者画面管理者画面管理者画面管理者画面へのへのへのへのログインログインログインログイン

ウェブブラウザで MapViewer のホームページ(http://localhost/mapviewer)にアクセスします。右上の「Admin」ボタンをクリックします。

(18)

MapViewer ホームページホームページホームページホームページ

Login 画面に遷移します。ユーザ名は oc4jadmin 、パスワードは Oracle Application Server 10g のインストール時に入力したものを指定します。

MapViewer ログインログインログインログイン画面画面画面画面

正常にログインすると MapViewer 管理者画面に遷移します。管理者画面では MapViewer ロゴの左に鍵マークがあって、「Management」タブが表示されます。

(19)

MapViewer 管理者画面管理者画面管理者画面管理者画面データソースデータソースデータソースデータソースのののの設設設定設定定定「Management」タブの「Manage MapViewer」サブタブで「Configuration」をクリックします。「「「「Manage MapViewer」」」画面」画面画面画面 MapViewer の設定ファイルを編集する画面が表示されます。

画面の一番下の Predefined Data Sources 部分に mv_sample スキーマに接続するためのデータソース定義を追加します。 <map_data_source name="mv_sample" jdbc_host="localhost" jdbc_sid="orcl" jdbc_port="1521" jdbc_user="mv_sample" jdbc_password="!wendy" jdbc_mode="thin" number_of_mappers="3" allow_jdbc_theme_based_foi="false" /> 設定ファイルは XML 形式です。初期設定では各項目はコメント形式になっていますので、コメント記号をはずして編集してください。

(20)

jdbc_password の先頭に「!」記号をつけてください。設定ファイルが保存される際にパスワードがエンコードされます。画面下部にある「Save&Restart」ボタンをクリックします。（（（（途中略途中略途中略途中略））））

(21)

「「「「Configuration」」」画面」画面画面画面 MapViewer の再起動が行われると、情報メッセージが表示されます。データソース定義が正常に登録されたことを確認するために、「Datasources」をクリックします。「「「「情報情報情報情報」」」画面」画面画面画面「Refresh」ボタンをクリックして、mv_sample データソースが表示されることを確認します。データソースデータソースデータソースデータソース定義定義定義の定義のの確認の確認確認確認以上で MapViewer のインストールとデータベースの接続設定が完了です。

(22)

まとめ

本章では OC4J に MapViewer をデプロイし、アプリケーション・データを格納するデータベース・スキーマに対してデータベース接続するまでの手順を解説しました。この章で解説した内容は次のとおりです。 mapviewer.ear のデプロイディクショナリ・テーブルの作成データベース接続の設定次の章からいよいよアプリケーションの実装を行いきます。

(23)

4. 地図

地図

地図の

の

の表示

表示

この章では MapViewer に地図アダプタを登録し、ブラウザで地図を表示するまでの方法を解説します。MapViewer で表示される地図はマウスまたはキーボードで移動や縮尺変更などの操作ができ、誰でも簡単に使うことができます。

4.1 地図

地図

地図の

の

の種類

種類

MapViewer では内部地図ソースと外部地図ソースという 2 種類の地図を扱うことができます。内部地図内部地図内部地図内部地図ソースソースソースソース Oracle Spatial の機能を使い、ベクトル地図データや衛星画像などをデータベースに格納するタイプの地図です。MapViewer にはデータベースから必要な地図情報を取得し、リクエストされた地域の地図画像を生成する機能があります。ベクトルベクトルベクトルベクトル地図地図地図地図データデータデータデータ経度緯度などの数値座標で扱う地図情報で、 Oracle Spatial/Locator の SDO_GEOMETRY 型を利用してデータベースに格納されます。地図データは一般的にシェープファイルというファイル形式で地図会社などから購入するのが一般的で、MapBuilder からデータベースに簡単にインポートすることができます。 (例) 国土地理院の数値地図株式会社ゼンリンの住宅地図画像地図画像地図画像地図画像地図データデータデータデータ

JPEG や PNG などの画像ファイルとして入手できる地図です。Oracle Spatial の SDO_GEORASTER 型を利用してバイナリデータとしてデータベースに格納します。（例）衛星画像、航空写真建物のフロア地図外部地図外部地図外部地図外部地図ソースソースソースソース地図配信 ASP などの外部サーバーから配信される地図画像を MapViewer が利用します。データベースで地図データを管理する必要がなく、手軽にはじめることができます。

(24)

日本国内では地図配信 ASP が安価で利用しやすいため、外部地図ソースを利用するのが一般的です。本資料では地図配信 ASP を利用する手順を解説していきます。

4.2 地図

地図

地図アダプタ

アダプタ

アダプタの

の

の入手

の

入手

地図配信 ASP を利用する際には提供企業との間で利用契約をする必要があり、その地図配信 ASP に対応した MapViewer 用地図アダプタが必要です。地図アダプタが地図配信 ASP 提供企業から提供される場合もありますが、提供されない場合は MapViewer の外部地図ソースのアダプタ仕様と地図配信 ASP のリクエスト仕様をもとに地図アダプタ・プログラムを作成します。日本オラクルでは、MapViewer の評価目的に使用するための地図アダプタを提供しています。閲覧できる縮尺と地域に制限がありますが、国内の主要な地図配信 ASP の地図を試使用することができます。試使用のための地図アダプタは OTN Japan ホームページからダウンロードしてください(2.2 節を参照）。

本資料では ESRI ジャパン株式会社が提供する「GISonDemand for ASP」のアダプタを使用して解説していきます。

4.3 プロキシサーバー

プロキシサーバー

プロキシサーバーの

の

の指定

指定

イントラネットで MapViewer を動作させる場合で、インターネット上の地図配信 ASP サーバーとの通信にプロキシサーバーを経由するには設定が必要になります。プロキシサーバーを経由しない場合はこの節はスキップしてください。

MapViewer 管理画面で「Management」タブの「Manage MapViewer」サブタブの「Configuration」をクリックします。

「「「

(25)

Web Proxy Setting 部分にプロキシサーバーの情報を追加します。

<web_proxy host="www-proxy.company.com" port="8080" />

設定ファイルは XML 形式です。初期設定では各項目はコメント形式になっていますので、コメント記号をはずして編集してください。画面下部の「Save&Restart」ボタンをクリックして MapViewer を再起動します。

4.4 マッ

マッ

マップキャッシュ

プキャッシュ

プキャッシュ・

・インスタンス

・

インスタンス

インスタンスの

の

の定義

定義

MapCacheServer に地図アダプタ情報を登録します。MapCacheServer には複数の地図を登録することができ、アプリケーションで地図を切り替えて表示することができます。登録されたそれぞれの地図情報はマップキャッシュ・インスタンスと呼ばれます。

MapViewer 管理画面の「Management」タブの「Manage Map Caches」サブタブの「Create」をクリックします。

「「「

「Manage Map Caches」」」画面」画面画面画面

マップキャッシュ・インスタンスの作成画面に遷移します。地図配信 ASP は外部地図ソースなので、「Select type of map source:」で「External」を選び、「Continue」ボタンをクリックします。

(26)

「「「

「Create」」」画面」画面画面画面

「Create a cache for external map source」画面に遷移します。この画面でアダプタの各種情報を入力することができますが、本資料で利用する試使用アダプタにはこれらの情報が設定済みの XML ファイルが含まれていますので、今回はそれを利用します。画面下部にある「XML mode」ボタンをクリックしてください。地図地図地図地図アダプタアダプタアダプタアダプタ登録画面登録画面登録画面登録画面「XML mode」画面に遷移します。地図アダプタの XML ファイルの内容をコピー＆ペーストします。次のパラメータは環境に合わせて適宜変更してください。 data_source: インスタンスを登録するデータソース名 adapter_class_path: 地図アダプタの jar ファイルのパス試使用アダプタには mv_sample データソースが予め設定されています。

(27)

（（（（途中略途中略途中略途中略））））「「「「XML mode」」」画面」画面画面画面「Submit」ボタンをクリックします。

情報メッセージに「New map cache instance created successfully」と表示されれば成功です。

(28)

「「「

「情報情報情報情報」」」画面」画面画面画面

「Existing map cache instances」欄に登録した試使用アダプタの名前が表示されます。マップキャッシュ・インスタンスの各種設定情報は、3.2 節で作成したデータディクショナリ・テーブルに格納されます。

4.5 シンプル

シンプル

シンプルな

な

な地図

な

地図

地図の

地図

の

の表示

の

表示

まずは必要最小限の HTML コードを作成し、地図を表示してみましょう。次のような HTML ファイルをエディタで作成してください。 01: <html> 02: <head>

03: <title>Oracle MapViewer sample application </title> 04: <script type="text/javascript"

src="/mapviewer/fsmc/jslib/oraclemaps.js"></script> 05: <script type="text/javascript">

06: <!--

07: var mapview = null; 08:

09: window.onload = function() 10: {

11: mapview = new MVMapView( document.getElementById( "map" ) ); 12: mapview.addBaseMapLayer( new

MVBaseMap( "mv_sample.trial_esri" ) );

13: var center = MVSdoGeometry.createPoint( 139.753, 35.69, 8301 ); 14: mapview.setCenterAndZoomLevel( center, 7 ); 15: mapview.display(); 16: } 17: //--> 18: </script> 19: </head> 20: <body>

21: <div id="map" style="position:absolute; left:40px; top:80px; width:600px; height:400px;"></div> 22: </body> 23: </html> このファイルでは HTML、CSS、JavaScript を使って次の指定をしています。 MapViewer が提供する JavaScript ライブラリの読み込み (4 行目) 画面内での地図を表示する DIV 要素の位置とサイズの指定 (21 行目) HTML がブラウザに読み込まれた際に地図を表示す関数 (9 行目) 地図オブジェクト MVMapView のインスタンス作成 (11 行目) マップキャッシュ・インスタンスの指定 (12 行目) 地図の中心位置と縮尺の指定 (13-14 行目)

(29)

地図の表示を実行 (15 行目)

地図の表示エリアは HTML の DIV 要素で指定され、MapViewer の JavaScript ライブラリがそこに地図画像や FOI 画像を表示します。作成した HTML ファイルを Oracle HTTP Server（以下、OHS）の公開ディレクトリに mv_sample.html という名称で保存します。 $ORACLE_HOME/Apache/Apache/htdocs/mv_sample.html ウェブブラウザで http://localhost/mv_sample.html にアクセスします。地図地図地図地図ののの表示の表示表示表示シンプルな地図が表示されます。マウスで地図部分をドラッグすると地図が移動できることを確認してください。キーボードの矢印キーで地図を上下左右に移動したり、「+」キーと「-」キーで縮尺の変更したりすることもできます。

(30)

4.6 地図

地図

地図コンポーネント

コンポーネント

コンポーネントの

の

の追加

追加

このシンプルな地図に対して MapViewer が用意している各種の地図コンポーネントを追加していきます。地図を操作するためのナビゲーションパネル、距離を表示するスケールバー、著作権表示などの地図コンポーネントを追加します。ナビゲーションパネルがあるとアプリケーションを初めて使うユーザーでも地図がスクロールでき、縮尺が変更できることを直感的に理解できます。先ほどの HTML ファイルに赤で示された 3 行を追加します。 01: <html> 02: <head>

06: <!--

13: var center = MVSdoGeometry.createPoint( 139.753, 35.69, 8301 ); 14: mapview.setCenterAndZoomLevel( center, 7 );

15: mapview.addNavigationPanel( "west", true, true ); 16: mapview.addScaleBar();

18: mapview.display(); 19: } 20: //--> 21: </script> 22: </head> 23: <body>

24: <div id="map" style="position:absolute; left:40px; top:80px; width:600px; height:400px;"></div> 25: </body> 26: </html> 15 行目で左上にナビゲーションパネル、16 行目で左下の距離表示のスケールバー、17 行目で右下の著作権表示を追加しています。ウェブブラウザでページを再読み込みしてください。

(31)

地図地図地図

地図コンポーネントコンポーネントコンポーネントのコンポーネントののの追加追加追加追加

このように MapViewer では JavaScript API を利用して地図に対して各種機能を追加していきます。MapViewer JavaScript API リファレンスの確認方法は付録 A で紹介しています。本資料の中で使用されている API 関数やその引数はリファレンスを参照してください。

まとめ

本章では MapViewer に地図アダプタを登録し、JavaScript API を使って地図画面を表示するまでの方法を解説しました。ほんの数行の JavaScript コードでスクロール地図が表示できることをご理解いただけたでしょうか。

本章で説明した内容は次のとおりです。地図の種類

(32)

マップキャッシュ・インスタンスの定義シンプルな地図の表示

地図コンポーネントの追加

(33)

5. FOI の

の

の表示

表示

本章ではデータベースに格納された業務データを地図上にマッピングして表示する方法を解説します。地図上に表示するデータは FOI(Feature of Interest)と総称され、その形状により点、線、多角形などの種類があります。MapViewer に付属する Oracle MapBuilder アプリケーションで FOI データの表示設定を行います。

5.1 点

点

点（

点

（

（ポイント

ポイント

ポイント）

）情報

）

情報

情報の

情報

の

の表示

表示

地図上に表示されるデータのうち店舗の位置、顧客の住所、配送トラックの現在位置などはピンポイントで特定される点（ポイント）情報です。これらの情報はアイコン画像を地図上にマッピングすることでその位置を表現します。地図にマッピングすることで周辺の鉄道駅や高速道路などとの位置関係や、データの地理的な分布状況を把握することができます。ここでは例として賃貸マンションの物件テーブル情報を地図上に表示するまでの手順を説明します。データデータデータデータのののの格納格納格納格納はじめにデータベースに物件テーブルを作成します。SQL*Plus を起動して mv_sample スキーマにログインし、本資料に付属の house.sql を実行してください。この SQL ファイルでは mv_sample スキーマに HOUSE 表を作成し、150 件の賃貸マンションの物件データを挿入します。物件の所在位置は HOUSE 表の GEOMETRY 列に経度緯度の情報で格納され、SQL ファイルの最後で Oracle Spatial/Locator の空間索引が作成されます。 MapBuilder ののの起動の起動起動起動点（ポイント）情報はアイコン画像を地図上にマッピング表示して位置を表現します。アイコンの画像指定やデータベース表との対応付けは MapBuilder を使って設定します。 mapbuilder.jar をダブルクリックして MapBuilder を起動してください。

(34)

データベースに接続するために左上のアイコンをクリックします。

Add Connection ダイアログで mv_sample スキーマへの接続情報を入力し、「OK」ボタンをクリックします。

「Connection」プルダウンメニューに「mv_sample」と表示されれば接続は成功です。

(35)

スタイルスタイルスタイルスタイルのののの定義定義定義定義地図に表示するデータの種類ごとに表示属性を定義します。この表示属性のことを MapViewer ではスタイルと呼びます。点（ポイント）情報の場合はスタイル定義としてアイコン画像を指定します。

MapBuilder の左側の Metadata リストで、Styles フォルダを開き、Markers フォルダ上で右クリックして「Create Marker Style」を選択します。

(36)

MapBuilder の画面右側にスタイル定義のスペースが表示されます。スタイル名称として Name に「MARKER_HOUSE」と入力してください。次に「Marker Type」で「Image」を選択し、「Load Image…」ボタンをクリックします。

(37)

ファイル選択ダイアログで本資料に付属の house.gif 画像を指定します。

「Refresh Preview」ボタンをクリックすると指定した house.gif の画像が表示されることを確認してください。

(38)

ツールバーにあるアイコンをクリックしてスタイル定義を保存します。テーマテーマテーマテーマのののの定義定義定義定義次のステップとして、表示する点（ポイント）データが格納されたデータベース・テーブルを指定します。このデータ指定のことを MapViewer ではテーマと呼び、テーマに対して先ほどのスタイル定義を割り当てます。ここでは物件データをアイコン画像として表示しますので、HOUSE 表のデータに対してテーマを定義し、先ほどの MARKER_HOUSE スタイルを割り当てます。

MapBuilder の左側の Metadata リストで、Themes フォルダを開き、Geometry Themes フォルダを右クリックして「Create Geometry Theme」を選択します。

(39)

ウィザードが表示されますので、「次へ」ボタンをクリックします。

テーマの名称、データベース・テーブル名、位置情報の格納された列名を指定して「次へ」ボタンをクリックします。

Name: THEME_HOUSE Base Table: HOSUE 表を選択

(40)

Spatial Column: GEOMETRY 列を選択

次のステップではこのテーマの表示属性として MARKER_HOUSE スタイルを割り当てます。Style Type で「Marker」を選択するとスタイル選択ダイアログが開きます。

(41)

ウィザード・ダイアログの「次へ」ボタンをクリックします。

次のステップではデータごとに表示する注記文字列について指定しますが、このサンプル・アプリケーションでは使用しないので「次へ」をクリックします。

(42)

示するので「次へ」をクリックします。

最後の画面で「終了」をクリックするとウィザードが閉じます。

(43)

緑色の実行ボタンをクリックします。

(44)

以上で MapBuilder を使ったスタイルとテーマの定義は完了です。ブラウザブラウザブラウザブラウザでのでのでのでの表示表示表示表示 THEME_HOUSE テーマの内容を地図上に重ねて表示するために HTML ファイルを変更します。4 章で作成した HTML ファイル(mv_sample.html)に赤で示した 2 行の JavaScript コードを追加してください。 01: <html> 02: <head>

06: <!--

19: var theme_house = new MVThemeBasedFOI( "house", "mv_sample.theme_house" ); 20: mapview.addThemeBasedFOI( theme_house ); 21: 22: mapview.display(); 23: } 24: //--> 25: </script> 26: </head> 27: <body>

28: <div id="map" style="position:absolute; left:40px; top:80px; width:600px; height:400px;"></div> 29: </body> 30: </html> 19 行目で物件の FOI を表示するための MVThemeBasedFOI クラスのインスタンスを作成しています。第 1 引数は任意のテーマ名を指定し、第 2 引数で mv_sample データソースの THEME_HOUSE テーマ定義を指定しています。20 行目でこのテーマを地図に追加しています。ウェブブラウザでページを再読み込みしてください。

(45)

点点点点（（（ポイント（ポイントポイント）ポイント）情報））情報情報の情報ののの表示表示表示表示地図上に HOUSE 表の物件データがアイコンで表示されます。地図を移動したり縮尺を変更したりすると、新しく表示された地図の範囲に応じて物件データがデータベースから再検索されます。

5.2 吹

吹

吹き

き

き出

出

出しによる

しによるデータ

しによる

データ

データ属性

データ

属性

属性の

の

の表示

表示

データの位置を地図上に表示できるようになりましたが、次に位置情報以外のデータ属性を確認できるようにします。アイコンをクリックすると吹き出しが表示され、その中に属性情報が表示されます。

HOUSE 表の RENT 列と ROOM_TYPE 列にはそれぞれ家賃と間取りの情報が格納されています。吹き出しにこれらの情報を表示します。

吹吹吹

吹ききき出き出出し出し表示列しし表示列表示列表示列ののの指定の指定指定指定

MapBuilder で作成した THEME_HOUSE テーマの「Advanced」ボタンをクリックします。

(46)

「Info Columns」にある鉛筆マークの編集ボタンをクリックすると Edit Hidden Columns ダイアログが開きます。

「Add」ボタンをクリックするとエントリが 1 行追加されます。Column 列をクリックしてプルダウンメニューから「RENT」を選択し、Name を列ダブルクリックして入力フィールドに「家賃」と入力します。

(47)

もう一度「Add」ボタンをクリックし、2 行目のエントリでは Column に「ROOM_TYPE」を選び、Name に「間取り」と入力します。「OK」ボタンをクリックしてダイアログを閉じ、ツールバーのアイコンをクリックしてテーマ定義を保存します。メタデータメタデータメタデータメタデータののののキャッシュキャッシュキャッシュキャッシュ削除削除削除削除ブラウザで表示を確認する前に、MapViewer のメタデータ・キャッシュを削除します。MapViewer はユーザーからの地図表示リクエストに対して高速に応答するために、データベースから取得したテーマやスタイルの定義情報をキャッシュします。定義情報を変更した際にはこのキャッシュを削除し、変更された定義情報が新たに読み込まれるようにします。

(48)

MapViewer 管理者画面を開き、「Management」タブの「Manage MapViewer」サブタブの「Datasources」をクリックします。「mv_sample」を選択し、「Purge cached metadata」ボタンをクリックします。情報欄に成功メッセージが表示されたことを確認してください。ブラウザブラウザブラウザブラウザでのでのでのでの表示表示表示表示ウェブブラウザでページを再読み込みしてください。

(49)

吹吹吹吹きききき出出出出しのしのしの表示しの表示表示表示地図上に表示された物件アイコンをクリックすると吹き出しが表示され、家賃と間取りを確認できます。

5.3 表示

表示

表示データ

データ

データの

の

の絞込

の

絞込

絞込み

絞込

み

これまでの例では表示されている地図範囲にある全ての物件データが表示されていました。ここでは、条件にあったデータだけを表示するために、検索条件を指定する方法を解説します。例として HOUSE 表の RENT 列に検索の上限値と下限値を指定し、希望する価格帯の物件だけを表示するようにします。検索条件検索条件検索条件検索条件のののの追加追加追加追加

MapBuilder の THEME_HOUSE 画面の「Styling Rules」ボタンをクリックします。 1 行目の MARKER_HOUSE スタイルを選択し、鉛筆マークの編集ボタンをクリッ

(50)

クします。

Edit Styling Rule ダイアログが表示されます。Query Condition の入力フィールドに検索条件の WHERE 句に追加する SQL を指定します。ここでは HOUSE 表の RENT 列に対して上限値と下限値を設定するので「RENT between :1 and :2」と入力してください。「:1」と「:2」はバインド変数のプレースホルダで、バインド変数の実際の値はこの後に HTML ファイル内の JavaScript で指定します。

(51)

「OK」ボタンをクリックしてダイアログを閉じ、アイコンをクリックしてテーマ定義を保存します。メタデータメタデータメタデータメタデータののののキャッシュキャッシュキャッシュキャッシュ削除削除削除削除ブラウザで表示を確認する前に、MapViewer のメタデータ・キャッシュを削除します。MapViewer 管理者画面を開き、「Management」タブの「Manage MapViewer」サブタブの「Datasources」をクリックします。「mv_sample」を選択し、「Purge cached metadata」ボタンをクリックします。情報欄に成功メッセージが表示されたことを確認してください。ブラウザブラウザブラウザブラウザでのでのでのでの表示表示表示表示

(52)

れた行を JavaScript コードに追加してください。

01: <html> 02: <head>

06: <!--

19: var theme_house = new MVThemeBasedFOI( "house", "mv_sample.theme_house" ); 20: theme_house.setQueryParameters( 80000, 100000 ); 21: mapview.addThemeBasedFOI( theme_house ); 22: 23: mapview.display(); 24: } 25: //--> 26: </script> 27: </head> 28: <body>

29: <div id="map" style="position:absolute; left:40px; top:80px; width:600px; height:400px;"></div> 30: </body> 31: </html> 20 行目で先ほどの SQL バインド変数に渡す値を指定しています。この例では家賃が 8 万円から 10 万円の物件のみを表示するように指定しています。ウェブブラウザでページを再読み込みしてください。

(53)

データデータデータデータのののの絞絞絞り絞りり込り込込込みみみみ再読み込みする前より表示される物件の数が減ったでしょうか。アイコンをクリックして吹き出し表示を確認すると、家賃が 8 万円から 10 万円までの物件だけが表示されているのが分かります。

5.4 線

線

線（

線

（

（ライン

ライン

ライン）

）情報

）

情報

情報の

情報

の

の表示

表示

点（ポイント）情報に続いて、線（ライン）情報を地図に表示していきます。トラックの配送ルートや活断層の地盤情報などは多数の頂点を持つ線（ライン）情報です。これらの情報は地図上に色と太さを指定した折れ線の画像で表現されます。ここでは先ほど表示したマンション物件から最寄り駅までの徒歩ルートを地図上に表示する手順を説明します。データデータデータデータのののの格納格納格納格納データベースに徒歩ルートを格納するテーブルを作成します。SQL*Plus を起動

(54)

して mv_sample スキーマにログインし、route.sql を実行してください。この SQL ファイルは ROUTE 表を作成し、4 件の徒歩ルートのデータを挿入します。ルートの情報は ROUTE 表の GEOMETRY 列に緯度経度の配列情報として格納され、SQL ファイルの最後で Oracle Spatial/Locator の空間索引が作成されます。スタイルスタイルスタイルスタイルのののの定義定義定義定義線（ライン）情報は地図上に太さ、色、透明度などを指定したラインの画像として表示されます。MapBuilder で線（ライン）情報のためのスタイル定義を行います。

MapBuilder の左側の Metadata リストで、Style フォルダを開き、Lines フォルダ上で右クリックし、「Create Line Style」を選択肢ます。

MapBuilder の画面右側にスタイル定義のスペースが表示されます。スタイル名称として Name に「LINE_ROUTE」と入力してください。

次に「Overall Line」で線の色と太さを指定します。「Width」の値を 5 に設定し、「Color」をクリックして赤色を選択します。

(55)

「Refresh Preview」ボタンをクリックすると指定した色と太さの線が表示されることを確認してください。ツールバーにあるアイコンをクリックしてスタイル定義を保存します。テーマテーマテーマテーマのののの定義定義定義定義次に徒歩ルートを表示するテーマを作成します。ROUTE 表のデータに対してテーマを定義し、先ほどの LINE_ROUTE スタイルを割り当てます。

MapBuilder の左側の Metadata リストで、Themes フォルダを開き、Geometry Themes フォルダを右クリックし、「Create Geometry Theme」を選択します。

(56)

Name: THEME_ROUTE Base Table: ROUTE 表を選択 Spatial Column: GEOMETRY 列を選択

(57)

次のステップではこのテーマの表示属性として LINE_ROUTE スタイルを割り当てます。Style Type で「Line」を選択するとスタイル選択ダイアログが開きます。

(58)

(59)

次のステップではデータの絞込条件を指定しますが、今回は全てのデータを表示するので「次へ」をクリックします。

最後の画面で「終了」をクリックしてウィザードが閉じます。

(60)

(61)

しばらくすると、ROUTE 表データの線（ライン）情報が赤い線で表示されます。以上で MapBuilder を使ったスタイルとテーマの定義は完了です。ブラウザブラウザブラウザブラウザでのでのでのでの表示表示表示表示 THEME_LINE テーマを地図上に重ねて表示するために HTML ファイルを変更します。HTML ファイルに赤で示した 2 行の JavaScript コードを追加してください。 01: <html> 02: <head>

06: <!--

19: var theme_house = new MVThemeBasedFOI( "house", "mv_sample.theme_house" );

20: theme_house.setQueryParameters( 80000, 100000 ); 21: mapview.addThemeBasedFOI( theme_house );

22:

23: var theme_route = new MVThemeBasedFOI( "route", "mv_sample.theme_route" ); 24: mapview.addThemeBasedFOI( theme_route ); 25: 26: mapview.display(); 27: } 28: //--> 29: </script> 30: </head> 31: <body>

32: <div id="map" style="position:absolute; left:40px; top:80px; width:600px; height:400px;"></div>

33: </body> 34: </html>

23 行目で mv_sample データソースの THEME_ROUTE テーマ定義を表現する MVThemeBasedFOI インスタンスを作成し、地図に 2 つ目のテーマとして追加して

(62)

います。ウェブブラウザでページを再読み込みしてください。線線線線（（（ライン（ラインライン）ライン）情報））情報情報情報ののの表示の表示表示表示地図上に物件から 4 つの駅までの徒歩ルートを示す赤い線が表示されることを確認してください。

5.5 多角形

多角形

多角形（

多角形

（

（エリア

（

エリア

エリア）

エリア

）情報

）

情報

情報の

の

の表示

表示

次に多角形（エリア）情報を表示します。小学校の学区や災害危険地域などは多数の頂点からなる多角形（エリア）情報です。これらの情報は地図上に塗りつぶし色と透明度を指定した多角形画像で表現されます。ここではマンション周辺の小学校の学区を地図上に表示するまでの手順を説明します。

(63)

データデータデータデータのののの格納格納格納格納データベースに学区範囲を格納するテーブルを作成します。SQL*Plus を起動して mv_sample スキーマにログインし、school.sql を実行してください。この SQL ファイルは SCHOOL 表を作成し、1 件の学区データを挿入します。学区の情報は SCHOOL 表の GEOMETRY 列に経度緯度の配列情報として格納され、SQL ファイルの最後で Oracle Spatial/Locator の空間索引が作成されます。スタイルスタイルスタイルスタイルのののの定義定義定義定義多角形（エリア）情報は地図上に塗りつぶし色、透明度などを指定した図形画像として表示されます。MapBuilder で多角形（エリア）情報のためのスタイル定義を行います。

MapBuilder の左側の Metadata リストで、Style フォルダを開き、Colors フォルダ上で右クリックし、「Create Color Style」を選択肢ます。

MapBuilder の画面右側にスタイル定義のスペースが表示されます。スタイル名称として Name に「COLOR_SCHOOL」と入力してください。次に Style Options の「Fill」で塗りつぶし色と透明度を指定します。「Color」でオレンジ色を選択し、「Opacity」を 50%に設定します。

(64)

次に多角形の輪郭の表示設定を行います。Style Options で「Stroke」ボタンをクリックします。Stroke ボタンのチェックボックスがオフだと輪郭が表示されないので、チェックをオンにしてください。「Width」に 3 を指定し、「Color」で茶色を選択し、「Opacity」を 50%にします。

(65)

「Refresh Preview」ボタンをクリックすると指定した色と輪郭の多角形が表示されることを確認してください。ツールバーにあるアイコンをクリックしてスタイル定義を保存します。テーマテーマテーマテーマのののの定義定義定義定義次に学区を表示するテーマを作成します。SCHOOL 表のデータに対してテーマを定義し、先ほどの COLOR_SCHOOL スタイルを割り当てます。

MapBuilder の左側の Metadata リストで、Themes フォルダを開き、Geometry Themes フォルダを右クリックし、「Create Geometry Theme」を選択します。

(66)

Name: THEME_SCHOOL Base Table: SCHOOL 表を選択 Spatial Column: GEOMETRY 列を選択

(67)

次のステップではこのテーマの表示属性として COLOR_SCHOOL スタイルを割り当てます。Style Type で「Color」を選択するとダイアログが開きます。

(68)

(69)

示するので「次へ」をクリックします。

最後の画面で「終了」をクリックしてウィザードが閉じます。

(70)

緑色の実行ボタンをクリックします。