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() になっていたんですね。ありがとうございます。やっと解決しました!リリースノート をほとんど見ずに作っていたのでこの点でつまずいていました。

matsup さんのコメント...

ken 様,

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

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