Openlayersでは、まず地図オブジェクトを用意しますが、これだけでは何も表示されません。これは地図を載せるための机や箱のようなものと考えられます。
そこに実際の紙の地図を重ねるようにレイヤを重ねることになります。レイヤはベースレイヤとオーバーレイレイヤの2種類があります。
ベースレイヤは一番下に置く基本的な地図で、同時に1つしか表示できませんが、いくつか用意しておいて切り替えられるようにすることができます。

以下のレシピでは、地理院地図で用意されているいろいろな地図のうち、標準地図、オルソ画像、白地図を切り替えられるような地図を作成してみます。

レシピ２：いろいろな地図を重ねて切り替えられるようにする

htmlファイル内にJavaScript,CSSとも含んでいます。解説は、以下のコードのコメント欄に出来るだけ詳しく記載しましたので参照ください。
レシピ１で説明済みの事項は省略しています。

maxZoomLevelをそれぞれ指定しておくことで、ベースレイヤの切り替えによりmax側で範囲外となった場合は調整されます。例えば、標準地図でzoomLevel:18で表示していた時に、オルソ画像に切り替えるとzoomLevel:17に、白地図に切り替えるとzoomLevel:14に、それぞれタイルが表示されるように自動的に変更されます。

[html title=’recipe02.html’]

Recipe 2：いろいろな地図を重ねて切り替えられるようにする

[/html]

実行結果

上記のhtmlファイルを表示すると、下記のような結果となります。
右上の青色の＋マークのレイヤスイッチをクリックして開くと、今回重ねあわせたベースレイヤが表示されていますので、ラジオボタンで切り替えられるようになっています。