問題タブ [mapbox-gl-js]

Mapbox GL JS は初めてですが、とても気に入っています! 誰かが私を助けてくれるかどうか疑問に思っているGeoJsonソースのマーカーをフィルタリングするときに私が遭遇したいくつかのこと...これが私のフィルターロジックのサンプルです:

そして、ここに私の質問があります：

1. フィルターが適用されたら、フィルターに一致したマーカーの数を取得する方法はありますか (検索で {X} 個のアイテムが返されました)。
2. geojsonExtent を使用してマーカー コレクションの境界を取得すると、フィルターが考慮されていないようです。フィルターの背後にあるデータを取得して geojsonExtent に渡す方法はありますか?

これらのアイテムのどこに行くべきかアドバイスはありますか?

ここで mapbox-gl ページを試しています: https://www.mapbox.com/blog/data-driven-styling/

私たちは見る

これは Chrome バージョンです。

これは Linux の ubuntu バージョンです。

これは web-gl の問題ですか? 私たちのコードの問題？mapbox-gl-js ライブラリの問題?

Firefoxで動作します:)

オーストラリアのビクトリアにある特定の郊外を表すポリゴンで構成される geojson ファイルをアップロードして作成した Mapbox のベクター タイルセットを取得しました。私のベクター タイルセットには、geojson のフィーチャ プロパティに対応する、郊外、州、郵便番号の 3 つのプロパティがあります。

また、Mapbox web gl js ライブラリを介してこれらのプロパティを正常にクエリして、正確なマップを取得することもできます。たとえば、強調表示されたポリゴンをクリックするとポップアップが表示されるマップが機能しており、ポップアップには郊外のプロパティ (郊外、州、郵便番号) が正しく表示されます。

ここで、タイルセットのすべての機能について、Web ページでこれらのプロパティにアクセスしたいと思います。私は基本的に、これらのプロパティをリストとして、マップの外側の div にダンプしたいと考えています。各郊外とそのプロパティをリストするだけです。この目的のために、MapBox Web GL JS ライブラリの querySourceFeatures 関数を使用しようとしています。私は少し苦労しています。

これが私のコードです。マップが期待どおりに表示されます。しかし、JS コンソールでは、空の配列を取得しています。

これが私のコードです

doco は少し軽いので、querySourceFeatures 関数を正しく使用しているかどうかわかりません。私はまったくの JS 初心者なので、まったく単純なものであれば申し訳ありません。

Firefox のコンソールでは、長さゼロの配列を取得します。ここからどこへ行くべきかわからない。

mapbox web gl js ライブラリの v0.18.0 を使用しています。

Mapbox-gl-js には「ハンドラー」があります - https://www.mapbox.com/mapbox-gl-js/api/#Handlers

ScrollZoomHandler などのハンドラーをオーバーライドするにはどうすればよいでしょうか。

CSS で変換されたマップ コンテナーを補正するためにマウスの位置を調整するために、ScrollZoomHandler _onWheel メソッドをオーバーライドしたいと考えています。

https://github.com/mapbox/mapbox-gl-js/blob/d6c34c81f7b0d6e77f1b25c2c080a3c5afba94ab/js/ui/handler/scroll_zoom.js

mapbox-gl-js を使用して、レスポンシブ コンテナー内にマップを表示しています。

レスポンシブ コンテナーのサイズに関係なく、ウィンドウのサイズを変更してもマップの境界やズーム レベルに影響を与えず、静的な画像であるかのようにマップを単純にスケーリングするように、マップで同じ解像度を維持したいと考えています。

これを実現するには、倍率を動的に計算し、CSS 変換を介してコンテナーに適用します。

これにより、目的の結果が視覚的に得られます。たとえば、500x500 コンテナー内に 1280x1280 のマップを表示できます。

問題は、すべてのマウス イベントが「オフ」になっていることです。たとえば、マップ クリックまたはスクロール ズームを試みると、マップはマウス イベントをマップの間違った領域に適用します。

マウス イベントがユーザーがクリックした場所を正確に反映するように、CSS 変換を補正するにはどうすればよいですか?

何百万ものポイントを持つ geoJSON があり、tippecanoe を使用して mbtiles に変換します。この mbtiles ファイルを mapbox にアップロードし、タイルをスタイルに追加すると、mapbox gl JS を使用してデータを表示できます。特定の色のポイントとして表示されるように、ポイントのスタイルを設定するにはどうすればよいですか。マーカーの色とマーカーの記号を geoJSON に追加し、クリックした機能を console.log に記録すると、これらを確認できます。ただし、これらは機能していません。形状については、デフォルトのように単純な円が必要です。しかし、geoJSON で設定された値に基づいて、これらの円の色をカスタマイズする必要があります。

私は自分のマップに単純なカスタム マーカーを作成できるようにするアプローチを探してMapbox JSいます。

Web を詳しく調べたところ、これを達成するための明白な、または非常に簡単な方法はないようです。これは、見逃されているかなりの機能だと思います。

で作業を数回試みましたがMapbox Studio、カスタム SVG をアップロードする方法とそれらを参照できる方法を理解するのが非常に難しいため、まだ運がありません。

例を挙げると、カスタムマップを作成しましたが、Mapbox Studio見る限り、使用できるアイコンはありません。スプライト シートと呼ばれるものを探してみましたが、そのようなアプローチで作業したことがないため、その方法がわかりません。

私だけでなく、何か新しいことを学び始めたばかりの多くの人にとってMapbox GL JS、素敵なガイドが添付されていることは非常に重要です.

したがって、これはいくつかのカスタムマーカーの作成に関する私のコードの一部です

ご想像のとおり、私のマップにはアイコンが表示されません。

Map ライブラリにとって重要なことを達成するための、適切でわかりやすい方法を誰か提案できますか?

マップのレンダリングが完了したかどうかを確認する方法がわかりません。上記のコードは、マップのレンダリング中にエラーが発生します。