OpenLayers を使用してデータを統合する

多種多様なソースのデータを Web の地図に活用する

OpenLayers を利用すると、WMS (Web Map Service)、WFS (Web Feature Service)、Google マップなど、多種多様なソースのデータをシームレスに活用することができます。また OpenLayers ライブラリーには、地図の表示を最適化するタイル機能や、使いやすい地図にする上で非常に有効な機能 (パン用コントロール、レイヤー切り換え用コントロール、さらにはマウス・ホイールによってズームを制御する機能まで) も用意されています。この記事では、Microsoft Virtual Earth の衛星写真と NOAA (National Oceanic and Atmospheric Administration) の気象レーダーによる WMS とを組み合わせた地図上にハイキング・コースを表示する Web サイトの作成方法と、Google Gears を使用してハイキング・コースのデータを保存する方法について説明します。

Christopher Michaelis, Developer, Consultant

Christopher Michaelis は Web ホスティングと Web アプリケーションを専門とする開発者です。彼は Utah State University と Idaho State University で学び、コンピューター科学と地理情報科学を研究しました。彼の経歴は広範な開発分野に及んでおり、環境モデリング・アプリケーション、教育、糖尿病データ分析、システム管理ツール、Web ホスティング、プラットフォーム統合、ロケーション・ベースのサービスなどがあります。



2011年 12月 16日

皆さんの会社への経路を顧客に示す場合や、水質サンプリング調査の場所を示す場合、あるいは休暇の写真にジオタグを付ける場合など、地図を使用すると人の関心を引き付ける方法でデータを表現することができます。地図を使用する Web サイトは次第に一般的になっており、Google マップ、Microsoft Virtual Earth、Yahoo! ロコなどの無料サービスがよく使われています。これらの主要サービスで提供されているツールは便利であり、これらのツールを利用すると地図を含む Web ページを非常に手軽に作成することができます。しかし、これらのツールのカスタマイズは簡単ではなく、マーカーやウェイポイントの追加といった基本機能以上のことはできません。

例えば皆さんが、地図製作者や GIS (Geographic Information System: 地理情報システム) の専門家、それらの人々のために働く人、あるいはさまざまなソースの多様なデータセットを地図に取り込もうとする上級ホビイストであると考えてみてください。従来の手法としては、商用の ESRI ArcIMS やオープンソースの MapServer ツールのような、Web 上に地図を作成するソリューションを使用するでしょう。どちらのツールも、多様なデータ・ソースを融合して表示することに関しては非常に優れています。しかし、これらのツール単体では、Google マップや Virtual Earth などのデータ・ソースを使用することはできません。また、十分な機能が付いた地図を持ち、それなりのレベルの機能を備えた Web サイトを MapServer のテンプレートや自作の JavaScript を使用してセットアップしようとすると、非常に時間がかかります。

OpenLayers はそうした問題を解決することができます。OpenLayers を利用すると、Web サイト上にフル機能の地図を短時間で簡単に実装することができます。実装された地図は多種多様なソースのデータ (例えば、公開サーバー、MapServer、ArcIMS サービス、ESRI ArcGIS、さらには NASA World Wind などのデータ) を利用することができます。また MapServer ベースの WMS (Web Map Service) サービスを利用するように地図を設定すると、その地図の中でユーザー独自のデータセット (シェープファイルやラスター・データなど) も利用できるようになります。

注: 投影法やシェープファイルといった GIS 用語を理解していない人は、「参考文献」のリンクに挙げた developerWorks の記事、「Linux 上のアプリケーションで GDAL を使用して地理空間データを扱う」を参照してください。

OpenLayers ライブラリーのアーキテクチャーの概要

OpenLayers はスタンドアロンの JavaScript ライブラリーであり、サーバー・サイドのコンポーネントは必要なく、Web サーバーに関する特別な要件もありません。また OpenLayers は適切に整理された一連の JavaScript クラスで構成されています。出発点は実際のマップ・オブジェクトそのものである OpenLayers.Map です。Layer.ArcIMSLayer.Google など、個々のレイヤー・クラスはインスタンス化されて地図に追加されます。地図用コントロールを表現するクラス (Control.Pan など) は地図を操作するために使用されます。その他にも、スタイル設定、データ・フォーマットの設定、座標の保存等々のための多様なユーティリティー・クラスがあります。完全なドキュメントについては「参考文献」に挙げた OpenLayers API のドキュメントへのリンクを参照してください。

