[Talk-de] SelectFeature funktioniert nach DragFeature nicht mehr
Tilo Behrmann
Behrmann at fastgmbh.de
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>
Mehr Informationen über die Mailingliste Talk-de