問題タブ [mapbox-gl-js]

Web サイトに mapbox マップがあり、マップのデフォルト ボタンでズームしてマップをクリックすることができますが、マウス ホイールでズームを有効にする必要があります。

任意のアイデア、ありがとう。

次の 3 つの主な機能を備えたカスタマイズされたマップを作成するために MapBox JS を使用しようとしています。

1. カスタム マーカー イメージ (アイコン)
2. Fly-to Location（ゆっくりまたは一般的なもの）
3. マーカーのフィルタリング

機能 1 と 2 は同じ JS ファイルに該当しないようです。彼らは異なるバージョンのJSファイルを使用しているようです。以下のリンクを参照してください。

Mapbox を試して、これら 2 つの異なる機能を 1 つに使用した人はいますか?

noConflict も使用しましたが、そのようには機能しません! バージョン v0.18.0 の JS & CSS ファイルを使用してカスタム マーカーを作成することを見つけようとしましたが、別のバージョン (v2.4.0) ではそのようなアイコンを取得しないようです。

以下は、異なるバージョンのファイルを使用する機能の 2 つの例です。

https://www.mapbox.com/mapbox-gl-js/example/flyto/

https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-marker/

私が見つけたJSとCSSのバージョンファイル：

これは機能 2 と 3 用です

これは機能 1 - カスタム マーカー用です。

Mapbox js を使用してマップにマーカーを追加する Rails アプリがあります。Mapbox JS と完全に連携します。ただし、Mapbox GL JS で動作させる方法がわかりません。これが私のコントローラーインデックスアクションです:

私の見解では、このスクリプトを使用して、Mapbox JS でマップ上のポイントを取得します。

私の質問は: Mapbox GL JS でこれを達成するにはどうすればよいですか? ページに地図を表示するために使用するコードを次に示します。

Mapbox GL JSのドキュメントにあるように、「データ」のURLを渡すためにさまざまな方法を試しました。たとえば、私は試しました

コンソールに次のエラーが表示されます。

maps/index.json に移動すると、ページ上の json の出力は次のようになります。

ポイントを持つ Mapbox マップを使用しています。マーカー シンボルを追加するための正しい手順を知りたいです。ここに私のGeoJSONがあります:

Mapbox ドキュメントの例を次に示します。

これを使うと

従来のマーカーの代わりに小さな茶色の点が表示されます。私は使っている

そして私は

私のスクリプト全体は次のようになります。

何か不足していますか？また、ポップアップはポイントの上にはポップアップせず、アイコンの上にポップアップします。この小さな茶色の点ではわかりませんが、たとえばロケットの場合、ポップアップはロケットの真ん中にあります。ありがとう！

ここにスクリーンショットがあります

React-Native、React Redux、および Flux Navigation でMapbox ( https://github.com/mapbox/react-native-mapbox-gl ) を使用しようとしています。

単一のモジュール検索とマップがあるモジュールでアプリケーションを構築しました。次のように構成されています。

SearchResults.js では、画像とテキストで表示される 10 件の結果を取得します。結果は私の redux ストアに保存されます。Map.js と SearchResults.js に 2 つのボタンがあり、2 つのコンテナー間のナビゲーションを有効にします (Flux ナビゲーション Action.Map() と Action.SearchResults() を介して前後に移動)。

Map.js では、地図の状態を更新して、searchResult ストアから経度と緯度を受け取ります。私が今直面している問題は、SearchResults と Map を前後に切り替えると、パフォーマンスに大きな問題が発生することです。これは、マップが常に再レンダリングされるために発生します。

反応ライフサイクル メソッドを使用して回避策を見つけようとしましたが、役に立ちませんでした。2 つのモジュール間を移動するので、これは役に立たないと思います。

Map.js が常に再レンダリングされないようにする最善の方法は何ですか?

mapbox を見始めたばかりで、すぐに問題に遭遇しました。

ここにサンプルをコピーしました。 https://www.mapbox.com/mapbox.js/example/v1.0.0/

この部分に注意してください。

未編集で、私の Web ページで動作します。accessToken を自分のものに変更すると、機能します。ただし、mapID を「mapbox.streets」から「myusername.mapID」に変更すると (これらを再確認しましたが、正しいです)、得られるのは空のマップだけです。

私が間違っていることは何か分かりますか？

Meteor システム内でwebpack とmapbox-glを連携させようとしています。上記のエラーについてどこでも調べましたが、何も機能しません。これが私のwebpackセットアップです

参考までに、 Reactive Stackが提供する webpack を使用しており、webpack のセットアップ方法が少し異なります。

これが私package.jsonのnpmセットアップです

私は何を間違えましたか？MDGの誰かがエラーを説明できることに感謝します.Meteorシステムと何か関係があると私は信じています. 参考までに、私npm startはページを実行するために使用します

アップデート

@also からの提案に基づいて、セットアップの一部をwebpack.conf.js

ここからセットアップを取得します。と私webpack.json

しかし、私はまだ別のエラーに遭遇しました