javascript - Javascript を使用して Google マップ上に ~50K オブジェクトを作成する

Question

名前、番号、写真などの詳細とともに、Google マップ上に50,000 台の車をほぼ表示するアプリケーションを設計しています。

それを行うためのベストプラクティスは何かを知りたいです。ネイティブのモバイル アプリまたはデスクトップ アプリケーションを作成することを提案する人もいますが、Web ブラウザーで実行できるWeb アプリが必要です。データはJSON形式でサーバーから直接取得されます。

データを制限する必要がありますか、それとも回避策がありますか?

ありがとう

Answer 1

コメントで示唆されているように、表示したい 50K のデータ ポイントのクラスターを作成することをお勧めします。

24 インチの 1920x1080 ディスプレイでも 50K のデータ ポイントが表示されるということは、それぞれが最大 41 ピクセルになることを意味し、これはそれぞれが 6x6 ピクセルの正方形を意味し、画面全体を占めることになります。

多くのオーバーラップがあることは明らかです。

さらに、JSON でサーバーから 50K のデータ ポイントをフェッチすると (おそらく、それらすべてを含む大きな json を取得することになるでしょう)、少なくとも 50k x 10 x 2 = 1,000,000 バイト = 1MB がそれぞれ必要になります。サーバーからのプルをリクエストします。(緯度と経度があるため、浮動小数点数あたり 50k ポイント x 10 バイト、小数点以下 5 桁 x 2 桁)。

したがって、これをリアルタイムにしたい場合は、おそらくこれらのリクエストを 2 秒ごとに行う必要があります。

また、これらのすべてがビューポートに収まるわけではないため、ビューポートにないものは表示されないため除外する必要があります。したがって、サーバーは、クライアントが使用しているディスプレイの種類 (解像度) を認識している必要があります。

最善の方法は、サーバー側でいくつかのクラスタリング ロジックを記述し、クライアント側をそのままにして、より少ないデータ ポイントを処理することだと思います。(ここでクラスタリングとは、複数のポイントがグループ化され、ズームインすると、それらが別々のグループに展開し始めることを意味します)

更新：

また、DOM ノード数が増えると、多くのノードを検索する必要があるため、セレクターの実行が遅くなることも考慮してください。ただし、マーカーをレイヤーに配置し、セレクターがそのレイヤーに触れないようにして時間を無駄にしないようにすると、ここで速度の問題を回避できます。

更新＃2：

データを効率的に送信するには、BSONでエンコードして圧縮し、 zlib.jsを使用して解凍し、 BSONを使用して読み取ることができるクライアント側に渡します。

サーバー側で C++ を使用することを想定していますが、他の多くの言語にも BSON 実装があります。

更新＃3：

軽量トランスポート プロトコルであるmqtt プロトコルも確認してください。ここに Javascript 実装がありますMQTT.js

更新 #4 : 場合によっては、最後の更新以降、一部のポイントがその位置を保持している可能性があります。その場合、その位置を送信する必要はありません。

同様に、ポイントの速度とズーム レベルによっては、ポイントがまったく動いていないように見える場合があるため (非常に遠くから見ている場合)、ポイントの位置を送信したくない場合があります。毎回そのポイント。したがって、クライアント側のディスプレイ上の位置を変更するもののみを送信することは理にかなっています (他のものは静的であると表示されますが、静的ではないため)。

Answer 2

IMHO、このような多数のオブジェクトでの最善の方法は、ラスターのサーバー側レンダリングを使用することです。

Answer 3

一度にすべてのデータを取得しますが、ビュー ポート上またはビュー ポートの近くにあるマーカーのみを描画します。;)