Generieren Sie Kacheln für Google Maps-Overlays

Ich versuche, einige Informationen in Google Maps anzuzeigen, die in Form von durchscheinenden Kreisüberlagerungen vorliegen. Das Problem ist, dass sich einige Kreise überlappen, was zu einer erhöhten Deckkraft und Farbmischung führt, wenn Kreise unterschiedliche Farben haben. Ich habe viel gesucht und bin zu dem Schluss gekommen, dass es keine Möglichkeit gibt, Farbmischungen zu vermeiden.

Die alternative Lösung, die mir empfohlen wurde, bestand darin, PNG-Kacheln auf meinem Server zu generieren und anzuzeigen oder die Farbe jedes Pixels auf der Serverseite zu bestimmen, HTML5-Zeichenfläche zu verwenden und jedes Pixel zu rendern. Ich habe viel gesucht, aber keinen Weg gefunden, dies zu tun. Es wäre sehr hilfreich, wenn mich jemand in die richtige Richtung weisen könnte.

Ich formuliere meine Frage unten um, um klarer und prägnanter zu sein

Ich muss Kreise auf einer Karte anzeigen. Radius und Farbe dieser Kreise zeigen ihren Einflussbereich und die Art des Einflusses. Diese Kreise sind durchscheinend, aber Überlappungen sollten dazu führen, dass nur der obere ohne Überblendung sichtbar ist. Wie generiere ich Kacheln für diese Informationen?

Wahrscheinlich bin ich nicht klar, also füge ich weitere Details hinzu.

Überprüfen Sie diese jsFiddle http://jsfiddle.net/Dv4UT/. Es gibt zwei überlappende Kreise grün (zIndex: 10) und rot (zIndex: 11) mit Deckkraft .5. Der überlappende Teil ist eine Mischung aus Rot und Grün, während ich möchte Der überlappende Teil muss eine Top-Farbe mit der gleichen Deckkraft haben, z. B.: Rot. Wenn dies mit Kartenüberlagerungen möglich ist, wäre es großartig. Andernfalls denke ich, dass es möglich ist, HTML5-Canvas zu verwenden, aber das funktioniert bei älteren Versionen von IE.So nicht Schließlich müsste ich auf die Generierung von Kacheln auf der Serverseite und deren Verwendung als Überlagerungen zurückgreifen. Ich habe keine Ahnung, wie Kacheln generiert werden sollen, und es wäre sehr hilfreich, wenn mich jemand in die richtige Richtung weisen könnte. Ich füge eine hinzu Screenshot von der Trulia Commute Map, überprüfen Sie, ob die Kreise darunter von den oberen überschrieben werden. Ich benötige eine ähnliche Art der Visualisierung.

Erstellen Sie Ihr Overlay offline (aber dynamisch) mit der Programmiersprache Ihrer Wahl. Es wird ein bisschen komplex sein, aber der grundlegende Pseudocode wäre:

browser javascript send request url for overlay
acquire gis bounds for tile server side
gather all points and sort by their relevance
create image(transparent)
for each point: (least relevant first)
   draw new circle (will 'overwrite' any overlap areas)
stream image to browser
display image as overlay

Abhängig von der Größe Ihres Gebiets können Sie ein Raster offline erstellen und es dann mit einem Mapserver oder einem anderen kostenlosen Mapping-Bereitstellungsprogramm bereitstellen. Durch das Erstellen eines eigenen Rasters wird sichergestellt, dass die Anzeige Ihren Wünschen entspricht.

Ich würde folgendes tun:

1. Halten Sie die Deckkraft der Kreise sehr niedrig (damit das Mischproblem nicht zum Mainstream wird).
2. Ändern Sie beim Bewegen der Maus die Deckkraft, um die des Schnittkreises zu überwinden

Auf diese Weise könnte ich Daten ohne größere durch Farbmischung verursachte Interferenzen anzeigen und einen bestimmten Kreis hervorheben, wenn der Benutzer darüber schwebt.