[Talk-de] SelectFeature funktioniert nach DragFeature nicht mehr

Do Jan 12 09:49:39 UTC 2012

Hallo an alle,

ich bin neu in der Thematik OpenStreetMap und hoffe das mir vielleicht der
Ein oder Andere von Euch einen Tip zu meinem Problem geben kann. Leider habe
ich weder hier noch in anderen Mail-Lists etwas Passendes zu meinem Problem
gefunden, somit schieldere ich es Euch mal. Ich habe eine Karte erzeugt auf
der ein Marker gesetzt ist. Diesen marker soll man mittels der Drag-Funktion
auf der Karte verschieben könne, was auch ohne Probleme geht. Zusätzlich
soll es möglich sein, durch Anklicken des Markers mit der linken Maustaste
ein Popup zu öffnen. Hierzu sollte das "OpenLayers.Control.Navigation" in
der Kontrolleiste aktive sein.

Das Problem ist, dass nach dem ersten Aufruf das Popup funktioniert. Sprich
man kann es öffnen und schließen. Wurde aber die Drag-Funktion aktiviert und
der Marker verschoben, kann nach der Beendigung des Verschiebevorgangs kein
Popup mehr geöffnet werden. Klickt man auf den Marker öffnet sich kein Popup
lediglich der Cursor verändert sich. 
Wisst Ihr vielleicht woiran das liegen könnte? Ich vermute, dass beim
Wechsel von OpenLayers.Control.DragFeature nach
OpenLayers.Control.Navigation nicht alles zurückgesetzt wird?

Danke Euch schon mal für Eure Tips.
Tilo 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>OpenLayers Demo</title>
<link rel="stylesheet" href="../css/style.css" type="text/css"></link>
<style type="text/css">
html,body,#basicMap {
	width: 100%;
	height: 100%;
	margin: 0;
}
</style>
<script
src="../../OpenLayers-2.11/OpenLayers-2.11/lib/OpenLayers.js"></script>
<script>
var selectControl;
var selectedFeature;
var map;
	function init()
	{
		var options =
		{
			controls : [new OpenLayers.Control.LayerSwitcher()]
		};

		map = new OpenLayers.Map("basicMap", options);
		var mapnik = new OpenLayers.Layer.OSM();
		map.addLayer(mapnik);
		map.setCenter(new OpenLayers.LonLat(9.425148333,
49.216763889) // Center of the map
		.transform(new OpenLayers.Projection("EPSG:4326"), //
transform from WGS 1984
		new OpenLayers.Projection("EPSG:900913") // to Spherical
Mercator Projection
		), 15 // Zoom level
		);

		//Layer für die POIs anlegen  
		drag_Layer = addMapPoints();
		//Controls anlegen
		nav = new OpenLayers.Control.Navigation(
		{
			handleRightClicks : false,
			zoomWheelEnabled : false,
			mouseWheelOptions : false,
			//autoActivate: true,
			title : 'Sie können mit der Maus die Karte
verschieben.'
		});
		// Verschiebefunktion für die Marker in der Karte erzeugen
		drag = new OpenLayers.Control.DragFeature(drag_Layer,
		{
			title : 'Marker verschieben'
		});
		// Panel für die einzelenen Schaltflächen erzeugen
		var panel = new OpenLayers.Control.Panel(
		{
			defaultControl : nav
		});
		// Schaltflächen dem Panel hinzufügen
		panel.addControls([ nav, drag ]);
		// Panel auf der Karte darstellen
		map.addControl(panel);

		// SelectFeature initalisieren, für die POPUP-Steuerung 
		drag_Layer.events.on({
	        "featureselected": onFeatureSelect,
	        "featureunselected": onFeatureUnselect
	    });
		selectControl = new OpenLayers.Control.SelectFeature(
	            [drag_Layer],
	            {
	                clickout: true, 
	                toggle: false,
	                multiple: false, 
	                hover: false
	            }
	        );
		map.addControl(selectControl);
	    selectControl.activate();
	}

	//erzeugt einen Layer mit Punkten
	function addMapPoints()
	{
		// renderer erzeugen
		var renderer = getLeyerRenderer();
		// Layer für die Darstellung der POIs erzeugen
		var dragLayerMapPoints = new
OpenLayers.Layer.Vector("MapPoints",
		{
			renderers : renderer
		});

dragLayerMapPoints.removeFeatures(dragLayerMapPoints.features);
		// Layer in der Karte einhängen
		map.addLayer(dragLayerMapPoints);
		// Array für die Kartenpunkte definieren
		var features = [];

		// Darstellung der POIs initalisieren
		var style_Marker =
		{
			externalGraphic : '../image/Location.gif',
			graphicWith : 30,
			graphicHeight : 30,
			graphicYOffset : Math.floor(30 / 2) * -1,
			graphicXOffset : Math.floor(30 / 2) * -1
		};
		var point = new OpenLayers.Geometry.Point(Lon2Merc(9.42),
				Lat2Merc(49.21));
		features.push(new OpenLayers.Feature.Vector(point, null,
style_Marker));
		// POIs einhängen
		dragLayerMapPoints.addFeatures(features);
		return dragLayerMapPoints;
	}

	//Methode liefert einen Renderer zurück, der beim Erzeugen der
Marker verwendet
	//wird
	function getLeyerRenderer()
	{
		var renderer =
OpenLayers.Util.getParameters(window.location.href).renderer;
		renderer = (renderer) ? [ renderer ]
				:
OpenLayers.Layer.Vector.prototype.renderers;
		return renderer;
	}
	//Längengrad umrechnen auf GPS Koordinaten
	function Lon2Merc(lon)
	{
		return 20037508.34 * lon / 180;
	}

	// Breitengrad umrechnen auf GPS Koordinaten
	function Lat2Merc(lat)
	{
		var PI = 3.14159265358979323846;
		lat = Math.log(Math.tan((90 + lat) * PI / 360)) / (PI /
180);
		return 20037508.34 * lat / 180;
	}

	//Event der ausgelöst wird wenn das Popup gelöscht wird
	function onPopupClose(evt)
	{
		if(selectControl != null)
		{
			selectControl.unselect(selectedFeature);
		}
	}

	function onFeatureSelect(e)//in der alten Version war das
	{
		var feature = e.feature;
		var popuptext = "<font color=\"black\"><b>Test</b></font>";
		selectedFeature = feature;
		feature.popup = new OpenLayers.Popup.FramedCloud("Cloud",
feature.geometry
				.getBounds().getCenterLonLat(), null,
popuptext, null, true,
				onPopupClose);
		feature.popup.autoSize = false;
		feature.popup.setSize(new OpenLayers.Size(210, 280));
		//feature.popup = popup;
		map.addPopup(feature.popup);
	}

	// Wenn das Popup nicht mehr ausgewählt ist
	function onFeatureUnselect(e)
	{
		var feature = e.feature;
		map.removePopup(feature.popup);
		feature.popup.destroy();
		feature.popup = null;
	}
</script>
</head>
<body onload="init();">
	<div id="basicMap"></div>
</body>
</html>