2012-04-18 17 views
6

Ich benutze Bing Maps mit Ajax und ich habe ungefähr 80.000 Stellen, um Pushpins hineinzulassen. Der Zweck dieser Funktion ist es, einem Benutzer zu ermöglichen, nach Restaurants in Louisiana zu suchen und auf den Reißzwecke zu klicken, um die Gesundheitsinspektionsinformationen zu sehen.Umgang mit einer großen Anzahl von Pins in Bing Maps

Offensichtlich ist es nicht gut, 80.000 Pins gleichzeitig auf der Karte zu haben, aber ich habe Mühe, die beste Lösung für dieses Problem zu finden. Ein weiteres Problem ist, dass die Entfernung zwischen diesen Orten sehr klein ist (alle 80.000 sind in Louisiana). Ich weiß, dass ich Clustering verwenden könnte, um die Karte nicht zu überladen, aber es scheint, als würde das immer noch Leistungsprobleme verursachen.

Was ich gerade versuche ist, einfach keine Pins bis zu einer bestimmten Zoomstufe anzuzeigen und dann nur die Pins in der aktuellen Ansicht zu zeigen. Das versuche ich derzeit, indem ich das Ereignis viewchangeend verwende, um die Zoomstufe und die Grenzen der Karte zu finden und dann die Datenbank (über einen Webservice) nach Punkten in diesem Bereich abzufragen.

Es fühlt sich an, als ob ich in die falsche Richtung gehe. Gibt es eine bessere Möglichkeit, diese große Datenmenge zu verwalten? Wäre es besser zu versuchen, zuerst alle Punkte zu laden und dann die Daten zur Hand zu haben, ohne jedes Mal, wenn sich die Karte bewegt, meinen Web-Dienst zu treffen. Wenn ja, wie würde ich darüber gehen?

Ich konnte keine Antworten auf meine Fragen finden, was normalerweise bedeutet, dass ich die falschen Fragen stelle. Wenn jemand mir helfen könnte, die richtige Frage herauszufinden, würde es sehr geschätzt werden.

+0

Wenn Sie versuchen, so viele Datenpunkte zu visualisieren, sind vielleicht die Push-Pins nicht der beste Weg, dies zu tun. Hast du darüber nachgedacht, stattdessen eine Heatmap zu verwenden? –

+0

Danke für den Kommentar! Ich hatte nicht darüber nachgedacht, aber nach dem Auschecken glaube ich nicht, dass es für mein Szenario funktionieren wird, da Benutzer in der Lage sein müssen, einen individuellen Standort auszuwählen und auf eine Infoseite für diesen Standort gebracht zu werden. Ich werde meine Frage bearbeiten, um das deutlicher zu machen. – Justin

Antwort

9

Nun, ich habe einen etwas anderen Ansatz implementiert. Es war nur eine lustige Übung, aber ich zeige alle meine Daten (etwa 140.000 Punkte) in Bing Maps mit dem HTML5-Zeichenbereich.

Ich habe zuvor alle Daten auf den Client geladen. Dann habe ich den Zeichenprozess so sehr optimiert, dass ich ihn an das "Viewchange" -Ereignis angehängt habe (das während des Ansichtsänderungsprozesses ständig ausgelöst wird).

Ich habe darüber gebloggt. Sie können es überprüfen here.

Mein Beispiel hat keine Interaktion, könnte aber leicht gemacht werden (sollte ein nettes Thema für einen Blogbeitrag sein). Sie müssten also die Ereignisse manuell behandeln und selbst nach den entsprechenden Punkten suchen oder, wenn die Anzahl der zu zeichnenden Punkte und/oder die Zoomstufe unter einem bestimmten Schwellenwert lagen, regelmäßige Push-Pins anzeigen.


