溝畑です。
次回はグラフと書いていた気がしますが、結局また地図です。
今回はOpenLayers3を少し触ってみます!
地図を表示させる
まずは基本的なところで、地図の表示まで。前回表示させていたのと同じ、Open Street Map(OSM)を表示させます。
1 2 3 4 5 6 7 8 |
var osmSource = new ol.source.OMS(); var osmLayer = new ol.layer.Tile({ source: osmSource }); var map = new ol.Map({ target: 'div_id' }); map.setView({ center: [0, 0], zoom: 2 }); |
中心を変更する場合は、centerのところに[Lon, Lat]を指定してください。
ただし、投影法の変換は必要です。
1 2 3 |
map.setView({ center: ol.proj.transform([139, 35.5], 'EPSG:4326', 'EPSG:3857') }); |
こんな感じです。
地図の表示に関してはこれだけです。
OSM以外の地図を表示させたい場合は、OpenLayers3、APIのol.sourceを読んでください。
ol.source.BingMap()とか、いろいろとあります。
LayerSwitcherがない
さて、OpenLayers2ではコントロールにnew OpenLayers.Control.LayerSwitcher()としておけば、レイヤーのON/OFFが簡単にできていました。
しかし、OpenLayers3にLayerSwitcherがありません。これは困りました。
なければ作るしかないので作りましょう。
ボタンをクリックするとOn/Offして、値を変更すると透過度を変化させるようにしてみます。
ここでは、ol.layer.TileのgetVisible()、setVisible()、setOpacity()を使います。
機能としてはメソッド名そのままなので割愛。
まずはレイヤーのOn/Offです。
1 2 3 4 5 6 7 8 |
var osmToggle = document.getElementById('osm-visible'); osmToggle.addEventListener('click', function (e) { if (osmLayer.getVisible()) { osmLayer.setVisible(false); } else { osmLayer.setVisible(true); } }); |
getVisible()で状態を確認して、その結果をsetVisible()で表示を切り替えています。
次に、透過度です。(input type="range"を想定)
1 2 3 4 |
var osmSlide = document.getElementById('osm-slide'); osmSlide.addEventListener('input', function (e) { osmLayer.setOpacity(this.value); }); |
setVisibleと同様、setOpacityに取得した値を入れてあげるとOKです。
サンプルは↓からどうぞ。
レイヤー・透過度切り替えのサンプル
最後に
OpenLayers2とはいろいろと勝手が違いますが、慣れれば問題ないレベルだと思います。OpenLayers3でも点を追加したり、線を引いたりといったところまでは試しているので、
その辺りはまた次回にでも書きます。
ただ、記事の内容がほとんど一緒になるのも考えもの...
地図の回転など、アニメーションも出来るので、その辺りも良さそうですね。
キー・ポイントでは、なければ作っちゃうエンジニアを募集しています。