OpenLayers Anwendungsproblem

Cruiser · 2010-12-19T18:09:11.000Z

Hallo Forum,

vielleicht kann mir hier einer mit der OpenLayers Bibliothek helfen. Ich suche eine Möglichkeit mit OpenLayers das nachfolgende Szenario abzubilden:

Ich habe eine Menge an Punkten, die ich manuell auf der Karte erstellen müsste
Die Punkte sollen durch unterschiedliche kleine Grafiken dargestellt werden
Wenn man über einen Punkt fährt, soll dieser durch einen Hover Effekt mit einem Kreis unterlegt werden (normalerweise würde ich das mit einer Klasse auf dem Div für die Grafik lösen, die durch moz-border-radius-… zu einem Kreis gerundet wird)
Ebenfalls soll es ein Popup unter dem Punkt geben mit einem speziellem Text pro Punkt (der Text steht bei der manuellen Einfügung der Punkte schon zur Verfügung)
Durch ein Klick auf den Punkt soll eine Javascript Funktion aufgerufen werden können

OpenLayers.Layer.Vector sollte ja für neue Projekte am besten verwendet werden. Durch die Klasse OpenLayers.Control.SelectFeature lassen sich ja auch die entsprechenden Aktionen registrieren. Wie bekomme ich nun aber am besten meinen Kreis unter die Grafik? Momentan erstelle ich die Grafik mit folgendem Code


var vectorLayer = new OpenLayers.Layer.Vector("Punkte");
map.addLayer(vectorLayer);
            
var style_mark = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
style_mark.externalGraphic = "pic.gif";
            
// create a point feature
var point = new OpenLayers.Geometry.Point(9.75, 52.38).transform(proj, map.getProjectionObject());
var pointFeature = new OpenLayers.Feature.Vector(point, null, style_mark);
vectorLayer.addFeatures([pointFeature]);

maxbe · 2010-12-19T18:38:38.000Z

Ich hab mal was ähnliche gebastelt, allerdings nicht mit hover über der Karte. Mein Kreis wandert mit hover von einer Menüleiste aus.

Punkt erstellen mit


 vectorLayer = new OpenLayers.Layer.Vector("Wanderpunkt",{visibility: false});
 pointstyle  = {fillColor: "#FFFF00",pointRadius: 13, fillOpacity: 0.7,
                    strokeColor: "#000000", strokeWidth: 2 };
 Point = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(0,0),null,pointstyle);
 vectorLayer.addFeatures([Point]);

dieser “Punkt” ist ein Kreis, Radius 13Pixel, gelb gefüllt, leicht durchsichtig mit 2Pixel breitem schwarzem Rand.

und dann mit hover ein Verschieben dieses Punktes auf die passende Koordinate:

Point.move(new OpenLayers.LonLat(lop,lap).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")));

Anschauungsbeispiel gibts hier (html und das javascript dazu), allerdings nicht unbedingt im Hinblick auf Verständlichkeit des Sourcecodes getippt…

Grüße, Max

Cruiser · 2011-01-27T09:13:22.000Z

Auch wenn meine Frage und die Antwort nun schon wieder etwas länger her ist, wollte ich mich für den interessanten Lösungsansatz doch noch mal bedanken. Gute Idee

Ghostrider82 · 2011-05-02T18:16:35.000Z

Ich habe gerade nach der gleichen Lösung gesucht und das oben genannte ausprobiert, allerdings mit dem Ergebnis, dass ich keine Marker erhalte.
Welchen Grund kann das haben? Jetzt mal gebrainstormt… hat jemand ein vollständiges Beispiel? Das was ich dort auf deiner Webseite finde, bringt mir auch keine Marker.