スタイル付き地図というのは見た目の変更を行ったGoogleMpasの事。
GoogleMapsAPIでは地図の色やラベルの有無など表示のカスタマイズを行うことが出来る。
OpenLayersでもGoogleMapを利用する事が出来るが標準の呼び出し方法ではスタイルの定義が出来ない。
以下の方法でOpenLayersを使ってGoogleMpasを表示する場合もスタイル付き地図を利用出来る。
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<![endif]-->
<style>
html {height: 100%;width: 100%}
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:800px;height: 300px }
</style>
maps.google.com
http://openlayers.org/api/OpenLayers.js
</head>
<body>
var stylez = [ { featureType: "all", elementType: "all", stylers: [ { visibility: "simplified" }, { hue: "#4d00ff" }, { saturation: -64 } ] } ];
var gmap = new OpenLayers.Layer.Google("Google Streets", {type: 'styled'} );
var styledMapOptions = {
name: "Styled Map"
};
var styledMapType = new google.maps.StyledMapType(stylez, styledMapOptions);
var map = new OpenLayers.Map({
projection: 'EPSG:3857',
displayProjection : 'EPSG:4326',
div: "map",
layers: [gmap],
center: new OpenLayers.LonLat(139, 37).transform('EPSG:4326', 'EPSG:3857'),
zoom: 10
});
gmap.mapObject.mapTypes.set('styled', styledMapType);
gmap.mapObject.setMapTypeId('styled');
</body>
</html>
コメント