Wie auch immer, eine weitere Option, wenn Sie auf Bing Maps nicht beschränkt sind, dann ist die Gleichen von Leaflet zu verwenden. Sie können eine Canvas-Ebene erstellen, bei der es sich um eine Kachel-basierte Ebene handelt, die jedoch auf der Clientseite mithilfe von HTML5-Canvas gerendert wird. Es eröffnet eine neue Palette von Möglichkeiten. Überprüfen Sie zum Beispiel this Karte in GisCloud.


Noch eine andere Option, obwohl für statische Daten besser geeignet, ist die Verwendung einer Technik namens UTFGrid. Die Jungs, die es entwickelt haben, können es sicherlich besser als ich, aber es skaliert für so viele Punkte wie Sie wollen mit einer phänomenalen Leistung. Es besteht aus einer Kachel-Ebene mit Ihren Informationen und einer begleitenden JSON-Datei mit einer Art "Ascii-Art" -Datei, die die Features auf den Kacheln beschreibt. Mit der Bibliothek wax können Sie dann Mausereignisse und Mausklicks ohne Leistungseinbußen durchführen.

Ich habe auch blogged darüber.

+0

Interessantes Konzept, ich habe tatsächlich etwas sehr ähnliches für eine Dach-Mapping-Anwendung gemacht, wo die Leinwand verwendet wird, um detaillierte Abmessungen (linedrawing Stil Länge, Winkel usw.) auf der Karte anzuzeigen. Das Problem bei diesem Ansatz besteht jedoch darin, dass das Canvas-Element jetzt alle Zeigerereignisse empfängt, die für die Zuordnung verwendet wurden. Die Nicht-Standard-CSS-Eigenschaft pointer-events: none kann dies lösen, aber es wird nicht in einigen Browsern, insbesondere IE, unterstützt. Der Versuch, die Ereignisse manuell in Javascript zu passieren, scheint einfach nur ein Durcheinander zu sein. Ich wäre daran interessiert zu wissen, ob Sie einen Weg finden, dies zu lösen. –

+0

Tatsächlich gehen die Ereignisse direkt auf die Karte. Hast du das Video gesehen, das ich gezeigt habe? Alle Zooms und Pfannen werden direkt von Bing Maps verarbeitet. – psousa

+0

Ahh Ich sehe was du machst. Du hast die Leinwand in die Map div eingefügt, während ich sie einfach auf die Map div gesetzt habe. Aber selbst mit Ihrer Methode wird die Leinwand immer noch über anderen Kartenelementen wie den Pins, die man später hinzufügen könnte, liegen. Ich nehme an, man könnte etwas cleveres tun, etwa versuchen, die Leinwand auf die Kartenkacheln zu legen, aber unter die anderen Kartenelemente wie Pins oder Formen, aber das klingt nach einem Schmerz, um es richtig zu implementieren. Anyway +1;) –

3

Ich denke, Clustering wäre die beste Wahl, wenn Sie damit durchkommen können. Sie sagen, Sie haben versucht, Clustering zu verwenden, aber es hat immer noch zu Leistungsproblemen geführt? Ich ging, um es mit 80000 Datenpunkten an der V7 Interactive SDK zu testen und es scheint gut zu funktionieren. Testen Sie es selbst heraus, indem auf den Link gehen und die Zeile in der Load module - clustering Registerkarte ändern:

TestDataGenerator.GenerateData(100,dataCallback); 

zu

TestDataGenerator.GenerateData(80000,dataCallback); 

dann drücken Sie die Taste Run. Die Leistung scheint mir mit so vielen Datenpunkten akzeptabel zu sein.

+0

Um ehrlich zu sein, ich habe das nicht getestet. Ich war nicht nur besorgt über die Leistung des Zeichnens auf der Karte, sondern auch um den Web-Service zu treffen und aus der Datenbank zu laden. Ich dachte, dass ich das Problem falsch angehen würde, aber es könnte tatsächlich funktionieren. Danke für die Hilfe! (Ich bin neu hier und ich habe noch keine 15 Rufpunkte, also kann ich deine Antwort nicht beantworten ... Entschuldigung). – Justin

Verwandte Themen