Generieren Sie Kacheln für Google Maps-Overlays

8

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.

Beispielbild

Arun Chaudhary
quelle
Haben Sie versucht, CartoDb zu verwenden? www.cartodb.com
EZMapdesign
Überprüft es. Es wird mein Problem nicht lösen. Ich kann dort keine Möglichkeit finden, Kacheln zu generieren.
Arun Chaudhary
Kreise mit Deckkraft mischen also immer Farbe? Sie können die Deckkraft für jeden Kreis steuern - jsfiddle.net/8GaZ5/1 gmaps v3
Mapperz
Vielen Dank an Mappers für Ihre Zeit. Ich glaube, ich bin nicht klar, daher habe ich der Frage weitere Details hinzugefügt . Überprüfen Sie diese jsfiddle jsfiddle.net/Dv4UT . Der überlappende Teil ist braun und ich versuche genau das zu vermeiden. Ich möchte, dass der überlappende Teil die Farbe eines Kreises auf dieser Oberseite hat, dh in diesem Fall rot.
Arun Chaudhary

Antworten:

2

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.

user1269942
quelle
1

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.

ujjwalesri
quelle
Das wird nicht funktionieren. Erstens können sich an einigen Stellen bis zu 10 Kreise schneiden. Zweitens können Kreise unterschiedliche Farben haben, dh: grüner Kreis überlappt roten Kreis. In solchen Fällen würde ich eine Mischung überlappender Farben erhalten, während ich nur die oberste Farbe erhalten sollte Der Mauszeiger löst nichts, da das Mischen nur im überlappenden Teil und nicht im gesamten Kreis erfolgt.
Arun Chaudhary