Transparente Fläche in Karte darstellen

joergi2012 · 2012-03-08T16:24:39.000Z

Hi,

ich habe mal eine Frage zu meinem Script. Dieser stellt den Standort in Form einer Stecknadel dar. Wichtige Punkte, werden aus einer CSV Datei geladen und auch dargestellt. Soweit, So gut. Nun würde ich jedoch gerne anstatt einer Nadel einen transparenten roten Kreis darstellen, der eine Fläche von z.B. 2 KM abdeckt.

Zwar kann ich einen transparenten Kreis in Form einer Grafik einbinden. Doch diese Grafik verändert natürlich nicht die Größe. In meinem Beispiel müßte der Kreis immer eine Fläche von 2 KM abdecken. Bei einem einzoomen, würde sich der Kreis vergrößern. Bei einem auszoomen dementsprechend verkleinern. Gibt es eine Möglichkeit, wie man das bewerkstelligen kann?

Danke im voraus für Eure Hilfe


<script type="text/javascript">
var map;
function showMap()
{
map = new OpenLayers.Map("map",
{
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
units: "m",
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
controls: [],
minZoom:12,
maxZoom:18
});
map.addControl (new OpenLayers.Control.LayerSwitcher());
map.addControl (new OpenLayers.Control.Attribution());
map.addControl (new OpenLayers.Control.Navigation());
map.addControl (new OpenLayers.Control.PanZoomBar({minZoom: 12}));
OpenLayers.Marker.defaultIcon = function () {
    return new OpenLayers.Icon ("symbole/nadel.png", {w:35, h:41}, {x: -10, y:-30});
};
var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik (updated weekly)");
var layerTah = new OpenLayers.Layer.OSM.Osmarender("Tiles@Home");
map.addLayers([layerMapnik]);
	map.addLayer (new OpenLayers.Layer.PopupMarker("Objekte", {
		createHtmlFromData: function (data) {
			return ;
		},
		createTooltipFromData: function (data) {
			return this.html(data.name)+'<br/>' + this.html(data.entfernung);
		},
		maxTooltipWidth: 220,
		createIconFromData: function (data) {
			return new OpenLayers.Icon (data.icon, {w: data.abmessung.split(',')[0], h: data.abmessung.split(',')[1]});
		},
		location: "./<?php echo $file;?>"
	} ));
map.setCenter(new OpenLayers.LonLat(<?php echo $long; ?>,<?php echo $lat; ?>).transform(new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")), 14);
map.addLayer(new OpenLayers.Layer.Markers("Standort"));
var marker = new OpenLayers.Marker(map.getCenter());
marker.events.register("mousedown", marker, function(evt)
{
OpenLayers.Event.stop(evt);
}
);
map.layers[map.layers.length-1].addMarker(marker);
}
showMap();
</script>

viw · 2012-03-08T16:43:50.000Z

Bestimmt gibt es da eine Möglichkeit. Allerdings wahrscheinlich nicht mehr als so schöne hübsche Funktion. Du müsstest bei jedem Zoom die Breite deiner Grafik anpassen. Das geht sicher über das Grafikobjekt. Also einen Eventmanger für die Zoomfunktion bauen und danach die Grafik an das Zoomlevel anpassen.
Ob das genau so geht und wie die ganzen Namen dann heißen müsste jemand mit etwas mehr javascript und OL Wissen sagen.

maxbe · 2012-03-08T17:07:41.000Z

Die Feuerwehrleute in Finnentrop haben sehr schöne transparente Kreise: http://www.feuerwehr-finnentrop.org/Landkarte/Landkarte.html

Alternative: Die Kreismalerei in die Vorverarbeitung stecken und statt einer csv-Datei mit vielen Mittelpunkten gleich eine gml oder kml-Datei mit vielen Kreisen ausliefern. Hätte ich aber gerade kein Beispiel dafür zur Hand, nur sone Idee.

Grüße, Max

joergi2012 · 2012-03-08T19:18:35.000Z

Hi Maxbe,

genau das suche ich. Werde versuchen, das über den Quellcode auch so ähnlich hinzubekommen. Scheint ja nicht schwer zu sein, oder?

Danke auch an viw. Aber ich glaube, das die “Maxbe” Lösung am einfachsten ist

fx99 · 2012-03-08T19:59:42.000Z

Achtung:
Die Marker in http://www.feuerwehr-finnentrop.org/Landkarte/Landkarte.html funktionieren nur,
wenn openlayers Version 2.10 verwendet wird: