harukeeeのブログ

@harukeee が書いています。

Google マップの仕様変更に伴う OpenLayers のススメ

internet.watch.impress.co.jp

www.itmedia.co.jp



APIキーが必須になるそうで。


ということで、これを機に OpenLayers で脱 Google Map のススメ。
OpenLayers」は、地図サービスを切り替えられる JavaScriptAPI ライブラリ。
簡単に言うと Google Map APIオープンソース版。

https://ja.wikipedia.org/wiki/OpenLayersja.wikipedia.org

簡単に地図が切り替えられて、 Google Map API 的な事ができたりするやつ。
複数の地図サービスを組み合わせて使えたり。結構色々できます。(詳細は割愛)


OpenLayers で主に利用できる地図の紹介

OpenStreetMap は有名なフリーの地図サービスです。
しかし、あえて地理院地図を使うのも渋くて良いと思うのです。お国製だし。(無根拠)


地理院地図の使い方

下記のサイトから [OpenLayers] の [ソース] を参照。

地理院地図|地理院タイルを用いたサイト構築サンプル集

上記のソースをメモ帳にコピペ、「.htm」で保存して Internet Explorer で開けば、即 動きます。


地理院地図には、いくつか種類が用意されています。
地理院地図|地理院タイル一覧

先程のソースをよく見ると、参照URLとして「https://cyberjapandata~~」があります。

source: new ol.source.XYZ({
  attributions: [
    new ol.Attribution({
      html: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
    })
  ],
  url: "https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png",
  projection: "EPSG:3857"
})

標準地図を使うなら、この参照URLの一部を「std」のままに。

https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png

白地図を使うなら「blank」にするだけです。

https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png

簡単に地図を切り替えできます。



OpenStreetMap に切り替える

そうは言っても OpenStreetMapOSM) を使いたい人も多いはず。たぶん。
先程の地理院地図の部分をコメントアウト「//」して、source(地図)を OSM に変更してみます。

source: new ol.source.OSM()
//source: new ol.source.XYZ({
//  attributions: [
//    new ol.Attribution({
//      html: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
//    })
//  ],
//  url: "https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png",
//  projection: "EPSG:3857"
//})

はい、OpenStreetMap に変わりました。この OSM は OpenStreetMatp 用の指定方法です。
XYZ は、地理院地図用ではなく OpenLayers の汎用機能なので 対応API の URL を記述します。



Bing Maps に切り替える

ついでに Bing Maps もやりましょう。(※ Bing Maps は APIキーの取得が必要です)
同じく OSMコメントアウトして、 source(地図)を BingMaps に変更してみます。

source: new ol.source.BingMaps({
  key: 'Ah9cfkc_W1MFV_YY6ucw5qUdXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
  imagerySet: 'Road'
})
//source: new ol.source.OSM()



あとは、その他もろもろ、ピンを立てたり、ゴニョゴニョして・・
情報はいっぱいあるので適当にググってください。


Google Maps API から OpenLayers API への置き換えは、こちら記事がまとまってそうなので、
こちらをどうぞ。
Google Maps API → OpenLayers API - おまえ、うまそうだな


ということで、超簡単 OpenLayers チュートリアルでした。