問題タブ [mapbox-gl-js]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
node.js - MapboxGL クライアントの自己ホスト型ベクター タイルが正しくレンダリングされない
MapboxGL JS を使用してブラウザーに表示されるベクター タイルを提供する Node.js で Web サーバーをセットアップしようとしています。ベクター タイルのデータは PostGIS データベースに保存されます。
ベクター タイルが読み込まれ、ブラウザーに表示されていることがわかるので、現在のセットアップは正しい方向に進んでいるようです。ただし、レンダリングされた結果は正しくありません (これは私のマップの一部のスクリーンショットです)。
緑の建物の足跡の上半分は、画像の下半分で繰り返されます。また、ズームインおよびズームアウト時に建物の位置が「変化」していることに気付きました。これは、タイルがオフセットまたは不適切な範囲でレンダリングされていることを示しています... インポートされたデータは SRID 4326 にあります。
これが私のコードです:
カスタム ベクター データ ソースは、次のようにマップに含まれます。
mapbox - mapboxgl.GeoJSONSource オブジェクトの境界ボックスを取得するにはどうすればよいですか?
次のように Mapbox GL JS マップを設定しています。
次に、次のように読み込まれた後、その GeoJSON データをマップに読み込みます。
この時点で、 で指定した場所を中心とするマップがあり、new mapboxgl.Map
ズーム レベルは 13 です。そのため、GeoJSON データの一部のみがマップ上に表示されます。GeoJSON データ全体が表示されるように、地図の中心を再設定して再ズームしたいと考えています。
Mapbox JS では、GeoJSON データを にロードしてfeatureLayer
から、マップをその境界に合わせることでこれを行います。
Mapbox GL JSのfitBounds ドキュメント[[minLng, minLat], [maxLng, maxLat]]
は、境界が の形式で必要であることを示しています。
このGeoJSONレイヤーのミックス/最大緯度と経度の値を決定する方法はありますか?
browserify - Browserify で mapbox-gl.js をビルドするにはどうすればよいですか?
( mapbox-gl.js repoから) リポジトリを git clone した場合、ファイルの独自のスタンドアロン バージョンを作成するにはどうすればよいですか?
このようなスタンドアロンの mapbox-gl.js が必要です。
シンプルbrowserify js/mapbox-gl.js -o dist/mapbox-gl.js
は機能しません。
javascript - Mapbox オープン ソースとキーを使用していますか?
私は MapBox のオープン ソース ライブラリを調べましたが、主にmapbox-gl-js の使用に興味があります。
しかし、オープン ソース ライブラリで mapbox のキーを使用する必要がある理由がわかりません。キーを使用するように構築されていますか? このライブラリを社内でプロトタイプとして使用し、その影響を確認したいと考えています。
mapbox - mapbox-gl.js のポリライン フィーチャの強調表示
次のコードを使用して、マウス ポインターの下の機能を強調表示しようとしています。
私の geojson データとリンクされた例で使用されている geojson データの違いは、例がポリゴンで構成されているのに対し、私の geojson はポリラインで構成されていることです。行が強調表示されるように、それに応じてコードを変更しようとしましたが、機能しません。私の geojson はここからアクセスできます:
http://iskandarblue.github.io/mapbox/data/prototype2.geojson
何を変更する必要があるかについて何かアドバイスはありますか?
例: https://www.mapbox.com/mapbox-gl-js/example/hover-styles/
javascript - ある地点から別の地点までの方位を計算する方法はありますか?
これは私が手動で行う方法です...
私はこれらの3つの座標を持っています:
最初の座標を中心としたこのマップがあります。
次の座標が (正確ではありませんが、この例では十分に近い) 真っ直ぐになるように手動で方位を設定できます。
次に、その 2 番目の座標までまっすぐ飛ぶことができます。
次に、3 番目の座標をまっすぐ前に置き、方位を手動で再度設定します。
次に、その 3 番目の座標までまっすぐ飛ぶことができます。
flyTo
それぞれが常に直進するように、その方位の値を毎回自動的に計算する方法はありますか?
Java でこのアイデアをカバーしているthis questionを見つけました。そこにあるコードに基づいて、私は次のコードを思いつきました。これは、次のポイントをまっすぐ前に合わせるのではなく、それに近いが、より垂直な角度を持っています。
javascript - Mapbox GL js で使用可能なアイコン
Web アプリケーションを Mapbox.js から Mapbox GL js に書き直しています。標準の「mapbox://styles/mapbox/streets-v8」スタイルを使用して、すべての機能するマーカー アイコンのリストをどこで見つけることができますか?
これが私のコードです:
デフォルトとしてアイコンを持たないスタイルでは、すべての Maki アイコンを使用できるようにする必要があることを読みました: https://github.com/mapbox/mapbox-gl-styles/issues/241 しかし、それらのほとんどは機能しません。また、サイズにも問題があります。Maki の場合、サイズは -小、中、大でしたが、今では -11 と -15 になっています。
基本的なマーカー アイコンを使用するだけです。
javascript - Mapbox-GL setStyle はレイヤーを削除します
Mapbox-GL を使用してマッピング Web アプリケーションを構築しています。クールな機能がたくさんあります。Mapbox Web サイトの例に従って、ベース マップ (衛星、地形など) を切り替えるボタンを設定しました。
私が抱えている問題は、スタイルを変更すると、レイヤーとして読み込まれたポリゴンが削除され、マップが再読み込みされることです。ユーザー クエリに基づいて、Mongo データベースからポリゴンをレイヤーとして読み込みます。ベースマップを変更して、それらのレイヤーを保持できるようにしたいです。
マップをリロードせずに、または少なくともレイヤーをドロップせずにスタイルを変更する方法はありますか?
これはスイッチャーのコードです。例と同じですが、カスタム スタイルの条件を追加しました。