この記事では、これらのクラスを利用して図 1 のサンプル Web サイトを作成します。このサイトを合成する元となっているデータのソースは、Google Earth、Virtual Earth、ローカルのシェープファイル、そして NOAA RIDGE (National Oceanic and Atmospheric Administration Radar Integrated Display with Geospatial Elements) レーダーがカバーする範囲の WMS です。

図 1. 完成した地図の例 (hike.chrismichaelis.com)
サンプル・アプリケーションのスクリーン・ショットです。左側にはインタラクティブな操作のための選択肢が表示され、右側には衛星写真による地図に赤でルートが重ねて表示されています。

またこのサンプル Web サイトでは、ユーザーが地図上にハイキング・ルートを描くことができます。これらのルートに関しては、Google Gears を使用してブラウザー・セッションに保存することも、KML (Keyhole Markup Language) フォーマットでエクスポートすることもできます。Google Gears はブラウザーのプラグインとして JavaScript を拡張することができるため、セッション間の永続性を保持した状態でページのデータを保存することができます。また Google Gears には、バックグラウンドで JavaScript を実行できるといった他のメリットもあります。この記事の例では、あくまでも保存のために Google Gears を使用します。詳細については「参考文献」に挙げた Google Gears 開発者向けのサイトへのリンクを参照してください。


Web サイトを構築する

最初のステップとして、地図を含む Web サイトを作成します。この記事の例ではコンテンツを整理しやすくするために、HTML、CSS、JavaScript のコンテンツに対してそれぞれ別のファイルを使用します。この構成にすると将来の保守も楽になり、また後でサイトを拡張する場合にも作業が容易になります。OpenLayers は純粋に JavaScript であるため、作成されるページは純粋な HTML であり、サーバー・サイドの言語は何も使用しません。そのため、Apache のようなサーバーの代わりに Nginx のような高速で軽量の Web サーバーを使用してサイトをホストすることができます。すべてのデータは Google Gears に保存されるか、あるいはインターネットのソースから取得されるため、データベース・サーバーは必要ありません。

この新しいサイトには jQuery JavaScript ライブラリーも含まれています。jQuery に用意されたツールを使用すると JavaScript 開発を迅速に行うことができます。例えば、セレクターを使用すると文書オブジェクトに素早くアクセスすることができます。一例として、$('.btnActive').removeClass('btnActive'); を使用すると、btnActive という CSS クラスが使われているすべてのインスタンスから btnActive を削除することができ、getElementsByClassName 関数によって取得したオブジェクトに対して特別にループ処理を行う必要がありません。同様に、$('#someID') を使用すると、HTML の id 属性によって要素を選択することができます。


OpenLayers を実装する

まず、OpenLayers のサイト (「参考文献」を参照) から OpenLayers パッケージをダウンロードします。そのパッケージをサンプル Web サイトがある場所のサブディレクトリーに解凍し、以下の行を使用して HTML ファイルに含めます。

<script type="text/javascript" 
    src="OpenLayers/OpenLayers.js"></script>'

JavaScript の中で、jQuery の document ready 関数を使用して地図をセットアップします。この関数は onLoad イベントの後に起動されます。onLoad イベントが起動される時点ではすべての画像と DOM 要素がロードされて準備完了となるわけではありませんが、jQuery の ready 関数が起動されると、すべての画像と DOM 要素が必ずロードされて準備完了となります。ready 関数では、地図を作成し、その地図に変数を割り当てます (リスト 1 を参照)。コンストラクターの 2 番目の引数により、さまざまなオプションを渡すことができます (地図に追加するコントロール (cpntrols)、地図のデータ投影法 (data projection) と表示用投影法 (display projection)、最大表示可能範囲 (maxExtent) など)。maxExtent パラメーターはパンの範囲を制限します。maxExtent パラメーターは、複数のデータ・レイヤーを使用する場合にはなおさらですが、奇妙な動作を防ぐために指定する必要があります。このパラメーターを指定しないと、まったくパン機能が動作しない、あるいは追加したレイヤーとベース・レイヤーとがずれる、といった問題が起こる可能性があります。

