Script für transparente Kreismarkierung läuft nicht

joergi2012 · 2012-03-10T18:26:10.000Z

Hi,

da ich eine transparente Markierung für meine Karte einbauen möchte, habe ich mich mal auf der Seite von Netzwolf umgesehen. Unter http://www.netzwolf.info/kartografie/openlayers/mapimage.htm fand ich ein Beispiel, welches ich abgewandelt habe. Der Script


<html>

<title>Overlay aus Bild-Datei - angezeigt auf der karte von OpenStreetMap</title>

<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

<!----------------------------------------------------------------------
Die anonyme Onload-Function baut das Kartenobjekt aus Komponenten zusammen.
Zwischen den mit "***" markierten Bereich tragen Sie die Daten *Ihrer* Bild-Datei ein
----------------------------------------------------------------------->

<script type="text/javascript">

//*******************************************************************
var	configName	= "Raster";
var	configLeft	= 7/3;
var	configRight	= 8.5/2.2;
var	configBottom	= 48;
var	configTop	= 49;
var	configUrl	= "symbole/kreis2.png";
var	configWidth	= 200;
var	configHeight	= 200;
//*******************************************************************

var map;

if (!document.onLoadFunctions) {
	document.onLoadFunctions = new Array();
	window.onload = function () { for (var i=0; document.onLoadFunctions.length>i;i++) document.onLoadFunctions[i](); }
}

document.onLoadFunctions.push ( function () {

	//----------------------------------------------------------------------------
	//	Karte - der Name ("map") muss mit der id des <div> uebereinstimmen.
	//----------------------------------------------------------------------------

	map = new OpenLayers.Map ("map", {controls:[]});

	//----------------------------------------------------------------------------
	//	Default-Koordinatensystem fuer alle Controls
	//----------------------------------------------------------------------------

	map.displayProjection = new OpenLayers.Projection("EPSG:4326");

	//----------------------------------------------------------------------------
	//	Steuerelemente
	//----------------------------------------------------------------------------

	map.addControl (new OpenLayers.Control.LayerSwitcher());
	map.addControl (new OpenLayers.Control.MousePosition());
	map.addControl (new OpenLayers.Control.Navigation());
	map.addControl (new OpenLayers.Control.PanZoomBar());
	map.addControl (new OpenLayers.Control.Permalink());

	//----------------------------------------------------------------------------
	//	Kartenlayer
	//----------------------------------------------------------------------------

	map.addLayer (new OpenLayers.Layer.OSM.Mapnik("Mapnik"));
	map.addLayer (new OpenLayers.Layer.OSM.CycleMap("CycleMap"));

	//----------------------------------------------------------------------------
	//	Zusatzlayer
	//----------------------------------------------------------------------------

	var bounds = new OpenLayers.Bounds (configLeft, configBottom, configRight, configTop).
		transform(map.displayProjection, map.getProjectionObject());

	map.addLayer (new OpenLayers.Layer.Image (configName, configUrl, bounds,
			{w: configWidth, h: configHeight},
			{isBaseLayer: false, alwaysInRange: true, opacity: 0.15 }
			));

	//----------------------------------------------------------------------------
	//	Zentriere Karte
	//----------------------------------------------------------------------------

	map.zoomToExtent(bounds);
});

//-->
</script>

<style type="text/css">
#map {
	background: gray;
	height: 80%;
	width: 100%;
}

</style>
</head>

<body>

<h1>Overlay aus Bild-Datei</h1>

<div id="map"></div>

<p>
Erklaerung im Quelltext der Seite.
</p>

</body>
</html>

zeigt einen roten Kreis, der sich auch dem Zoom anpaßt. Jetzt wollte ich dasselbe in meinen Script einbauen. Jedoch wird der rote Kreis nicht dargestellt. Leider kenne ich mich auch nicht gut mit javascript aus. Wißt Ihr, wo das Problem liegt. Ich möchte später mal einen Kreis generieren, der einen Bereich von 3 KM abdeckt. Hier der Script. Vielen Dank im voraus


<script type="text/javascript">



