以前，2014年9月から OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）として，ちょこちょこと OpenLayers 3 の使い方について書いてきた。 2017年1月にはその OpenLayers 3 の最新バージョンが 3.20.1 になっていた。 それが，2017年2月に入ってしばらくすると，OpenLayers のバージョンが 4.0.1 にあがっていた。 2019年7月の現時点だと，かなりバージョンが上がってるかなぁ？と思ったら，やっぱりかなり上がって，バージョンは 5.3.0 になっていた。
以前，OpenLayers のバージョンが 4.0.1 になっていたにも書いたが，OpenLayers はバージョン番号の付け方を Semantic Versioning（セマンティック バージョニング）に従ってつけるようになっている。その時はメジャーバージョンが 4 に上がったので，後方互換性がある程度失われていた。それが，メジャーバージョンが 5 になったということは，当然以前のままのスクリプトでは動かない可能性が高い。そこで，少しだけ OpenLayers 5.3.0 がどうなっているのかを見てみた，というのが，今回のお話し。
で，さっそくOpenLayers のサイトに行ってみると，なんかすごく変わっている感じがした…。「感じがした」というのは，すぐにはなにがどう変わったのかがイマイチわからなかった。
そこで，まずはDocsの中のquick startを見てみた。すると，「map」の指定の仕方とかが変わっていた…。なんか，結構見直さないといけないなぁ，と思ったのだが，その次に見たtutorialsやら，Examplesを見たら，何がなんやらわからなくなってしまった…。
そこに謎のキーワード「import 文」が並んでいた。 例えば，
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import {Draw, Modify, Snap} from '../src/ol/interaction.js';
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
import {OSM, Vector as VectorSource} from '../src/ol/source.js';
import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
のように書いてある。
JavaScript に import ってあったっけ？と思って調べてみたら，どうやら比較的最近（2015年頃？）追加されたらしい。しばらく興味が登山・スポーツに移っていたので，完全に世の中に乗り遅れてしまっていた（もともと全然乗れてないけど…）。じゃあ，普通に使えるのか，と思って，Github の openlayers エントリーから 5.3.0 の master.zip をダウンロードしてみた。 で，それを使ってサンプルページを，と思ったが，これがうまくいかない…。 Firefox で「ツール」-「ウェブ開発」-「ウェブコンソール」として，コンソールを表示させて見てみると，
TypeError: Error resolving module specifier: ol/Map.jsのようなエラーが出てくる。
どうやら「Map.js」がどこにあるのかわからない感じだった。 だいたい「ol」はディレクトリ？じゃあ，ルートディレクトリはどこにあるの？という感じだった。 そこで，具体的に Map.js があるディレクトリを相対指定してみたが，今度は Map.js などが呼び出している他のルーチンがないと言うし…。
困った…。
OpenLayers がバージョン 5 になって，ここまで変貌を遂げるとは…。 しかし，なんでquick startとtutorialsで，書いてあるサンプルが全然違うの？？？
同じような疑問を持つ人はいるみたいで，「I need a Openlayers 5 complete without NodeJS!」というのがあった。まだドキュメントもちゃんと整理できていないような気がする…。
仕方ないので，とりあえずいろいろ見てみた。すると，tutorialsの中のBuilding an OpenLayers Applicationに「Node」を使えみたいに書いてあった。 どうやら，「import」文は「Node」の文が念頭に置かれているみたいだった。 さらに，どこかにモジュールハンドラの「Parcel」を推奨する，みたいに書いてあった。うーん，Parcel ってなに？
かつ，何故かわからないが以前と同じような「OpenLayers」のフルセット（v5.3.0.zip）もあるみたいだった。それは最新版のdownloadのページにリンクがあった。この zip ファイルを解凍すると，以前のバージョンのような「ol.js」が入っていた。
ということで，どうやら，2019/7 時点では，以下の2個の異なる種類の OpenLayers 5.3.0 が存在しているみたい。
(1) Node (Parcel) の import文を使うバージョン？（Github の openlayers）… ES module 版？ (2) 以前からある OpenLayers と同じフルセット（v5.3.0.zip）
今後，OpenLayers は Node 上でないと使えなくなるのだろうか…？？ でも，きっとこの変更はメジャーバージョンが「5」になった時（v 5.0.0 ?）の時に変わっていたはず。 それが v 5.3.0 になっても2種類あるということは，今後のこの2種類の OpenLayers が存在し続けるのだろうか？？ そもそも全員が「Node」を使うということもないと思うので，apache や nginx を使う場合はやはり「(2) フルセット」を使わないといけないような気がする…。 現在，v 6.0.0 のベータ版が作られているようなので，今後どうなるかが，が気になるところである。
他にも困った点が存在している。 それは，API document の記載である。 これは OpenLayers のマニュアルみたいなものであり，様々な Class などの定義や，そこで使える Function などについての記載がある。 その記載が少し違っている。 というか，Class 等の名前の付け方が変わっている。 以前なら「ol.format.KML」とされていたものが「ol/format/KML~KML」と記載されている。 使う際にも ES module 版なら，JavaScript の先頭に以下を書かないと読み込まれない。
import KML from 'ol/format/KML';さらに，以下のように「KML」という名前だけでよい。
var kml = new KML();しかし，フルセットで使う際には「ol.format.KML()」でないといけないので，その変換が必要になる。（最後にリストを載せておく）
とりあえず，v 5.3.0 の時点で，apache 等でフルセットの OpenLayers を使う時の注意点を書いておこう。
(1) ネットから OpenLayers のフルセット（v5.3.0.zip）をダウンロードする。 (2) <link rel="stylesheet" href="OpenLayers_directory/css/ol.css" type="text/css"> <script src="OpenLayers_directory/build/ol.js" type="text/javascript"></script> のようにして，web ページの header パートに css と javascript のファイルを読み込む。 (3) サンプルを使う場合には，サンプルの JavaScript の中の「import」文をすべて消す。 (4) 同じくサンプルを使う際には， const raster = new TileLayer({ source: new OSM() }); のような文の「TileLayer」や「OSM」をAPI document で調べて，「ol.layer.Tile」，「ol.source.OSM」のように以前からある形式に置き換える。
OpenLayers 3 の頃からどのように記載が変わったかは，次回以降に書くことにしよう。
変換が必要なものは，API document の中で，「ol/Feature~Feature」のように「~」付きで記載されているもの（だと思う）。ざっと並べると（全てではないかもしれない）
ol/AssertionError ～ AssertionError ol/Collection ～ Collection ol/Disposable ～ Disposable ol/Feature ～ Feature ol/Geolocation ～ Geolocation ol/Graticule ～ Graticule ol/ImageBase ～ ImageBase ol/ImageTile ～ ImageTile ol/Image ～ ImageWrapper ol/Kinetic ～ Kinetic ol/MapBrowserEvent ～ MapBrowserEvent ol/MapEvent ～ MapEvent ol/Map ～ Map ol/Object ～ BaseObject ol/Observable ～ Observable ol/Overlay ～ Overlay ol/PluggableMap ～ PluggableMap ol/Tile ～ Tile ol/VectorTile ～ VectorTile ol/View ～ View ol/WebGLMap ～ WebGLMap ol/control/Attribution ～ Attribution ol/control/Control ～ Control ol/control/FullScreen ～ FullScreen ol/control/MousePosition ～ MousePosition ol/control/OverviewMap ～ OverviewMap ol/control/Rotate ～ Rotate ol/control/ScaleLine ～ ScaleLine ol/control/ZoomSlider ～ ZoomSlider ol/control/ZoomToExtent ～ ZoomToExtent ol/control/Zoom ～ Zoom ol/events/Event ～ Event ol/events/Target ～ Target ol/format/EsriJSON ～ EsriJSON ol/format/Feature ～ FeatureFormat ol/format/GML2 ～ GML2 ol/format/GML32 ～ GML32 ol/format/GML3 ～ GML3 ol/format/GMLBase ～ GMLBase ol/format/GPX ～ GPX ol/format/GeoJSON ～ GeoJSON ol/format/IGC ～ IGC ol/format/JSONFeature ～ JSONFeature ol/format/KML ～ KML ol/format/MVT ～ MVT ol/format/OSMXML ～ OSMXML ol/format/Polyline ～ Polyline ol/format/TextFeature ～ TextFeature ol/format/TopoJSON ～ TopoJSON ol/format/WFS ～ WFS ol/format/WKT ～ WKT ol/format/WMSCapabilities ～ WMSCapabilities ol/format/WMSGetFeatureInfo ～ WMSGetFeatureInfo ol/format/WMTSCapabilities ～ WMTSCapabilities ol/format/XMLFeature ～ XMLFeature ol/format/XML ～ XML ol/format/filter/Bbox ～ Bbox ol/format/filter/ComparisonBinary ～ ComparisonBinary ol/format/filter/Comparison ～ Comparison ol/format/filter/Contains ～ Contains ol/format/filter/During ～ During ol/format/filter/EqualTo ～ EqualTo ol/format/filter/Filter ～ Filter ol/format/filter/GreaterThanOrEqualTo ～ GreaterThanOrEqualTo ol/format/filter/GreaterThan ～ GreaterThan ol/format/filter/Intersects ～ Intersects ol/format/filter/IsBetween ～ IsBetween ol/format/filter/IsLike ～ IsLike ol/format/filter/IsNull ～ IsNull ol/format/filter/LessThanOrEqualTo ～ LessThanOrEqualTo ol/format/filter/LessThan ～ LessThan ol/format/filter/LogicalNary ～ LogicalNary ol/format/filter/NotEqualTo ～ NotEqualTo ol/format/filter/Not ～ Not ol/format/filter/Or ～ Or ol/format/filter/Spatial ～ Spatial ol/format/filter/Within ～ Within ol/geom/Circle ～ Circle ol/geom/GeometryCollection ～ GeometryCollection ol/geom/Geometry ～ Geometry ol/geom/LineString ～ LineString ol/geom/LinearRing ～ LinearRing ol/geom/MultiLineString ～ MultiLineString ol/geom/MultiPoint ～ MultiPoint ol/geom/MultiPolygon ～ MultiPolygon ol/geom/Point ～ Point ol/geom/Polygon ～ Polygon ol/geom/SimpleGeometry ～ SimpleGeometry ol/interaction/DoubleClickZoom ～ DoubleClickZoom ol/interaction/DragAndDrop ～ DragAndDrop ol/interaction/DragAndDrop ～ DragAndDropEvent ol/interaction/DragBox ～ DragBox ol/interaction/DragBox ～ DragBoxEvent ol/interaction/DragPan ～ DragPan ol/interaction/DragRotateAndZoom ～ DragRotateAndZoom ol/interaction/DragRotate ～ DragRotate ol/interaction/DragZoom ～ DragZoom ol/interaction/Draw ～ Draw ol/interaction/Draw ～ DrawEvent ol/interaction/Extent ～ ExtentInteraction ol/interaction/Extent ～ ExtentInteractionEvent ol/interaction/Interaction ～ Interaction ol/interaction/KeyboardPan ～ KeyboardPan ol/interaction/KeyboardZoom ～ KeyboardZoom ol/interaction/Modify ～ Modify ol/interaction/MouseWheelZoom ～ MouseWheelZoom ol/interaction/PinchRotate ～ PinchRotate ol/interaction/PinchZoom ～ PinchZoom ol/interaction/Pointer ～ PointerInteraction ol/interaction/Select ～ Select ol/interaction/Select ～ SelectEvent ol/interaction/Snap ～ Snap ol/interaction/Translate ～ Translate ol/layer/Base ～ BaseLayer ol/layer/Group ～ LayerGroup ol/layer/Heatmap ～ Heatmap ol/layer/Image ～ ImageLayer ol/layer/Layer ～ Layer ol/layer/Tile ～ TileLayer ol/layer/VectorTile ～ VectorTileLayer ol/layer/Vector ～ VectorLayer ol/proj/Projection ～ Projection ol/render/Event ～ RenderEvent ol/render/Feature ～ RenderFeature ol/render/VectorContext ～ VectorContext ol/render/canvas/Immediate ～ CanvasImmediateRenderer ol/render/webgl/Immediate ～ WebGLImmediateRenderer ol/renderer/Layer ～ LayerRenderer ol/renderer/Map ～ MapRenderer ol/renderer/canvas/ImageLayer ～ CanvasImageLayerRenderer ol/renderer/canvas/IntermediateCanvas ～ IntermediateCanvasRenderer ol/renderer/canvas/Layer ～ CanvasLayerRenderer ol/renderer/canvas/Map ～ CanvasMapRenderer ol/renderer/canvas/TileLayer ～ CanvasTileLayerRenderer ol/renderer/canvas/VectorLayer ～ CanvasVectorLayerRenderer ol/renderer/canvas/VectorTileLayer ～ CanvasVectorTileLayerRenderer ol/renderer/webgl/ImageLayer ～ WebGLImageLayerRenderer ol/renderer/webgl/Layer ～ WebGLLayerRenderer ol/renderer/webgl/Map ～ WebGLMapRenderer ol/renderer/webgl/TileLayer ～ WebGLTileLayerRenderer ol/renderer/webgl/VectorLayer ～ WebGLVectorLayerRenderer ol/source/BingMaps ～ BingMaps ol/source/CartoDB ～ CartoDB ol/source/Cluster ～ Cluster ol/source/ImageArcGISRest ～ ImageArcGISRest ol/source/ImageCanvas ～ ImageCanvasSource ol/source/ImageMapGuide ～ ImageMapGuide ol/source/ImageStatic ～ Static ol/source/ImageWMS ～ ImageWMS ol/source/Image ～ ImageSource ol/source/Image ～ ImageSourceEvent ol/source/OSM ～ OSM ol/source/Raster ～ RasterSource ol/source/Raster ～ RasterSourceEvent ol/source/Source ～ Source ol/source/Stamen ～ Stamen ol/source/TileArcGISRest ～ TileArcGISRest ol/source/TileDebug ～ TileDebug ol/source/TileImage ～ TileImage ol/source/TileJSON ～ TileJSON ol/source/TileWMS ～ TileWMS ol/source/Tile ～ TileSource ol/source/UTFGrid ～ UTFGrid ol/source/UrlTile ～ UrlTile ol/source/VectorTile ～ VectorTile ol/source/Vector ～ VectorSource ol/source/WMTS ～ WMTS ol/source/XYZ ～ XYZ ol/source/Zoomify ～ Zoomify ol/structs/LRUCache ～ LRUCache ol/style/AtlasManager ～ AtlasManager ol/style/Circle ～ CircleStyle ol/style/Fill ～ Fill ol/style/IconImageCache ～ IconImageCache ol/style/Icon ～ Icon ol/style/Image ～ ImageStyle ol/style/RegularShape ～ RegularShape ol/style/Stroke ～ Stroke ol/style/Style ～ Style ol/style/Text ～ Text ol/tilegrid/TileGrid ～ TileGrid ol/tilegrid/WMTS ～ WMTSTileGrid ol/webgl/Context ～ WebGLContext
0 件のコメント:
コメントを投稿