OpenLayersを使ってみる - Google Maps とMapServerを重ねる

Google Mapsの投影(Spherical Mercator)に合わせる必要がある
http://docs.openlayers.org/library/spherical_mercator.html#spherical-mercator

1.MapServer側の準備
投影に　EPSG:900913　を作る。（これ、Google Mapsの投影）
最新(現在4.6.1)のProj.4の　esri.extra　にある。

#
#  Chris' funny epsgish code for the google mercator
#
<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 +wktext  +no_defs <>

MapServer的には　ESRI.EXTRA:900913　で使えるけどOpenLayersからWMSレイヤーとして呼んだら怒られた。
だから、epsgの最後に追加する。
mapファイルのメタデータにそれを追加する。

  WEB
	METADATA
	  WMS_SRS "EPSG:4326 EPSG:900913"
	END
  END

2.OpemLayersの設定

var options = {
    theme: null,
    projection: new OpenLayers.Projection("EPSG:900913"), // 地図の投影
    displayProjection: new OpenLayers.Projection("EPSG:4326"), // 座標表示が経緯度になる
    units: "m",
    numZoomLevels: 18,
    maxResolution: 156543.0339
};
map = new OpenLayers.Map( $('map'), options );

単位はメートル。東京あたりだと　x = 15546985、y = 4257848　くらい。

3.Googleレイヤーのオプションに追加。

var google = new OpenLayers.Layer.Google(
    "Google",
    { type: G_NORMAL_MAP,
        sphericalMercator: true
    } );

4.MapServerのレイヤーをOpenLayers.Layer.WMSで読み込む

var layer1 = new OpenLayers.Layer.WMS( "japan",
    "http://server/cgi-bin/mapserv?map=wms.map&SERVICE=WMS&VERSION=1.1.1&",
    {layers: 'japan'},
    {isBaseLayer: false, visibility: true, opacity: 0.5}
);

※OpenLayers.Layer.MapServerというもあるけど上手くいかなかったので挫折。
OpenLayers.Layer.KaMapも試したい。

タグ：OpenLayers GoogleMapsAPI