リスト 1. mapContainer という div の中に OpenLayers による地図を作成する
$(document).ready(function() {
  var olMap = new OpenLayers.Map('mapContainer', {
    controls: [
      new OpenLayers.Control.MouseDefaults(),
    ],
    projection: new OpenLayers.Projection('EPSG:900913'),
    displayProjection: new OpenLayers.Projection('EPSG:4326'),
    maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34) 
  });
});

OpenLayers による地図は、ベース・レイヤーと、(オプションとして) いくつかのオーバーレイ・レイヤー (つまりベース・レイヤー以外のレイヤー) で構成されます。ベース・レイヤーは通常、Google Earth や Virtual Earth などの画像レイヤーであり、オーバーレイは通常、ユーザーが描画したベクター・レイヤーや MapServer から取得した画像です。ベース・レイヤーは、1 度に 1 つのみがアクティブになります。


複数のソースからデータを取得する

通常、ベース・レイヤーとして Google Earth や Virtual Earth が使用されます。これらのデータ・ソースや他の商用無料データ・ソースは球体メルカトル・データ投影法 (ID は EPSG (European Petroleum Survey Group) コード 900913) を使用しています。この投影法では地球の形状を球体モデルで表現し、地球全体をメートルで測定したデータを提供します。この投影法は大縮尺では正確に見えますが、小さな地域レベルの測定は不正確です。OpenLayers にはデータ自体を再投影する機能がないため、地図に含まれるすべてのデータを球体メルカトル投影法でも提供する必要があります。球体メルカトルに関する詳細は「参考文献」のリンクを参照してください。

では、ベース・レイヤーを地図に追加してみましょう。アクティブになるのは 1 度に 1 つのベース・レイヤーのみであるため、いくらでも好きなだけベース・レイヤーを追加することができますが、デフォルトでアクティブになるのは最初のベース・レイヤーです。後ほど、ベース・レイヤーを切り換えるためのメカニズムを作成します。リスト 2 は Virtual Earth レイヤーと Google Earth レイヤーを追加するためのコードを示しています。

リスト 2. Virtual Earth のベース・レイヤーと Google Earth のベース・レイヤーを追加する
// Create the Virtual Earth layer
var veSatLayer = new OpenLayers.Layer.VirtualEarth('Virt. Earth', {
  sphericalMercator: true,
  'type': VEMapStyle.Aerial,
});
olMap.addLayer(veSatLayer);

// Create a Google Earth layer (because it is not first, it is not selected by default)
var googleEarth = new OpenLayers.Layer.Google('Google', {
  sphericalMercator: true,
});
olMap.addLayer(googleEarth);

次に NOAA RIDGE レーダーの WMS のレイヤーを追加します。このサービスは米国上空で測定された反射率を提供しており、通常は天気予報や雲解析に使用されますが、ハイキングを計画するためのツールなどに天気の情報を一般的な使いやすい形で提供することもできます。このサービスのデータは NAD83 緯度経度座標系 (EPSG コード 4269) で提供されるため、球体メルカトル投影法を使用するという要件に合いません。そのため、NOAA RIDGE レーダーの WMS のレイヤーを OpenLayers に直接追加することはできません。

そこで、MapServer を使用して再投影を実行しましょう。場合によると、球体メルカトル投影法のデータを要求できる場合もあるかもしれず、またデータ・プロバイダーが球体メルカトル投影法にデータを投影してくれるかもしれません。しかしそれに頼ってはなりません。どのようにデータが提供されるかによらず、皆さんのサーバーで再投影を実行し、サード・パーティーのサーバーの負荷や需要を減らした方が、より配慮されたやり方になります。最初のステップとして、皆さんの Web サーバーに MapServer をインストールします (ほとんどの Linux ソフトウェア・リポジトリーで MapServer を入手することができます)。次に、以下の行を Web サーバーの /usr/share/proj/epsg ファイルの最後に追加します。

<900913> +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 
    +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null 
    +no_defs

この行は球体メルカトル投影法を定義しており、この行により、MapServer (そしてその投影ライブラリーである PROJ4) はデータを球体メルカトル投影法に変換する方法を理解することができます。

