問題タブ [vector-tiles]

リーフレット マップに表示したい GeoJSON 空間データがたくさんあります。約 35,000 の GeoJSON オブジェクト。

ポイントの量が非常に大きくなる可能性があるため、geojson-vtライブラリを使用して、クライアント側でデータを並べて表示したいと考えました。

現在、geojson-vt ライブラリを使用してデータをタイル表示することに成功しています。

geojson-vt によって生成されたベクター タイル データをリーフレット マップに統合するにはどうすればよいですか?

役立つ推奨プラグインやライブラリはありますか?

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.

私は TileStache を使用してベクター タイル レイヤーをレンダリングしていますが、OpenLayers 3 でうまく動作します。

http://standup.csc.kth.se/maps/projects.html

ただし、道路に沿って「テキストパス」を追加したいと思います（たとえば、完成予定年を表示します）。OpenLayers 3 で textpath を実行する方法が見つかりませんでした。OpenLayers2 用の方法しか見つかりませんでした...

この目的のためにリーフレットを見ましたが...リーフレットテキストパスプラグインとの組み合わせを許可していないように見えるプラグインを除いて、ベクタータイルでは機能しません...

ベクタータイルでテキストパスを実行するための解決策はありますか?

TileStache を使用して PostgreSQL からベクター タイルを提供し、タングラムを使用して URL (' http://localhost:8080/composite/ {z}/{x}/{y}.json') をデータに渡すことでこれらのタイルを表示しています。ソース。私が得た応答は、私が望んでいた JSON 形式です。

JSON 応答を暗号化する方法は? そのため、クライアント エンドでは人間が判読できず、サーバー エンドでは判読できません。

MapboxGL JS を使用してブラウザーに表示されるベクター タイルを提供する Node.js で Web サーバーをセットアップしようとしています。ベクター タイルのデータは PostGIS データベースに保存されます。

ベクター タイルが読み込まれ、ブラウザーに表示されていることがわかるので、現在のセットアップは正しい方向に進んでいるようです。ただし、レンダリングされた結果は正しくありません (これは私のマップの一部のスクリーンショットです)。

緑の建物の足跡の上半分は、画像の下半分で繰り返されます。また、ズームインおよびズームアウト時に建物の位置が「変化」していることに気付きました。これは、タイルがオフセットまたは不適切な範囲でレンダリングされていることを示しています... インポートされたデータは SRID 4326 にあります。

これが私のコードです：

カスタム ベクター データ ソースは、次のようにマップに含まれます。

ベクター タイル データを MapBox protobuf 形式で提供するローカル ベクター タイル サービスをセットアップしました。また、Mapbox GL JS を使用してベクター タイル データを表示する単純な JS クライアントも作成しました。

私のデスクトップ ブラウザでは、すべてが正常にレンダリングされます。ただし、モバイル ブラウザー (さまざまなデバイス) でクライアント アプリを開くと、一部のブラウザーでレンダリングの問題が発生します。ライン レイヤーの z レベルに問題があるようです (下部に添付された画面)。

簡単にするために、protobuf タイルのみを表示するコードを投稿し、タイルの境界線、水平線、および垂直線に線を付けます。「実際の」マップ データと同じように、問題は引き続き発生します。

問題はブラウザ固有ではありません。それは、Xiaomi Redmi Note2 と、非常に高い画面解像度を持つ一部の Samsung の 2 台の携帯電話のモバイル chrome と Firefox の両方で発見されました。Chrome 搭載の Xperia Z1 では、レンダリングは問題ありませんでした。デスクトップブラウザでのレンダリングは問題ありません。

もう 1 つ - MapBox の例のページからベクター タイルの例を確認したところ、どこでも問題なくレンダリングされました。

質問:

MapBox protobuf / GL JS lib の経験がある人なら、何が問題なのかわかるでしょうか? たぶん、スタイルにいくつかの設定がありません... または、GL JS ライブラリには、供給されているベクター タイル pbf データに対して明らかではない要件がありますか?

クライアント アプリ コード:

pbf コンテンツを生成する Java クラス:

スクリーンショット:

デスクトップブラウザ - すべて問題ありません:

モバイル ブラウザ - 行が消える:

私は PGRestAPI からの独自のベクター タイルを持っています。以下のような URLです。

mapbox-gl.js を使用してマップをレンダリングしようとしましたが、何も表示されません。

私は間違っていますか？どうも

編集1：

mapbox-gl-js コードをデバッグした後、いくつかの円が表示されるようになりました。スタイルを変更します。pbf からのソース レイヤー名は正しい必要があります。

すべてのポイントを表示していませんが、フィルタリングされているようですか？

編集 2: maxzoom を 22 に変更し、すべてのデータを表示します。飲もう！