Google マップの仕様変更に伴う OpenLayers のススメ
APIキーが必須になるそうで。
ということで、これを機に OpenLayers で脱 Google Map のススメ。
「OpenLayers」は、地図サービスを切り替えられる JavaScript の API ライブラリ。
簡単に言うと 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 に切り替える
そうは言っても OpenStreetMap（OSM） を使いたい人も多いはず。たぶん。
先程の地理院地図の部分をコメントアウト「//」して、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 チュートリアルでした。
