« ロボットから考える、身体性としての構造が持つ意味 | メイン | GTileLayerによる画像重ねのサンプルコードのダウンロード »

GTileLayerによる画像重ね from DBマガジン12月号

追記:ソースコード載せました。

 以前、要求2.0開発でお伝えしたとおり、Google Maps APIのGTileLayerを使ったアプリケーションの解説をDBマガジン2006年12月号(2006年10月24日発売)寄稿しました。こんなのが作れます。


 しかけとしては以下のような感じ。マップタイプ(GMapType)というのが地図とか航空写真という単位。マップタイプは複数のレイヤー(GTileLayer)が重なり合っており、それそれのレイヤーはタイル(Tile)という単位で画像が切れて管理されています。Google Mapsでは、そのタイル単位で画像を先読みすることでスムーズな動きを実現しています。
 GTileLayerのインターフェースは公開されており、これを実装することで自分が作った画像をタイル単位、具体的には緯度経度で呼び出すことができるようになります。サーバ側ではリクエストされた緯度経度からJavaでデータを取得(JDBC)しタイル画像を生成(Java2D)しています。
 マーカー(GMarker)を使う場合に比べた場合、デメリットは置いた対象に対してクリックやドラッグはできない点。画像ですから。ただし大量に置くことが可能です。今回のサンプルでも10000ヶ所においています。大量にデータを配置したい場合に有効なテクニックと理解していただければと思います。

 記事やコードを見ていただければ分かると思いますが、すごい単純です(と、思ったら雑誌添付のCDにしか収録されていないのかも。配布していいか聞いてみます)。最後にダウンロード&ちょこっと解説しておきます。


 いつもどおり、最後にはえらそうなことを書いておきました。

もちろん、これまでのGISアプリケーションに代わってGoogle Mapsが利用されるようになる、というわけではない。Google MapsはWebアプリケーションなので、高い性能を持つ既存のGISアプリケーションに代替されるものではないだろう。しかし、これまでのコストを考えれば、ほんの数日で完成してしまうGoogleMapsは十分に魅力的なはずだ。これまでGISアプリケーションの構築をあきらめていたような方に、新しい可能性を提供している。

筆者は、このインパクトの大きさを計り知れないと感じている。もはや、このアプリケーションのコストを人月で見積もる意味はない。ほんの数人日以上の値段を付けられないからだ。では、このアプリケーションの価値はどこにあり、何で対価を得るべきなのか。システム構築にも新しい流れが出てきているように感じるのは、筆者だけだろうか。


 さて、ソースコードのダウンロードと実行手順です。諸事情でややこいのでお気をつけて。

1.こちらからダウンロードして解凍する(1.50 MB)
2.まず、じゃらんからデータをダウンロードする
 2.a じゃらんWebサービスに登録する。アカウント登録ページから登録を行なってキーを取得
 2.b dataload.batを開いて{key}の部分をキーに書き換える
 2.c クリックしてデータができるのを待つ
3.Google Mapsを使えるようにする
3.a Googleアカウントを取得する
3.b Sign UpページからGoogle Maps API用のキーを取得する。サーバ名はhttp://localhost:8080/で
3.c src/webapps/index.htmlで{key}の部分をキーに書き換える
4.jetty.batをクリックしてサーバを起動する
5.http://localhost:8080/にアクセスする。


 ソースコードの見所は以下の通り。基本的にはコード嫁精神でお願いします(雑誌買ってくれると丁寧な解説があるよっw)。

1.Google Maps APIで、GTileLayerの使い方 : src/webapp/index.tml
2.Perlのコードを基にした、Javaによる日本測地系/世界測地系変換モジュール : src/java/dbm/jalan/GeoTool.java
3.JUnitで対話型でテスト結果を確認する方法 : src/test/dbm/CheckDialog.java


 一番、興味があるであろうGTileLayerの部分だけコードを乗せておきます。

//タイル画像を取得するためのURL生成関数
//パラメタはタイルのインデックス番号と縮尺
var CustomGetTileUrl = function(tile, zoom) { 
  //ピクセル位置の計算(タイルは1枚256px)
  var ulp = new GPoint(tile.x*256,(tile.y)*256);
  var lrp = new GPoint((tile.x+1)*256,(tile.y+1)*256);
  //緯度経度に変換
  var ull = G_NORMAL_MAP.getProjection().fromPixelToLatLng(ulp,zoom);
  var lrl = G_NORMAL_MAP.getProjection().fromPixelToLatLng(lrp,zoom);
  //URL組み立て。サーバ側は画像を生成するServlet
  var imageurl = 'image?';
  imageurl += "ulx=" + ull.lng();
  imageurl += "&uly=" + ull.lat();
  imageurl += "&lrx=" + lrl.lng();
  imageurl += "&lry=" + lrl.lat();
  imageurl += "&zoom=" + zoom;
  return imageurl;
}
function load() {
  if (GBrowserIsCompatible()) {
  //作ります
  var dataLayer= new GTileLayer(new GCopyrightCollection(""),3,17);
  //上で記述した関数。これはGTileLayerのインタフェース
  dataLayer.getTileUrl=CustomGetTileUrl; 
  //マップタイプ定義1層目は普通の地図、2層目に新しいの
  var mapNormal = new GMapType(
    [G_NORMAL_MAP.getTileLayers()[0],dataLayer], 
    G_NORMAL_MAP.getProjection(), "地図");
  var mapSatellite = new GMapType(
    [G_SATELLITE_MAP.getTileLayers()[0],dataLayer], 
    G_SATELLITE_MAP.getProjection(), "航空写真");
  //2つ目はオプション。マップタイプを指定
  var map = new GMap2(document.getElementById("map"), 
    {mapTypes: [mapNormal, mapSatellite]});
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.setCenter(new GLatLng(35.6884, 139.7054), 9);
  }
}


 コードや記事内容について、なにかフィードバックがあればお気軽に。


B000JBXQ8SDB (ディービー) マガジン 2006年 12月号 [雑誌]
翔泳社 2006-10-24

by G-Tools

トラックバック

このエントリーのトラックバックURL:
http://www.arclamp.jp/mt33/mt-tracback.cgi/1644

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

About

2006年10月24日 12:49に投稿されたエントリーのページです。

ひとつ前の投稿は「ロボットから考える、身体性としての構造が持つ意味」です。

次の投稿は「GTileLayerによる画像重ねのサンプルコードのダウンロード」です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。

Creative Commons License
このブログは、次のライセンスで保護されています。 クリエイティブ・コモンズ・ライセンス.
Powered by
Movable Type