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

溝畑です。

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

地図を表示させる

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

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
});

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]を指定してください。
ただし、投影法の変換は必要です。

map.setView({
  center: ol.proj.transform([139, 35.5], 'EPSG:4326', 'EPSG:3857')
});

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です。

var osmToggle = document.getElementById('osm-visible');
osmToggle.addEventListener('click', function (e) {
  if (osmLayer.getVisible()) {
    osmLayer.setVisible(false);
  } else {
    osmLayer.setVisible(true);
  }
});

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"を想定)

var osmSlide = document.getElementById('osm-slide');
osmSlide.addEventListener('input', function (e) {
  osmLayer.setOpacity(this.value);
});

var osmSlide = document.getElementById('osm-slide');

osmSlide.addEventListener('input', function (e) {

osmLayer.setOpacity(this.value);

});

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

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

最後に

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

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

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

KEYPOINT – キー・ポイント株式会社開発日誌