OpenLayers3でレイヤーのOn/Offと透過度を変更する

2016.08.24.水
JavaScript

溝畑です。

次回はグラフと書いていた気がしますが、結局また地図です。
今回はOpenLayers3を少し触ってみます!

地図を表示させる

まずは基本的なところで、地図の表示まで。
前回表示させていたのと同じ、Open Street Map(OSM)を表示させます。

中心を変更する場合は、centerのところに[Lon, Lat]を指定してください。
ただし、投影法の変換は必要です。

こんな感じです。

地図の表示に関してはこれだけです。
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です。

getVisible()で状態を確認して、その結果をsetVisible()で表示を切り替えています。

次に、透過度です。(input type=”range”を想定)

setVisibleと同様、setOpacityに取得した値を入れてあげるとOKです。

サンプルは↓からどうぞ。
レイヤー・透過度切り替えのサンプル

最後に

OpenLayers2とはいろいろと勝手が違いますが、慣れれば問題ないレベルだと思います。
OpenLayers3でも点を追加したり、線を引いたりといったところまでは試しているので、
その辺りはまた次回にでも書きます。

ただ、記事の内容がほとんど一緒になるのも考えもの…
地図の回転など、アニメーションも出来るので、その辺りも良さそうですね。




キー・ポイントでは、なければ作っちゃうエンジニアを募集しています。



-->