[OpenLayers] 地理院地図の標準地図を表示する

WebGISアプリを作る場合、Googleマップを用いれば地図も綺麗だし、APIの書籍や解説サイトも多く出ており、やりやすいと思います。
しかしながら、業務で利用する場合はライセンスが問題になります。その解決策の1つとして、昨年秋にリニューアルされた国土地理院の「地理院地図」を利用してみることにします。

地理院地図は、以前は電子国土と呼ばれており、Ver1から4までプラグイン版とかプラグインなし版とかいろいろありました。また独自のAPIも提供されていました。新たな地理院地図からは独自のAPIは提供されないようなので、今後は別のGISライブラリを使用する必要があります。公式のサンプル集にもありますが、OpenLayersやLeafletといったものがあります。

以前、紹介したOpenLayers Starterのレシピをもとに、OpenLayersで地理院地図を表示する方法を確認していきます。

レシピ１：地理院地図 標準地図の表示

htmlファイル内にJavaScript,CSSとも含んでいます。解説は、以下のコードのコメント欄に出来るだけ詳しく記載しましたので参照ください。

実行結果

上記のhtmlファイルを表示すると、下記のような結果となります。
右上の青色の＋マークのところがレイヤスイッチです。現在はベースレイヤが1つ「標準地図」のみ表示されています。
右下には国土地理院の著作権が表示されます。これは公式サイトのサンプルに準じています。