Mapbox GL JS vs. Mapbox.js
Mapbox用語集から、 Mapbox.js
Mapbox.jsは、インタラクティブマップをWebサイトに追加できるJavaScriptライブラリです。 Leafletのプラグインであり、無料で使用できるオープンソースライブラリです。
および Mapbox GL JS
Mapbox GL JSは、Mapbox GLを使用して対話型マップをレンダリングするJavaScriptライブラリです。自由に使用できるオープンソースライブラリです。Mapboxスタイルを追加できます。またはMapbox Studioで作成したカスタムスタイルをMapbox GL JSアプリケーションに追加します。
および この回答 から
Mapboxスタイルは、Mapbox GLおよびネイティブiOSおよびAndroid SDKで使用します。従来のMapbox JSでは使用できません。MapboxJSはラスタータイルをサポートしています。 、あなたはそれらをスタイルすることはできません。それらは単なる画像です。MapboxGLそしてネイティブSDKはベクタータイルを使用でき、それらはスタイル設定可能です。
leafletcssおよびjsソースの代わりとしてmapbox.jsを使用できると思いますが、mapbox-gl.jsでも同じことができますか？
2つのライブラリには他にどんな違いがありますか？
私の知る限り、Mapbox GL JSは、バックグラウンドでLeafletを使用する現在のMapbox JSの代わりになるでしょう。 Leafletが行うことの多くは、GLでもできます。しかし、すべてではありません。同じことが逆の場合にも当てはまります。 GLは、リーフレットではできないことを実行できます。 GLの大きな点は、WebGLを使用してベクタータイルを中心に構築されていることです。紹介記事から：
Mapbox GL JSの発表— Webマップ用の高速で強力な新しいシステム。 Mapbox GL JSはクライアント側のレンダラーであるため、JavaScriptとWebGLを使用して、ビデオゲームの速度と滑らかさでデータを動的に描画します。サーバーレベルでスタイルとズームレベルを修正する代わりに、Mapbox GLはJavaScriptに力を入れ、動的なスタイリングと自由形式のインタラクティブ性を可能にします。ベクトルマップは次の進化であり、開発者がこのフレームワークを使用して構築するものを確認できることを楽しみにしています。
この2つを並べて比較したい場合は、私が知っている限りはありません。比較する際に言及/検討することが多すぎるため、自分の要件に基づいて自分でそのようなことを行うのが最善です。各フレームワークの例を比較することから始めるのがよいでしょう。なぜなら、両方が何ができるかについての良いアイデアを与えるからです。
その後、それらのAPIを比較できます。
心に留めておくべきことの1つは、GLは新しいブランドであり、私たち開発者全員が価格に伴うことを知っていることです。いくつかのねじれは解決されていません。リーフレットに関しては、非常に成熟しており、広く使用されており、非常によくテスト/実証されています。 GLで現在どのような問題が発生しているのかを確認したい場合は、リポジトリのGithubで問題を確認できます。
それがお役に立てば幸いです！
iH8の答えは素晴らしいです。もう少し詳しく説明します。
ベースマップの場合、Mapbox.jsはラスタータイル（PNGおよびJPEG）ファイルを表示し、HTMLおよびCSSを使用してそれらを表示します。 Mapbox GL JSはベクタータイル（派手なプロトコルバッファー）を表示し、WebGLを使用して表示します。ラスタータイルも表示できますが、それは焦点ではありません。
Mapbox.jsとMapbox GL JSは、GeoJSONレイヤーやマーカーなどのオーバーレイをサポートします。どちらも同様のライセンスといくつかの共有コントリビューターを持つオープンソースです。
Mapbox.jsレイヤーのスタイルはサーバーに保存され、サーバーテクノロジーでレンダリングされます。 Mapbox GL JSのスタイルはブラウザーで動的にレンダリングされるため、リアルタイムで変更できます。
Leafletは、より広範なブラウザーサポートを備えていますが、一部のブラウザーではマップの傾斜や回転など、サポートできないものがいくつかあります。 Mapbox GLはWebGLをサポートし、新しいコンピューターで最高のパフォーマンスを発揮するブラウザーをサポートします。MapboxGL Nativeと呼ばれるネイティブバージョンがあり、すべてのモバイル電話。
名前にもかかわらず、MapboxとMapbox.jsでLeafletを使用でき、Mapbox GLが非Mapboxスタイルで使用できます。
通常、LeafletjsとMapbox.jsは同じですが、Mapbox.jsには、LeafletをラップしてMapboxのサービス（方向など）に結び付けるプラグインと拡張機能があります。同様のプラグインと機能が他社や製品から存在しており、LeafletはMapboxに加えて、またはMapboxの代わりにそれらを使用できます。通常、Leafletベースのライブラリは、レガシーブラウザーのサポートが優れており、ラスタータイルなどを使用します。ベクタータイル（pbf、mvtなど）やさまざまなレンダラー（webglを含む）などの最新の機能を組み込む機能が追加されているということです。
Mapbox-gl-jsおよびネイティブバリアントmapbox-glは、高性能のオープンソースライブラリです。ベクタータイル（pbf、mvt）およびwebglをキャンバス要素（-jsバリアント用）にレンダリングするために高度に最適化されています。それは比較的新しいので、リーフレットで簡単なものは異なるか挑戦的かもしれません（2016年4月現在）、それらは非常に似ており、非常にうまく機能すると言いましたモバイルデバイスを含めて（過去数年から、例えばiphone 5s）。ランダムな癖の例は、右から左に読むイスラエルのヘブライ語のラベルが後ろ向きであり、ナンセンスに見えることです（未解決の問題に対処しています）。
古いブラウザのサポートを廃止しても大丈夫な場合は、Mapbox-gl（-js）ルートを選択することをお勧めします。私の限られた経験（数か月でそれを使った作業）では、全体的に最高のユーザー+開発者の経験があり、Mapboxのエンジニアリング/出力は一貫しています。私は彼らの有料サービスの経験が少なく、それらのライブラリがこれらのサービスにどれほど緊密に結合されるかは不明です。モバイルプロジェクトの場合、Google Maps、Leaflet v0.7およびv1を見てからmapbox-gl-jsに移行しましたが、それは良い決断だったようです。
以前のLeafletの経験とHTML/CSS/JSに習熟した状態でMapbox-gl-jsを使い始め、技術的な詳細を理解するのに役立つ 入門 と 例 の両方が見つかりました。 JSONを使用したマップのスタイル設定（CSSではない）を含む。また、利用規約をよく見てください。これは、Googleと比較して特に重要な差別化要因でした。 Mapboxのサービスは、米国以外では最も堅牢なカバレッジを持たないため、このレビューも必ず行ってください（私の経験では、通常、別のプロバイダーが利用可能であるため、これは必ずしもライブラリを採用する決定に影響しません。 Mapboxの機能または標準と非常に緊密に結合されています）。
現在、複雑なLeafletベースのマップシステムをMapbox GLに切り替える作業を行っています。見つけた顕著な違いの1つは、描画ツールとGeoJSONレイヤーの処理です。 Leafletには、マーカー、長方形、円などの非標準のGeoJSONを含む一連の描画ツールがあります。 Mapboxの開発者GLは、ネイティブのGeoJSONに焦点を当てることを決定しました。つまり、円や長方形の描画/レンダリングをすぐにサポートすることはできません（たとえば、Mapbox GLにはL.Circleのようなものはありません）。マーカーはありますが、従来のリーフレットマーカーのようにスタイリングするには、独自のスプライトを作成するか、SVGを使用する必要があります。これらはすべて可能ですが、Leafletで行ったよりも、開発者側でもう少しセットアップが必要です。
さらに、ほとんどのMapbox GLレイヤーはキャンバス要素としてレンダリングされます。つまり、リーフレットとは異なり、さまざまなレイヤーに関連付けられたHTML要素はありません。これにより、必要に応じてCSSを使用して要素をターゲットにすることが難しくなります。ここで見つけた1つの例外は、別個のHTML要素としてレンダリングされるマーカーです。
そうは言っても、私は既存の描画ツールとレンダリングスタイルを若干の違いを伴ってほぼ完全に複製することができました。高度にカスタマイズされた描画ツールが必要な場合、Mapbox GLはイライラするかもしれません。
ブラウザのサポートも潜在的な問題として言及されています。 WebGLをサポート のブラウザであれば、Mapbox GLを実行できます。これには、すべての主要なブラウザーが含まれます。 Mapbox GLをサポートしていない唯一の重要なブラウザセットはIE10以前でしたが、分析では、ほとんどのユーザーがまだこれらのブラウザを使用していないことが示されたため、サポートを正式に廃止しました。走行距離は明らかに異なる場合があります。
全体的には、Mapbox GLの方が操作しやすく、ユーザーエクスペリエンスが向上すると思うので、切り替えに満足しています。
Mapbox.jsまたはLeafletを使用してWebマップを構築した経験がある開発者にとって、古いプロジェクトをMapbox GL JSを使用するように切り替えると、既存のアプリケーションのパフォーマンスが大幅に向上します。 Mapbox GL JSは、WebGLクライアント側レンダリングを使用してマップを表示します。これにより、読み込みが高速になり、ズームまたはパンニングの切り替えがスムーズになり、マップデータとスタイルをその場で変更できる柔軟性が高まります。これらの改善により、Mapbox GL JSへの切り替えは努力する価値があるため、最近PeterのCourierデモをMapbox.jsからGLに変換しました。
Mapbox.jsは非推奨です。MapboxGL JSを使用してください ウェブサイトで ：
Mapbox.js
- アクティブな開発ではなくなりました
- ラスタータイルをサポート
- タイルはサーバーによって生成されます
- ブラウザではマップスタイルを変更できませんが、マップオーバーレイは動的にスタイル設定できます
Mapbox GL JS
- アクティブな開発中—新しい機能を追加し、既存の機能を改善し、バグを修正しています
- ベクタータイルをサポート
- マップはブラウザによってクライアント側にレンダリングされます
- 地図データとスタイルは動的に変更可能
この記事には、両者の相違点と類似点の例も含まれています。
1ページに10個を超えるマップをレンダリングすることを計画している場合、mapbox-glを使用しないことをお勧めします。 Mapbox-glはWebGlを使用して地図を動的に描画します。最新のブラウザはすべてWebGlをサポートしていますが、WebGlコンテキストを開きすぎると問題が発生しました。あまりにも多くは主観的であり、クライアントが使用しているブラウザに正確に依存しています。コンテキストの数もタブに依存しないようです。そのため、クライアントが既に「多すぎる」コンテキストを使用しているタブを開いている場合、結果としてマップがレンダリングされない可能性があります。
リンクされた問題については、以下をご覧ください。
https://github.com/mapbox/mapbox-gl-js/issues/6312
https://github.com/mapbox/mapbox-gl-js/issues/7332
私はmapbox.jsやリーフレットを使用したことはありませんが、10個以上のマップが必要なページでは、mapbox-glを使用しないことをお勧めします。