続いて、地図に含めたいデータを定義する MapServer のマップ・ファイルを作成します (リスト 3 を参照)。重要なポイントは、マップ・ファイルから EPSG:4326 への投影法を設定すること、そして追加したい WMS レイヤーを適切なメタデータと共に定義することです (LAYER セクション)。最後に必要なことは、マップ・ファイルに必要な WEB セクションを含めることです。WEB セクションの wms_srs の値には、要求したい投影法 (この場合は 900913) を指定します。この設定は基本的に、ユーザーが要求できる投影法の一覧を提供しています。訪問者が他の投影法を要求すると、「サポートされている SRS を要求してください」といったエラー・メッセージが表示されます (SRS は Spatial Reference System (空間参照系)、つまり投影法を意味します)。

リスト 3. MapServer マップ・ファイルに NOAA RIDGE レーダーの WMS のレイヤーを含め、球体メルカトルに再投影する
MAP
  IMAGEQUALITY 95
  IMAGETYPE png

  OUTPUTFORMAT
    NAME png
    DRIVER 'GD/PNG'
    MIMETYPE 'image/png'
    IMAGEMODE RGBA
    EXTENSION 'png'
  END

  PROJECTION
    "init=epsg:4326"
  END

  WEB
    IMAGEPATH '/tmp/'
    IMAGEURL '/tmp/'
    METADATA
      "wms_srs" "EPSG:4326 EPSG:4326 EPSG:3857 EPSG:900913"
    END
  END

  LAYER
    NAME noaaradar
    TYPE RASTER
    CONNECTIONTYPE WMS
    CONNECTION "http://gis.srh.noaa.gov/arcgis/services/RIDGERadar/MapServer/WMSServer?" 

    METADATA
      "wms_srs" "EPSG:4326"
      "wms_name" "0"
      "wms_server_version" "1.1.1"
      "wms_format" "image/png"
    END

    PROJECTION
      "init=epsg:4629"
    END
  END
END

これでようやく、NOAA RIDGE レーダーの WMS のレイヤーを地図に追加することができます。そのために、新たに作成されたマップ・ファイルを参照するようにします (リスト 4 を参照)。

リスト 4. 独自のローカル MapServer インスタンスを使用して NOAA RIDGE レーダーの WMS のレイヤーを追加する
// Add the NOAA RIDGE radar WMS by routing it through our local MapServer instance
// so that it can be re-projected on the fly to Spherical Mercator
var ridgeRadar = new OpenLayers.Layer.WMS('NOAA RidgeRadar',
        'http://hike.chrismichaelis.com/cgi-bin/mapserv.cgi', {
  layers: 'noaaradar',
  map: '/var/www/hike.chrismichaelis.com/mapserver/NOAARidgeRadar.map',
  transparent: true,
  singleTile: true,
  visibility: false,
  srs: 'EPSG:900913'
});
olMap.addLayer(ridgeRadar);

ダウンロードしたデータであれ、ユーザーが作成したデータであれ、独自のローカル・データを含められるようにしておくと便利な場合がよくあります。MapServer を使用すると、NOAA RIDGE レーダーの WMS のレイヤーを追加した方法と同じような方法でローカル・データを含めることができます。MapServer のマップ・ファイルはリスト 3 とまったく同じように作成されますが、リスト 5 に示すように LAYER セクションには WMS に関する記述をするのではなく、シェープファイルに関する記述をします。

リスト 5. MapServer のマップ・ファイルの LAYER セクションでローカルのシェープファイルを再投影し、提供する
LAYER
  NAME usaroads
  TYPE LINE
  DATA '/var/www/hike.chrismichaelis.com/mapserver/usaroads/roadtrl020.shp'

  PROJECTION
    "init=epsg:4326"
  END

  CLASS
     NAME 'roadtrl020' 
     STYLE
     WIDTH 2 
     COLOR 255 0 0
  END
END

リスト 4 と同じ方法を使って layers オプションと map オプションを適切な値で置き換え、地図に道路のレイヤーを追加します。この時点で、複数のソースからデータを取得するフル機能の地図ができあがり、デフォルト機能であるマウスによるパン、そしてマウス・ホイールによるズーム・イン、ズーム・アウトなども機能します。ただし、表示レイヤーの制御機能やハイキング・ルートの描画機能はまだ実装されていません。地図が完全に動作するようになったので、ズーム・アウトして米国全体を表示したままにするのではなく、関心のある地域にズーム・インすることができます。そのためには、整数値で指定したズーム・レベルに拡大し (任意の固定縮尺で試し、さまざまな値による効果を確認します)、対象の場所を緯度と経度で定義します。次に、WGS84 による緯度と経度 (EPSG:4326) から、現在地図に使用されている投影法 (球体メルカトル) へと座標系を投影 (つまり変換) します。このプロセスをリスト 6 に示します。

