Bing Mapsで多数のプッシュピンを処理する方法

Question

私はAjaxでBing Mapsを使用しており、プッシュピンをドロップする場所は約80,000箇所あります。この機能の目的は、ユーザがルイジアナ州のレストランを検索して、プッシュピンをクリックして健康検査情報を確認できるようにすることです。

明らかに地図上に一度に80,000ピンを持つのはあまり効果がありませんが、私はこの問題を解決するのに苦労しています。別の問題は、これらの場所間の距離が非常に小さいことです（すべて80,000人がルイジアナにあります）。マップを乱雑にするのを避けるためにクラスタリングを使うことができるのは知っていますが、それでもパフォーマンスの問題が発生するようです。

私が現在行っているのは、特定のズームレベルまでピンを表示せずに、現在のビュー内のピンのみを表示することです。私が現在しようとしているのは、viewchangeendイベントを使用してズームレベルとマップの境界を見つけ、その範囲内の任意のポイントについてデータベースに（Webサービスを通じて）照会することです。

私はこれを間違った方法で行っているように感じます。この大量のデータを管理するより良い方法はありますか？最初はすべてのポイントをロードしてから、マップが動くたびにWebサービスにアクセスする必要はなく、データを手元に置いておく方がよいでしょうか。もしそうなら、私はどうすればそれについて行きますか？

私は自分の質問に対する回答を見つけることができませんでした。これは通常、間違った質問をしていることを意味します。誰かが正しい質問を見つけられるように助けてくれれば、それは大いに感謝されます。

Answer 1

さて、私はこれに対して少し異なるアプローチを実装しました。それはちょうど楽しい練習でしたが、私はHTML5のキャンバスを使ってBing Mapsに自分のすべてのデータ（約140.000点）を表示しています。

以前にすべてのデータをクライアントにロードしました。次に、描画プロセスを最適化して、ビュー変更プロセス中に常に発生する「Viewchange」イベントにアタッチしました。

私はこれについてブログに書いています。あなたはそれを確認することができますhere。

私の例は、それに対話を持っていませんが、簡単に行うことができます（ブログ記事の素敵な話題です）。このように、イベントを手動で処理し、対応するポイントを自分で検索するか、描画するポイントの量やズームレベルがある閾値を下回った場合は、通常のプッシュピンを表示します。あなたはBing Mapsのに限定されていない場合

---

とにかく、別のオプションは、Leafletの同類を使用することです。キャンバスレイヤーを作成することができます。キャンバスレイヤーはタイルベースのレイヤーですが、HTML5キャンバスを使用してクライアントサイドでレンダリングされます。それは新しい可能性を広げます。例thisの地図をGisCloudにチェックしてください。

---

さらに別のオプションは、スタティックデータに適していますが、UTFGridというテクニックを使用しています。それを開発した若者は私よりも確かにexplainですが、それはあなたが望むように、多大なパフォーマンスを伴って多くの点のために拡大します。それは、あなたの情報を持つタイルレイヤーと、タイルの機能を記述する "ascii-art"ファイルのようなものを伴う付随するjsonファイルを持つことから成っています。次に、waxというライブラリを使用して、パフォーマンス上の影響をまったく受けることなく、完全なマウスオーバー、マウスクリックイベントを提供します。

私はまたそれについてbloggedを持っています。

Answer 2

私はあなたがそれを使用して離れて得ることができる場合、クラスタリングはあなたの最善の策だろうと思う。クラスタリングを使用しようとしたが、それでもパフォーマンスの問題が発生したとしますか？私はV7 Interactive SDKで80000のデータポイントでそれを試してみるとうまくいくようです。 Runボタンを押し、次に

TestDataGenerator.GenerateData(80000,dataCallback); 

に

TestDataGenerator.GenerateData(100,dataCallback); 

：リンクに行くことによって自分自身をそれをテストし、Load module - clusteringタブ内の行を変更します。そのパフォーマンスは、多くのデータポイントで私にとって受け入れられるようです。