Farbverlauf Layer

Markovicho · 2013-09-23 09:45:02

Hallo!

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!):

http://www.geographie.uni-potsdam.de/sona/

In diesem Beispiel scheint das ganze mit mehreren, sich überlagernden Layern gelöst.

Aber vielleicht hat ja jmd einen eleganteren Ansatz der das ganze auch etwas "weicher" darstellen würde.

Ich wäre über jede Idee erfreut :-)

Danke im Voraus!

Last edited by Markovicho (2013-09-23 09:55:19)

Netzwolf · 2013-09-23 23:44:21

Nahmd,

Markovicho wrote:

Das ganze würde optisch einer Heatmap ja relativ nahe kommen.
[…]
Aber vielleicht hat ja jmd einen eleganteren Ansatz der das ganze auch etwas "weicher" darstellen würde.

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.

Gruß Wolf

maxbe · 2013-09-24 11:21:07

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...

Grüße, Max

couchmapper · 2013-09-24 12:03:06

ein openlayers heatmap beispiel:

http://dev.openlayers.org/sandbox/campt … atMap.html

Markovicho · 2013-09-25 09:37:39

Netzwolf wrote:

Nahmd,

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.
Gruß Wolf

Werde das mal ausprobieren, bin aber zuversichtlich damit zum gewünschten Ziel zu gelangen Vielen Dank!

maxbe wrote:

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.

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.

Netzwolf · 2013-09-25 10:56:56

Nahmd,

Markovicho wrote:

Netzwolf wrote:
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.
Werde das mal ausprobieren, bin aber zuversichtlich damit zum gewünschten Ziel zu gelangen Vielen Dank!

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.

Ich habe da mal was vorbereitet.

Gruß Wolf

Markovicho · 2013-09-26 09:06:47

Tausend Dank! Die Umsetzung wird sich nun eine Weile hinziehen aber werde dann natürlich das Ergebnis hier präsentieren

Announcement

#1 2013-09-23 09:45:02

Farbverlauf Layer

#2 2013-09-23 23:44:21

Re: Farbverlauf Layer

#3 2013-09-24 11:21:07

Re: Farbverlauf Layer

#4 2013-09-24 12:03:06

Re: Farbverlauf Layer

#5 2013-09-25 09:37:39

Re: Farbverlauf Layer

#6 2013-09-25 10:56:56

Re: Farbverlauf Layer

#7 2013-09-26 09:06:47

Re: Farbverlauf Layer

Board footer