Comparing Mapbox, OpenLayers and Leaflet

Mapbox、Leaflet、およびOpenLayersは、Webマッピングアプリケーションの構築に使用される最も人気のある3つのオープンソースJavaScriptライブラリです。 新しい章では、これらすべてのライブラリに共通する機能とその主な違いを見てみましょう。

What are these platforms?

リーフレットは、モバイルフレンドリーなインタラクティブマップ用のオープンソースのJavaScriptライブラリです。 サイズは小さく(JSはわずか38KB)、ほとんどの開発者がオンラインマップに必要としてきたすべての機能を備えています。 さらに、モバイルとデスクトップの両方のプラットフォームをサポートしています。 リーフレットは、Webマップアプリケーションの構築に非常に適しています。

Mapboxは、Webサイト用のカスタムオンラインマップのプロバイダーです。 Mapbox GL JS(グラフィックライブラリの略)は、インタラクティブなデータを含むことができるマップを作成できるJavaScriptライブラリです。

OpenLayersは、Webブラウザーで地図データを表示するために使用されるオープンソースのJavaScriptライブラリです。 Webページに動的マップを配置できます。 OpenLayersは、任意のソースからロードされたマップタイル、ベクターデータ、マーカーを表示できます。 さらに、豊富なWebベースの地理的アプリケーションを構築するためのAPIを提供します。

Things we all love about these platforms

もちろん、各プラットフォームには独自の特出がありますが、それ以前に、これらのプラットフォームが共有するすべての優れた機能について説明する必要があります。

Dynamic styling

Dynamic styling (動的スタイリング)は、Web GISの外観を変更する上で重要な要素です。 Mapbox、Leaflet、OpenLayersはすべて動的なスタイル設定をサポートしています。 開発者は、機能の値に応じてレイヤーのスタイルを設定できます。

Mapboxはデータを美しくベクトル化して視覚化します。 ただし、全てのコントロール権利は持っていない為、Mapboxでレイヤーのスタイルを設定することはそれほど簡単ではありません。 レイヤーのスタイルを設定する方法の詳細については、こちらのMapbox Style Specificationをご覧ください。

OpenLayersを使用すると、ユーザーは、style関数とスタイルクラスを使用して要素のスタイルを設定できます。 ただし、Mapbox Style Specほどは優れてはいないので、開発者はより多くのコードを記述する必要があります。

Mapbox、OpenLayers、Leafletはすべて、タイルサーバーを介した画像の統合をサポートしています。 たとえば、センチネルデータからの衛星画像。

Image Tiles

Mapbox、OpenLayers、Leafletはすべて、タイルサーバーを介した画像の統合をサポートしています。 たとえば、センチネルデータからの衛星画像があります。

例:

https://docs.mapbox.com/mapbox-gl-js/example/map-tiles/

https://openlayers.org/en/latest/examples/xyz-retina.html

Raster data and raster styling

3つのライブラリはすべて、単一のラスターイメージの表示をサポートしています。 GeoTIFF形式の画像など、さまざまな種類の画像をマップに追加できます。

例:

https://docs.mapbox.com/mapbox-gl-js/example/image-on-a-map/

OpenLayersを使用すると、開発者はライブラリ内でラスターイメージのスタイルを設定できます。 リーフレットを使用すると、開発者はプラグインを介してラスターイメージのスタイルを設定できますが、Mapboxではラスターイメージのスタイル設定がサポートされていません。

Option to use your own basemap

3つのライブラリはすべて、ユーザーがすぐに使用できるデフォルトのベースマップをサポートしています。 OpenLayersとLeafletはOpenStreetMapをデフォルトのベースマップの1つとして使用します。 一方、Mapboxでは、ユーザーはデフォルトのベースマップを使用するためにAPIトークンにサインアップする必要があります。 しかしながら、開発者はデフォルト以外のベースマップを自由に使用できます。

Custom Tooltip

Mapbox、Leaflet、OpenLayersはすべてカスタムツールチップをより良くサポートしています。

例:

https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/

User Drawing

3つのライブラリすべてによりサポートされています。

例:

https://openlayers.org/en/latest/examples/draw-features.html

Geocoder

すべてのライブラリは、ユーザーが住所を検索して地図中心に配置するジオコーダーをサポートしています。 OpenLayersとLeafletはプラグインを介してジオコーダーをサポートします。

例:

https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/

https://github.com/jonataswalker/ol-geocoder

https://github.com/perliedman/leaflet-control-geocoder

Projection

3つのライブラリ全ては投影をサポートしています。 しかしながら、Mapboxはメルカトル図法のみをサポートしています。

OpenLayersは、EPGSコードを介してさまざまな投影法をサポートしています。

例: https://openlayers.org/en/latest/examples/reprojection-by-code.html

リーフレットは、ユーザーに対して投影を利用するためには、プラグインを使用することを要求します。

例: https://kartena.github.io/Proj4Leaflet/

3つのライブラリの主な違い

Open Source Code

OpenLayersとLeafletはオープンソースであり、BSD 2節の「Simplified」ライセンスの下で提供されています。 Mapbox GL JSは3-Clause BSDライセンスの下でライセンスされていますが、Mapboxサービスは無料ではありません。

Choice of map provider

OpenLayersとLeafletを使用すると、ユーザーはマッププロバイダーを自由に選択できますが、Mapboxはメルカトルマッププロバイダーのみをサポートします。

Size

リーフレットはサイズがわずか140KBの非常にシンプルな製品です。 リーフレットライブラリは小さく、プラグインで拡張される可能性がありますが、本格的なWebベースのGISを意図したものではありません。 OpenLayersは、コアライブラリに必要なすべての機能が含まれている完全に充実したマッピングライブラリで、重量は最大644KB(バージョン6)です。 Mapboxのサイズは732KB(バージョン1.7)です。

OGC Services (WMS, WFS)

MapboxはWMS(Webマッピングサービス)とWFSをサポートしていますが、GeoJSON形式のベクタータイルのみをサポートしています。 OpenLayersは、WMSとWFSの両方をより良くサポートしています。 リーフレットは、プラグインを介したOGCサービスの統合をサポートしています。

上記は、最も人気のある3つの地図プラットフォームのいくつかの重要な機能です。主な違いは、Mapbox、OpenLayers、Leafletです。 この記述が、これらのマップライブラリについて理解を深めるのに役立てば良いと願います。 BHSoftには、GISサービスの品質を確保するために、これらすべてのライブラリに関するとても優れた専門知識を有しています。

他のGISプロジェクトについては、ポートフォリオをご覧ください。

BHSoft’s capacity of GIS Open Source