リスト 6. 緯度と経度を指定して任意の場所にズーム・インする
// Move to your default location - Pocatello, ID
olMap.zoomTo(10);
var newCenter = new OpenLayers.LonLat(-112.4447222, 42.8713889);
newCenter.transform(new OpenLayers.Projection('EPSG:4326'), olMap.getProjectionObject());
olMap.setCenter(newCenter);

機能を強化する

ナビゲーション・コントロールがない地図は、完全な地図とは言えません。OpenLayers にはデフォルトで、マウス・ホイールによるズーム・イン機能とズーム・アウト機能、そしてマウスによるパン機能があります。また、オンマップのコントロールを追加することもできます。以下はその一例です。

olMap.addControls(new OpenLayers.Control.NavToolbar);

ただし、独自の HTML レイアウトを使用してナビゲーション・コントロールを配置、描画した方が、はるかに柔軟性が高く、ベースにある地図データとナビゲーション・コントロールとの深刻な衝突などの問題を避けることができます。深刻な衝突が特に問題となるのは、縮尺バーやテキスト情報が地図上にオーバーレイされる場合です (白い雪の明るい画像の上に縮尺の文字が白で表示される場合など)。

この例では、単純に HTML <img> タグを使ってアイコンの画像を取得し、jQuery を使ってその画像に匿名関数を追加します。これらの関数により、ズーム関数の呼び出しや地図の中心の設定など、地図を適切に操作することができます (リスト 7 を参照)。また同じくリスト 7 に示すように、マウスの位置を示すコントロールや地図の縮尺を表示するコントロール、そして (ベース・レイヤーを含め) 表示レイヤーを変更する機能を提供するコントロールを追加することもできます。これらのコントロールのために <div> 引数を追加し、この <div> 引数が OpenLayers に対し、これらのコントロールをデフォルトどおり地図上に直接描画するのではなく、指定された HTML <div> 要素の中に描画するように指示します。

リスト 7. ズーム、パン、レイヤー選択のコントロールに加え、マウス位置や縮尺を示すコントロールも追加する
// Set up your map GUI controls (vs. using OpenLayers built-in controls)
$('#zoomIn').click(function() {
  olMap.zoomIn();
});
$('#zoomOut').click(function() {
  olMap.zoomOut();
});
$('#moveUp').click(function() {
  // toArray on bounds are in order of left, bottom, right, top
  olMap.setCenter(
    new OpenLayers.LonLat(olMap.getCenter().lon, olMap.getExtent().toArray()[3]));
});
$('#moveDown').click(function() {
  olMap.setCenter(
    new OpenLayers.LonLat(olMap.getCenter().lon, olMap.getExtent().toArray()[1]));
});
$('#moveLeft').click(function() {
  olMap.setCenter(
    new OpenLayers.LonLat(olMap.getExtent().toArray()[0], olMap.getCenter().lat));
});
$('#moveRight').click(function() {
  olMap.setCenter(
    new OpenLayers.LonLat(olMap.getExtent().toArray()[2], olMap.getCenter().lat));
});

// Add the mouse position to your Controls area
olMap.addControl(new OpenLayers.Control.MousePosition({
  'div': OpenLayers.Util.getElement('mousePosition'),
  numDigits: 4
}));

// Add a scale indicator to the Controls area
olMap.addControl(new OpenLayers.Control.ScaleLine({
  'div': OpenLayers.Util.getElement('scaleBar'),
  geoDesic: true
}));

// Add a layer switcher to your Controls area
olMap.addControl(new OpenLayers.Control.LayerSwitcher({
  'div': OpenLayers.Util.getElement('layerSwitcher'),
  roundedCorner: false
}));

高度な機能

