OpenLayers向けに構築したシステムをgooglemapに置き換えたときにできるだけ使えるリソースは再利用したい。
今回はgeoserverで提供しているWMSレイヤ（タイルとシングルタイル）を表示する方法を調査。
タイル(256×256）の使い方
[code]
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);
[/code]
シングルタイルの使い方
google.maps.ImageMapTypeは引数で指定した「tileSize」のサイズに従って世界中をタイルに分割する
※下図参照
getTileUrlの引数coordにはタイルのXYのインデックスが渡ってくる。
よってmap_canvas.overlayMapTypesをシングルタイルに使おうとしてもどうしてもぴったりにはならない。
tileSizeを大きくしてもどうしても最大４つのタイルを使用してしますが、とりあえずその方法について記載。
[code]
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);
[/code]
もちろんふたつのレイヤを重ねることは可能