問題タブ [mapbox-gl-js]

MapboxMapMapbox マップ ( mapconst の下) を初期化してレンダリングする React コンポーネントがあり、その中にコンポーネントをレンダリングする必要がありますMapMarker。

これはMapboxMap次のようになります。

これはどのようMapMarkerに見えるかです。

2 つのコンポーネントを構成して、両方のコンポーネントからアクセスできるようにするにはどうすればよいですか?ただし、具体的には、コンポーネントmap内のマップをレンダリングします。MapboxMap

Does anyone know how to get the URL for a Mapbox vector tile map (aka a "style")? I can only get a style address that looks like this: mapbox://styles/myusername/r3411y10ngh4sh3tc3tc, but I am using a plugin that requires a URL to integrate Mapbox's Vector Tiles with Leaflet: https://github.com/SpatialServer/Leaflet.MapboxVectorTile/blob/master/docs/configuration.md

I tried substituting the style address provided by Mapbox for the URL

but I get an error where it can't read the style address as a URL. Any suggestions? Should I be using a different plugin?

Update

In short, the URL for a Mapbox style is not yet available. Here is a response I received from Mapbox:

Leaflet is not yet compatible with styles made in Mapbox Studio since these styles require a GL-based renderer. We're currently working on a new API to allow you to use your Studio style with Leaflet, we expect it to launch in a few weeks.

At this time, you can use Mapbox GL JS to load your Mapbox Studio style. You can still access raster map IDs (maps made with Mapbox Editor, Mapbox Studio Classic) to load with Leaflet - these are found under the "Classic" tab in the Studio dashboard.

そのマップボックスの凡例をアコーディオンのような構造に変換して、親レイヤー名をクリックすると子レイヤー名がその下にインデントされた形式で表示されるようにする方法。現在の標準構造のリンクを以下に投稿しましたhttps://www.mapbox.com/mapbox.js/example/v1.0.0/wms/しかし、私はこのhttp://jsfiddle.netのように見えるようにしたいと思います/La77L8L9/3/ . 違いは、レイヤー情報がデータベースから取得されていることです。現在、レイヤー名を持つクリック可能なリンクとして JavaScript で要素 a を作成することにより、レイヤーを追加しています。リンクをクリックすると、対応するマップが表示されます。データベースからレイヤー名を取得した後、レイヤー名を現在どのように追加しているかのスニペットを下に配置しました。メニュー ui がベース マップの名前を保持していないことを確認してください。

おそらく、各要素に ID を与え、.clicked を使用して可視から偽への表示を実行する方法があると想定していますが、データベースを使用してレイヤー名を取得するときに動的に行うのは少し難しいです。私のデータベースにはレイヤーIDがあり、特定のレイヤーが親の子である場合はレイヤーとparentLayerIDがあります。

地図上にこのシンボルがあります

このマーカーをズームインして中心にしたいと思います。

これまでのところ、私はこれを試しました：

座標の引数は省略しているので、直接参照しています (API に記載されているとおり)。しかし、「機能」は空で到着し、私は決して飛べません

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 マップですが、データ駆動型ではありません

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

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