var	configName	= "Raster";
var	configLeft	= 7/3;
var	configRight	= 8.5/2.2;
var	configBottom	= 48;
var	configTop	= 49;
var	configUrl	= "symbole/kreis2.png";
var	configWidth	= 200;
var	configHeight	= 200;





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}));
var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik (updated weekly)");
var layerTah = new OpenLayers.Layer.OSM.Osmarender("Tiles@Home");
	var bounds = new OpenLayers.Bounds (configLeft, configBottom, configRight, configTop).
		transform(map.displayProjection, map.getProjectionObject());
map.addLayers([layerMapnik]);
	map.addLayer (new OpenLayers.Layer.PopupMarker("Objekte", {
		createHtmlFromData: function (data) {
			return ;
		},
		createTooltipFromData: function (data) {
			return this.html(data.name);
		},
		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.addLayer (new OpenLayers.Layer.Image (configName, configUrl, bounds,
			{w: configWidth, h: configHeight},
			{isBaseLayer: false, alwaysInRange: true, opacity: 0.15 }
			));


map.zoomToExtent(bounds);


map.setCenter(new OpenLayers.LonLat(<?php echo $long; ?>,<?php echo $lat; ?>).transform(new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")), 14);
marker.events.register("mousedown", marker, function(evt)
{
OpenLayers.Event.stop(evt);
}
);
map.layers[map.layers.length-1];
}
showMap();
</script>

Netzwolf · 2012-03-10T18:53:56.000Z

Nahmd,

gleich zu Anfang: diese Nutzung ist ein übler Missbrauch des Layer.Image.

Wenn man einen Kreis zeichnen möchte, dann zeichnet man mit SGV einen Kreis oder zumindest mit Layer.Vector ein mehr oder weniger kreisiges Polygon. Eine Pixelgrafik aufzublasen dagegen ist absolut ungehörig.

joergi2012:


var	configName	= "Raster";
var	configLeft	= 7/3;
var	configRight	= 8.5/2.2;
var	configBottom	= 48;
var	configTop	= 49;
var	configUrl	= "symbole/kreis2.png";
var	configWidth	= 200;
var	configHeight	= 200;

Das hier verlangt vom Browser, die angegebene Grafik so aufzupusten, dass sie den Bereich in der Länge von 2.33° bis 3.8° und in der Breite von 48° bis 49° ausfüllt.

Zum Glück ist das nicht mehr in Deutschland.

Gruß Wolf

joergi2012 · 2012-03-10T19:39:43.000Z

Hmm,

gibt es evtl. eine einfache Möglichkeit für einen Anfänger, so einen transparenten Kreis einzubauen (z.B. einen fertigen Codeschnipsel)?

wambacher · 2012-03-10T20:02:13.000Z

joergi2012:

Hmm,

gibt es evtl. eine einfache Möglichkeit für einen Anfänger, so einen transparenten Kreis einzubauen (z.B. einen fertigen Codeschnipsel)?

Einfach ist nicht - für einen OL-Anfänger - aber es geht selbstverständlich.

Hier http://openlayers.org/dev/examples/symbolizers-fill-stroke-graphic.html schau dir mal an, wie die das Polygon hingekriegt haben. Und ein Kreis ist ein Polygon mit vielen Punkten - mehr nicht.

Gruss
Walter

SunCobalt · 2012-03-10T20:05:53.000Z

ich habs nicht probiert, aber kann man nichgt mit JOSM ein Kreis malen und dann umwandeln? Bspw mit http://wiki.openstreetmap.org/wiki/Osm2kml KML lässt sich doch einbinden

Netzwolf · 2012-03-10T20:34:18.000Z

Nahmd,

joergi2012:

gibt es evtl. eine einfache Möglichkeit für einen Anfänger, so einen transparenten Kreis einzubauen (z.B. einen fertigen Codeschnipsel)?

Möglicherweise schon.

Gruß Wolf

joergi2012 · 2012-03-10T22:17:52.000Z

Hi Wolf,

super… einfach und gut einzubauen. Vielen Dank