2015年7月30日木曜日

OpenLayers 3 を使ってみよう(番外3:OpenLayers ver. 3.0.0 と 3.7.0 の違いについて)

OpenLayers 3 を使ってみよう(その0:はじめに:地理院地図を表示)に目次がある。

 ここでは OpenLayers 3.0.0OpenLayers 3.7.0 の違いについて述べようと思う。
2014年9月に OpenLayers 3 を使ってみよう(その0:はじめに:地理院地図を表示)として,OpenLayers ver.3.0.0 について一連の投稿を書いた。 その時点では,ver 2.13.1 からのメジャーアップデートがなされた後で,v3 となったことで v2.13.1 とかなり違っていた。 それがしばらく気にしないでいたら,いつの間にか v3.7.0 に上がっていた。 v3.7.0 でも v3.0.0 の時に書いたコードがそのまま使えるか,と思っていたら, いくつか変更がなされてそのままでは動かなくなっていた。 そこで,今回の投稿を書いている。
(ちなみに,OpenLayers 3 を使ってみよう(その0:はじめに:地理院地図を表示)から始まる一連のページは v3.7.0 用に徐々に変更しておこうと思う。)


v3.0.0 から v3.7.0 までの間に,いくつかの大きな変更がなされている。 それらに関しては各バージョンのリリースノート (https://github.com/openlayers/ol3/releases/tag/v3.5.0https://github.com/openlayers/ol3/releases/tag/v3.7.0 など) を見ると変更点が書かれている。 あるいは https://github.com/openlayers/ol3/releases/ に行けば,OpenLayers v3 の alpha バージョンからの全てのバージョンのリリースノートを見ることができる。そのリリースノートから,OpenLayers 3 を使ってみよう(その0:はじめに:地理院地図を表示)から始まる一連のページで使ったいた Function 等の変更点について書いていこう。

(1) ol.source.KML の廃止
 まず,最初は v3.5.0 がリリースされた際に行われた変更のうちの一つについて書こう。 これは https://github.com/openlayers/ol3/releases/tag/v3.5.0 に記載がある。
 内容としては,いくつかの vector class が廃止された,というものである。 私のサイトに関連するものとしては,ol.source.KML が廃止されてコードに変更が必要になった。 他には,ol.source.GeoJSON,ol.source.GML,ol.source.GPX,ol.source.IGC,ol.source.OSMXML,ol.source.TopoJSON が廃止になった。 これらの代わりに ol.source.Vectorol.format を使え,ということだった。

 例えば,ol.source.KML の場合について見てみると, v3.4.0 以前に以下のようにしていた場合は,
var source = new ol.source.KML({
  url: 'features.kml',
  extractStyles: false,
  projection: 'EPSG:3857'
});
下記のように ol.format を使うように指示されている。
var source = new ol.source.Vector({
  url: 'features.kml',
  format: new ol.format.KML({
    extractStyles: false
  })
});

 つまり,ol.source.KML という KML ファイル専用の Vector class の代わりに,より一般的な ol.source.Vector を使い, その中で ol.format.KML を使って KML ファイルということを指定せよ,ということだった。 ソースコードの書き換えは,vector class 同士の変更になるので,定義を変更するぐらいで,関数など他の部分はほぼ変更は必要ない(はず)。

(2) ol.View.fitExtent() と ol.View.fitGeometry() の ol.View.fit() への統合
 これは https://github.com/openlayers/ol3/releases/tag/v3.7.0 に記載がある。
内容としては, ol.View に対する関数の ol.View.fitExtent() と ol.View.fitGeometry() が ol.View.fit() に統合された,というもの。 ソースコード上の変更点としては,ol.View.fitExtent()ol.View.fitGeometry() を,単に ol.View.fit() に書き換えるだけでいいみたい。

(3) ol.featureOverlay の廃止
 今回の投稿でもっと影響が大きいのが,この「ol.featureOverlay の廃止」である。 これも https://github.com/openlayers/ol3/releases/tag/v3.7.0 に記載がある。
これは ol.featureOverlay を廃止して ol.layer.Vector に統合する,というものである。 今まで ol.featureOverlayol.layer.Vector などの ol.layer 群に比べると異質な感じがするものだった。 ol.layer.XXXX のような中身なのに,より下層にありそうな feature というのが名前に入っていて,捉えにくい class だった。 それが ol.layer.Vector に統合されたので,ユーザーからすると少しわかりやすくなったのではないだろうか?

 使い方としては,今まで下記のようにしていたものを,
var featureOverlay = new ol.FeatureOverlay({
  map: map,
  style: overlayStyle
});
featureOverlay.addFeature(feature);
featureOverlay.removeFeature(feature);
var collection = featureOverlay.getFeatures();
これからは以下のようにしなさい,と書かれている。
var collection = new ol.Collection();
var featureOverlay = new ol.layer.Vector({
  map: map,
  source: new ol.source.Vector({
    features: collection,
    useSpatialIndex: false // optional, might improve performance
  }),
  style: overlayStyle,
  updateWhileAnimating: true, // optional, for instant visual feedback
  updateWhileInteracting: true // optional, for instant visual feedback
});
featureOverlay.getSource().addFeature(feature);
featureOverlay.getSource().removeFeature(feature);

 代替の方法は,まず feature の配列としての ol.Collection クラスの変数を用意する。 そして,その ol.Collection クラスの変数 (feature の配列) を要素として持つ ol.source.Vector クラスの変数を要素として持つ ol.layer.Vector クラスの変数として featureOverlay という名前の変数を定義する,というものである。 つまり,今まではこのように定義されたものを特別に ol.featureOverlay という名前をつけていたが,紛らわしいのでやめた,という感じみたいである。

 コードを書く際の変数定義以外の変更点としては,以下の2点などがあげられる(今回は以下の2点の変更が必要だった)
featureOverlay.getFeatures() ==> featureOverlay.getSource().getFeaturesCollection()
featureOverlay.addFeature(...) ==> featureOverlay.getSource().addFeature(...)
変更点としては,図形の点の配置などのデータを保持している feature (の配列である ol.Collection) が,ol.layer.Vector の中の ol.source.Vector の中に定義されているので getSource() という関数が必要になった点があげられる。 上記の2行とも,getSource() という関数が追加されている。 また,最初の行の方は,これまで getFeatures() という名前の関数で feature を取り出していたが,getFeaturesCollection() という関数にしないといけなくなったことによる。 関数名が getFeaturesCollection() となったことで,feature の配列 (ol.Collection) が得られると明示されるので,わかりやすくなったような気がする。

 ここに書いた以外にも変更はあると思うので,適宜 http://openlayers.org/en/v3.7.0/apidoc/ol.html などのリファレンスや,Examples を参照してみてほしい。

2 件のコメント:

ken さんのコメント...

いつもお世話になっております。
ol.View.fit() になっていたんですね。ありがとうございます。やっと解決しました!リリースノート をほとんど見ずに作っていたのでこの点でつまずいていました。

Rider Matsup さんのコメント...

ken 様,

 OpenLayers v3.0.0 から v3.7.0 までの間に結構変わっていました。
調べれば書いてあるのですが,JavaScript はエラーの内容がわかりにくいので,
デバッグしにくいですよね。

 私は Firefox についている「Web 開発」(Alt キー押して,windowの一番上に出る「ツール」の中にあります)の中の「Web コンソール」を開いて確認しています。
「Web コンソール」を開いた状態で web ページを読み込むと,エラーのある部分がわかります。
そこで「xxx という関数が不明」みたいなエラーが出たら,それを調べる,とすると,比較的早くエラーの場所を見つける事ができます。
今回も Web コンソールでエラーが出たので,確認したら変更されてました。