1

tl;dr バージョン: MapBox GL で高速なコロプレス マップを作成するにはどうすればよいですか?

@RyanBaumann が例を投稿しました: https://ryanbaumann.squarespace.com/blog/2016/1/23/mapbox-gl-create-data-driven-stylesを参照してください。

ただし、この例では、GeoJSON ファイルを JavaScript で直接読み込む方法を示しています。大きな GeoJSON ファイルの処理方法に関する 1 つの質問。18M の GeoJSON ファイルがあるとします。また、マップとデータ駆動型スタイルを表示して、すべてを効率的に実行したいと考えています。

たとえば、大きな GeoJSON ファイルを読み込んだとします。

https://cityregister.firebaseapp.com/recentsaleslocal.geojson

このマップボックス スタイル:

https://api.mapbox.com/styles/v1/fedex1/cijrx09ej007o90lx1g1m5b0j.html?title=true&access_token=pk.eyJ1IjoiZmVkZXgxIiwiYSI6ImNpam5jZXZvczAwZnd0b201ajhybXE0OW8ifQ.IumX7VWjU71UjEsKTN4bdw#11/40.7060/-73.9754

また、ロードは即座に行われ、ロード時に 18M 全体がネットワーク経由で転送されることはありません。

しかし、Ryan が示しているアプローチを使用すると、ロード時にネットワーク経由で 18M ファイル全体をロードする必要があるように見えます。これは、特に低速のネットワークでは非常に遅くなります。

データ駆動型のスタイルと mapbox のベース マップをすべて同じマップ上に配置する方法はありますか?

以下にいくつかの例を示します。

https://cityregister.firebaseapp.com/map.html (すぐに読み込まれ、ベース マップがあり、すべて mapbox スタジオ サーバーに存在します。データ駆動型スタイルはありません

https://cityregister.firebaseapp.com/testmapboxlayerchoropleth.html (読み込みが非常に遅く、ベース マップ、マップボックスにベース マップ、別のサーバーに geojson があります。データ駆動型のスタイルを使用します https://cityregister.firebaseapp.com/testmapboxlayerchoropleth.html (すぐに読み込まれます。ベース マップはありません。すべて mapbox-gl で生成されたようです。データ駆動型のスタイルを使用します。

私の質問は、マップボックスの速度とデータ駆動型のスタイルと通りのあるベースマップなどを取得する方法です.

ありがとう。

上の地図の写真。

高速な nyc マップですが、データ駆動型ではありません

高速な nyc マップですが、データ駆動型ではありません


高速なニューヨークコロプレスですが、ベースマップはありません

高速なニューヨークコロプレスですが、ベースマップはありません


遅いコロプレスは、ネットワーク経由で 18M を読み込みます

遅いコロプレスは、ネットワーク経由で 18M を読み込みます


4

2 に答える 2

1

サーバー側で GeoJSON ファイルをエンコードし、TopoJSON を使用してクライアント側で再度デコードすることができます。これにより、帯域幅が削減され、速度が大幅に向上します.

TopoJSON は、トポロジをエンコードする GeoJSON の拡張です。ジオメトリを個別に表すのではなく、TopoJSON ファイル内のジオメトリは、アークと呼ばれる共有線分をつなぎ合わせます。TopoJSON は冗長性を排除し、GeoJSON よりもはるかにコンパクトなジオメトリ表現を提供します。一般的な TopoJSON ファイルは、同等の GeoJSON ファイルよりも 80% 小さくなっています。さらに、TopoJSON は、トポロジを維持する形状の単純化、自動マップの色分け、カートグラムなど、トポロジを使用するアプリケーションを容易にします。

于 2016-01-30T15:03:07.980 に答える