1
11
2012
OpenLayersでGoogle Mapsを表示してみる
OpenLayersを用いてGoogle Mapsの地図を表示してみる
OpenLayersは汎用的なJavascriptベースの地図表示フレームワークで、Open Geospatial Consortiumの Web Map Service(WMS) などのプロトコルに対応している．WMS以外にも多くのプロトコルに対応しており、メジャーなところではGoogle Maps の地図を直接読み込んで使用することが可能である．
Google Mapsなどのコマーシャルベースのサービスでは Spherical Mercator 投影法を用いており、”EPSG:900913″ というX軸Y軸方向を距離で表示した規格が採用されており、OpenLayers自体は “EPSG:4326″ という緯度・経度ベースの規格を用いている．OpenLayersのベースマップにGoogle Mapsの地図を使用する場合には、”EPSG:900913″ と “EPSG:4326″の間で投影変換が必要になるが、OpenLayersには投影変換を行うクラスやメソッドが用意されているので、自分で面倒な変換処理を用意する必要はない．
Spherical MercatorについてはOpenLayerのドキュメントに詳しい解説があるので、一度目を通しておくと良いでしょう．
OpenLayersのGoogle Maps用のレイヤークラスを使うと、簡潔なJavascriptコードでGoogle Mapsの地図データをOpenLayers上に表示することができる．
まだOpenLayersにちょっと触れただけで、OpenLayersにどのような機能があるのかも良く分かっていない状態だが、Webアプリを開発する際のJavascriptフレームワークとして重宝しそうだ．まだドキュメント類が貧弱で、簡単なクラスの説明と幾つかの簡単なサンプルコードが公開されているだけでどのように使うのかといったチュートリアル的なドキュメントが殆どないので、OpenLayersを使いこなすのには時間が掛かりそうだ．
Google Maps をOpenLayersの背景地図として取り込んだ例
上記のHTMLソースコード： https://y2tech.net/blog/wp-content/uploads/GISSample/OpenLayersGoogle.html
[sourcecode language=”Javascript”] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>OpenLayers Test (Google Maps V3)</title> </head> <script src="http://openlayers.org/api/OpenLayers.js"></script> <script src="http://maps.google.co.jp/maps/api/js?v=3.5&sensor=false&language=ja"></script> <script> function init() { var mapCenterLatLng = new OpenLayers.LonLat(139.553146, 35.336063); // Kamukura var map = new OpenLayers.Map(‘map_google’); map.addControl( new OpenLayers.Control.LayerSwitcher() ); var gmap_terrain = new OpenLayers.Layer.Google( "Google TERRAIN", {type: google.maps.MapTypeId.TERRAIN} ); var gmap = new OpenLayers.Layer.Google( "Google ROADMAP", // the default {numZoomLevels: 20} ); var gmap_hybrid = new OpenLayers.Layer.Google( "Google HYBRID", {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20} ); var gmap_satellite = new OpenLayers.Layer.Google( "Google SATELLITE", {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22} ); map.addLayers( [ gmap, gmap_terrain, gmap_hybrid, gmap_satellite] ); // Google.v3 uses EPSG:900913 as projection, so we have to // transform our coordinates var projection = new OpenLayers.Projection("EPSG:4326"); var mapCenterGoogle = mapCenterLatLng.transform( projection, map.getProjectionObject() ); map.setCenter( mapCenterGoogle, 15 ); } </script> <style type="text/css"> #map_google { width: 100%; height: 480px; border: solid 1px #999; } </style> </head> <body onload="init()"> <div id="map_google" ></div> </body> </html> </body> </html> [/sourcecode]