こうなると、サイト訪問者が画面上でハイキング・ルートを描画できるようにしたいものです。この機能を実現するためには、image タグを使ってボタンをいくつか HTML ファイルに追加します (pan modedraw modedelete modeSave to KML など)。JavaScript の中で、ハイキング・ルートを含むベクター・レイヤーを最初に設定し、そしてそのレイヤーを地図に追加します。次に、SelectFeatureDrawFeature という 2 つのコントロールを作成します。SelectFeature コントロールでは、選択されたフィーチャーを削除する関数を featurehighlighted イベントに追加し、このコントロールを実質的に「削除用コントロール」にしています。このコントロールは、box を true に、そして hover を false に設定することにより、マウス・ホバーしただけでハイキング・ルートの線が削除されるようにするのではなく、ユーザーがマウスでボックスを描画した場合にそのボックス内に含まれるハイキング・ルートの線が削除されるようにしています。DrawFeature コントロールの方はもっと単純であり、ユーザーは単に地図上にこのコントロールを追加すればよいのです。

次に、jQuery を使用して、新しいボタン画像のそれぞれに対して関数を追加します。これらの関数の主な目的は、使用されていないコントロールでは deactivate() を呼び出し、使用されているコントロールでは activate() を呼び出すことです。SelectFeature コントロールも DrawFeature コントロールも非アクティブの場合には、地図はパン・モードに切り替わります。またこれらの関数では、ボーダーの色を白に変更する btnActive という CSS クラスを追加、削除することにより、アクティブなボタンを強調表示することもできます。これらのステップのすべてがリスト 8 に示されています。これらのステップにより、要求される機能を地図上に実現することができます。

リスト 8. ベクター・レイヤーを追加し、ベクター・レイヤーを操作する関数を設定する
// Create a vector layer that will represent your hiking routes
var hikePaths = new OpenLayers.Layer.Vector("Hike Routes", {
  strategies: [new OpenLayers.Strategy.Fixed()],
  style: {
    strokeWidth: 3,
    strokeColor: "#00eeee"
  }
});
olMap.addLayer(hikePaths);

// Set up your pan and draw mode toggling and edit controls
featureSelect = new OpenLayers.Control.SelectFeature(hikePaths, {
  box: true,
  multiple: true,
  hover: false,
  eventListeners: {
    featurehighlighted: function(feat) {
      // Remove a feature from the layer
      hikePaths.destroyFeatures(hikePaths.selectedFeatures);
    }
  }
});
featureDraw = new OpenLayers.Control.DrawFeature(hikePaths, OpenLayers.Handler.Path);
olMap.addControls([featureSelect, featureDraw]);

$('#drawMode').click(function() {
  featureSelect.deactivate();
  featureDraw.activate();
  $('.btnActive').removeClass('btnActive');
  $('#drawMode').addClass('btnActive');
});
$('#panMode').click(function() {
  featureSelect.deactivate();
  featureDraw.deactivate();
  $('.btnActive').removeClass('btnActive');
  $('#panMode').addClass('btnActive');
});
// Set up your delete button - 
// just turns on selection mode, and on select the listener will destroy the feature
$('#deleteMode').click(function() {
  featureDraw.deactivate();
  featureSelect.activate();
  $('.btnActive').removeClass('btnActive');
  $('#deleteMode').addClass('btnActive');
});

Google Earth や Google マップを使用している人は多いので、KML フォーマットでエクスポートできる Layer オブジェクトの機能は重宝します。KML フォーマットでエクスポートするには、リスト 9 の OpenLayers.Format.KML クラスを使用します。

リスト 9. ベクター・レイヤー機能を KML フォーマットでエクスポートする
// Set up the Save to KML button
$('#saveKML').click(function() {
  var kmlFormat = new OpenLayers.Format.KML();
  var newWindow = window.open('', 
      'KML Export ' + (new Date()).getTime(), "width=300,height=300");
  newWindow.document.write('<textarea id="kml" style="width: 100%; height: 100%">' +
      kmlFormat.write(hikePaths.features) + '</textarea>');
});

Google Gears を使用してデータを保存する

Google Gears を使用すると、サイトのハイキング・データをブラウザー・セッションに保存することができるため、そのデータをいつでも利用できて便利です。そのためには、まず OpenLayers.Protocol.SQL.Gears クラスをインスタンス化し、このクラスにデータベース名とテーブル名を渡す必要があります。その後、Gears インスタンスにベクター・レイヤーの protocol プロパティーを設定します。最初の設定の際、既に保存されているフィーチャーを read() 関数を使用してデータベースから取得し、それをベクター・レイヤーの addFeatures() に渡すことができます (リスト 10 を参照)。

