google map上にwmsレイヤを表示

OpenLayers向けに構築したシステムをgooglemapに置き換えたときにできるだけ使えるリソースは再利用したい。
今回はgeoserverで提供しているWMSレイヤ(タイルとシングルタイル)を表示する方法を調査。

タイル(256×256)の使い方

var mapOptions = {
	center: new google.maps.LatLng(y, x),
	zoom: scale,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	scaleControl: true,
	scaleControlOptions: { position: google.maps.ControlPosition.BOTTOM_CENTER }
}
var map_canvas = new google.maps.Map(document.getElementById(id_map), mapOptions);

var SLPLayer = new google.maps.ImageMapType({
    getTileUrl: 
		function (coord, zoom) {
	        var proj = map_canvas.getProjection();
	        var zfactor = Math.pow(2, zoom);                      
	        var ul = new google.maps.Point(coord.x * 256.0 / zfactor , (coord.y + 1) * 256.0 / zfactor );
	        var lr = new google.maps.Point((coord.x + 1) * 256.0 / zfactor , (coord.y) * 256.0 / zfactor );
	        var ulw = proj.fromPointToLatLng(ul);
	        var lrw = proj.fromPointToLatLng(lr); 	                               
	        var bbox = ulw.lng() + "," + ulw.lat() + "," + lrw.lng() + "," + lrw.lat();
	        var url = "http://maps4/geoserver/省略/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap";
	        url += "&TRANSPARENT=true"; //WMS operation
	        url += "&LAYERS=mesh3"; //WMS layers
	        url += "&FORMAT=image/png" ; //WMS format
	        url += "&TILED=false" ;
	        url += "&viewparams=on";
	        url += "&CRC=EPSG:4326";     //set WGS84 
	        url += "&BBOX=" + bbox;      // set bounding box
	        url += "&WIDTH=256";         //tile size in google
	        url += "&HEIGHT=256";
	        return url;                 // return URL for the tile
    	},
    tileSize: new google.maps.Size(256, 256),
    isPng: true
});
map_canvas.overlayMapTypes.push(SLPLayer);

シングルタイルの使い方
google.maps.ImageMapTypeは引数で指定した「tileSize」のサイズに従って世界中をタイルに分割する
※下図参照
getTileUrlの引数coordにはタイルのXYのインデックスが渡ってくる。

よってmap_canvas.overlayMapTypesをシングルタイルに使おうとしてもどうしてもぴったりにはならない。
tileSizeを大きくしてもどうしても最大4つのタイルを使用してしますが、とりあえずその方法について記載。

var SLPLayer = new google.maps.ImageMapType({
    getTileUrl: 
		function (coord, zoom) {

	        var zfactor = Math.pow(2, zoom);                      
	        var proj = map_canvas.getProjection();
	        var ul = new google.maps.Point(coord.x * 1536.0 / zfactor , (coord.y + 1) * 1024.0 / zfactor );
	        var lr = new google.maps.Point((coord.x + 1) * 1536.0 / zfactor , (coord.y) * 1024.0 / zfactor );

			//var ne = map_canvas.getBounds().getNorthEast();
			//var sw = map_canvas.getBounds().getSouthWest();
	        //var bbox = sw.lng() + "," + sw.lat() + "," + ne.lng() + "," + ne.lat();

	        var ulw = proj.fromPointToLatLng(ul);
	        var lrw = proj.fromPointToLatLng(lr); 	                               
	        var bbox = ulw.lng() + "," + ulw.lat() + "," + lrw.lng() + "," + lrw.lat();


			//base WMS URL
			var url = "http://maps4/geoserver/省略/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap";
			url += "&TRANSPARENT=true"; //WMS operation
			url += "&LAYERS=shop"; //WMS layers
			url += "&FORMAT=image/png" ; //WMS format
			url += "&CRC=EPSG:4326";     //set WGS84 
			url += "&BBOX=" + bbox;      // set bounding box
			url += "&WIDTH=1536";         //tile size in google
			url += "&HEIGHT=1024";
			return url;                 // return URL for the tile
    },
    tileSize: new google.maps.Size(1536, 1024),
    isPng: true
});
map_canvas.overlayMapTypes.push(SLPLayer);

もちろんふたつのレイヤを重ねることは可能

参考サイト