LoginSignup
4
4

More than 5 years have passed since last update.

モバイルでのOpenLayers3で、ピンチインピンチアウト後の強制ズーム固定をなくす方法

Posted at

OpenLayers3はα版の頃よく触ってて、その頃はモバイルでの動作など非常に残念なところが多かった(もっとも、OL3だけの問題でなく、1世代前だった当時のモバイルデバイスの問題もあると思います)のですが、正式リリース後久しぶりに触ってみたところ、モバイルでも十分に使えるレベルになっていました。
というか、JavaScript地図エンジンなのに、ネイティブのMapKitやGoogle Mapsと比べても遜色ないレベルに感じました(Hello Worldレベルしかやらせてない範囲で、の感想ですが)。

が、一つ残念な点があって、モバイルデバイスでのピンチイン/ピンチアウト操作であるにもかかわらず、操作後自動で整数ズーム値にズームが正規化されてしまう挙動があるのです。
こちらの方が好きだよ、という人もいるかもしれませんが、ネイティブのMapKitやGoogle Mapsは小数点ズーム値を許容するので、それの代わりに使おうと思うと若干ストレスが残ります。

これをオフにする方法ですが、スイッチはないのでソースコードに手を入れるしかありません。

ソースコードをダウンロードしてきて、
https://github.com/openlayers/ol3/blob/master/src/ol/interaction/pinchzoominteraction.js
このファイルの、この記事執筆時点では121行目〜123行目、

pinchzoominteraction.js
    var direction = this.lastScaleDelta_ - 1;
    ol.interaction.Interaction.zoom(map, view, resolution,
        this.anchor_, this.duration_, direction);

こう書かれているところをコメントアウトすれば、ピンチイン/ピンチアウト操作後に整数ズーム値に正規化されることはなくなります。

あとは、
https://github.com/openlayers/ol3/blob/master/CONTRIBUTING.md
こちらの手順に従ってビルド環境を整えた後、

ビルド
$ ./build.py build

すれば、圧縮されたjsファイルが取得できるのでそれを使えばOKです。

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4