Ich möchte auf einer Karte bestimmte Zonen (transparenter Layer) markieren. Soweit kein Problem dafür gibt es ja zahlreiche Möglichkeiten (Geometry Points Polygon,…). Ich möchte nun aber weggehend von Standorten bis hin zum äußeren Rand des Polygons einen Farbverlauf von Grün (beim Standort) zu rot (äußerer Rand des Polygons). Das ganze würde optisch einer Heatmap ja relativ nahe kommen.
Da ich ein Neuling in Openlayers/OSM bin möchte ich Euch um Ideen fragen wie ich dies am besten umsetzen könnte. Ein ähnlicher Anwendungsfall gibt es in diesem Projekt zu sehen(Zeitintervall in den roten Bereich schieben!):
Der bei vielen Browsern intern zur Implementierung von OpenLayers.Layer.Vector genutzte SVG-Layer kann Kreise mit einem Farbverlauf von innen nach außen darstellen; mit passendem Clipping kann man daraus die gewünschte Heatmap bauen. Also: prinzipiell gehts. Braucht aber Kenntnisse in SVG und etwas nichttriviale Programmierung. Ob es eine fertige Library gibt, weiß ich nicht.
Eine triviale Lösung gibt es jedenfalls nicht, denn der abstrakte OpenLayers.Layer.Vector unterstützt keine Farbverläufe.
Wie kommst Du denn zu Deinen Zonen? Wenn das eine einmalige Sache ist, kannst Du auch einfach ein Bild malen und mit OpenLayers.Layer.Image(…) über die Landkarte legen.
Das sieht dann so aus. Hier werden einfach zwei einfarbige Bilder (z.B. das rote) über die Karte gelegt, aber die können natürlich auch aufwendiger gestaltet werden.
Für aufwändigere Sachen kenne ich auch nichts vorgefertigtes…
Werde das mal ausprobieren, bin aber zuversichtlich damit zum gewünschten Ziel zu gelangen Vielen Dank!
Soll sich schon zur Laufzeit verändern also mit einem Bild werde ich nicht klarkommen. Die Zonen werden durch mehrere Anfragen zu einem Routingservice erstellt.
Die eigentliche Aufgabe besteht darin, die Kreise zu finden, die sich in die Quere kommen, und sie passend zu clippen.
Ob man das auf dem Server macht und dann den erzeugten SVG-Code in die Seite stanzt oder per JavaScript im Browser und dann den Code per document.write() oder document.createElement () und node.appendChild() erzeugt, ist eine zweitrangige Designentscheidung.