リスト 10. Google Gears を利用してベクター・レイヤーを追加する (Gears を使用せずにベクター・レイヤーを追加するリスト 8 と比較してください)
// Create a vector layer that will represent your hiking routes
var hikePaths = new OpenLayers.Layer.Vector("Hike Routes", {
  strategies: [new OpenLayers.Strategy.Fixed()],
  style: {
    strokeWidth: 3,
    strokeColor: "#00eeee"
  }
});

// Because you'll use Google Gears to store hiking routes, set up that protocol:
var gears = new OpenLayers.Protocol.SQL.Gears({
  saveFeatureState: false,
  databaseName: 'hikingPaths',
  tableName: 'hikingPaths'
});
if (!gears.supported()) {
  alert('Warning: Google Gears is not available. You will not be able to use the hike 
         path drawing tools. Visit http://gears.google.com to install Gears.');
}
else {
  hikePaths.protocol = gears;
  var existingGearsData = gears.read();
  if (existingGearsData.features) hikePaths.addFeatures(existingGearsData.features);
}
// Finally, add the layer
olMap.addLayer(hikePaths);

フィーチャーが削除された場合には、それらのフィーチャーを Gears データベースから削除し、またそのレイヤーからも削除する必要があります。そのため、この動作を SelectFeature コントロールの featurehighlighted イベントに追加します (リスト 11 を参照)。同様に、機能が追加された場合には DrawFeature コントロールの featureAdded イベントを使用します。

リスト 11. Gears データベースに機能を追加、削除する (Gears を使用せずにフィーチャーを管理するリスト 8 と比較してください)
// Set up your pan and draw mode toggling and edit controls
featureSelect = new OpenLayers.Control.SelectFeature(hikePaths, {
  box: true,
  multiple: true,
  hover: false,
  eventListeners: {
    featurehighlighted: function(feat) {
      // Remove it from the Gears database
      if (gears.supported()) gears.delete(hikePaths.selectedFeatures);
      // Remove the actual feature from the layer
      hikePaths.destroyFeatures(hikePaths.selectedFeatures);
    }
  }
});
featureDraw = new OpenLayers.Control.DrawFeature(hikePaths, OpenLayers.Handler.Path, {
  featureAdded: function(feat) {
    // Send to the Gears database
    if (gears.supported()) gears.create(feat);
  }
});
olMap.addControls([featureSelect, featureDraw]);

まとめ

この記事で作成した Web サイトは完全に動作しますが、まだ機能強化の余地があります。例えば、該当する場所がどこにあるのか、もっとよくわかるようにするための地図を追加したり、NOAA RIDGE レーダーの WMS のレイヤーを始めとする各レイヤーに凡例を追加したり、ソーシャル・ネットワーキングとの連携によってハイキングの情報を共有する機能を追加したりするなど、さまざまな機能を追加することが考えられます。実際の例を「参考文献」のリンクで参照するか、あるいは完全なソース・コードを「ダウンロード」セクションからダウンロードしてください。皆さんが自らコードを作成する場合には、「参考文献」セクションに挙げた OpenLayers サイトの Examples のページを参照してください。地図の作成を楽しんでください!


ダウンロード

内容ファイル名サイズ
Hike tracker and planner example projectos-openlayers-HikeExample.zip6.6KB

参考文献

学ぶために

製品や技術を入手するために

  • MapServer はオンザフライでデータを再投影することができるサーバー・サイドのマップ・ソリューションです。
  • 皆さんの次のオープンソース開発プロジェクトを IBM ソフトウェアの試用版を使用して革新してください。ダウンロード、あるいは DVD で入手することができます。
  • IBM 製品の評価版をダウンロードするか、あるいは IBM SOA Sandbox のオンライン試用版で、DB2、Lotus、Rational、Tivoli、WebSphere などが提供するアプリケーション開発ツールやミドルウェア製品を試してみてください。

議論するために

  • developerWorks blogs から developerWorks コミュニティーに加わってください。
  • developerWorks コミュニティーに参加し、開発者向けのブログ、フォーラム、グループ、およびウィキを利用しながら、他の developerWorks ユーザーとやり取りしてください。

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Open source
ArticleID=780419
ArticleTitle=OpenLayers を使用してデータを統合する
publish-date=12162011