Ticket #3601 (new bug)
SelectFeature with LineString does not work
| Reported by: | stafy | Owned by: | tschaub |
|---|---|---|---|
| Priority: | blocker | Milestone: | 2.13 Release |
| Component: | Control.SelectFeature | Version: | 2.11 |
| Keywords: | Cc: | ||
| State: |
Description
Following problem: My base layer is a OpenLayers.Layer.OSM.Osmarender layer. I draw a line with OpenLayers.Geometry.LineString in a second vector layer. With the Openlayer SelectFeature I want to select this line. But this is only possible at the startpoint and the endpoint.
Here is my html code. Click on the blue thick line selects the line only at startpoint and endpoint.
<html> <head> <title>OpenLayers Example</title> <script src=" http://www.openlayers.org/api/OpenLayers.js"></script> <script type="text/javascript"src=" http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script> </head>
<body> <div style="width:100%; height:100%" id="map"></div> <script defer="defer" type="text/javascript">
//create map var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: 'EPSG:4326', units: "m", maxResolution: 156543.0339, maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
20037508.34, 20037508.34),
controls: [new OpenLayers.Control.PanZoom(),
new OpenLayers.Control.Navigation(), new OpenLayers.Control.MousePosition({"numDigits": 8,
displayProjection: new OpenLayers.Projection("EPSG:4326"),emptyString:"outside the map"}),
]
};
map = new OpenLayers.Map('map', options);
// create OSM layer osm_osma = new OpenLayers.Layer.OSM.Osmarender('OpenStreetMap Osmarender',
{minZoomLevel: 0,
maxZoomLevel: 100, isBaseLayer: true
}
); map.addLayers([osm_osma]); var lonlat=transformLonLat("8.3191929972096", "49.015806343698", false); map.setCenter(lonlat, 17);
//create vector-layer // Layerstyle var vlayer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.styledefault?); vlayer_style.fillOpacity = 0.6; vlayer_style.fillColor = "green"; vlayer_style.strokeWidth = 6; vlayer_style.strokeColor = "blue"; vlayer_style.strokeOpacity = 1;
var select_style = OpenLayers.Util.extend({}, vlayer_style); select_style.fillOpacity = 0.6; select_style.strokeWidth = 10; select_style.strokeColor = "black"; select_style.fillColor = "black"; vlayer_style.strokeOpacity = 1;
var vStyleMap = new OpenLayers.StyleMap( {
"default" :vlayer_style, "select" :select_style
}); var vlayer = new OpenLayers.Layer.Vector("vlayer", {styleMap: vStyleMap}); map.addLayer(vlayer);
//create SelectFeatures var selectControl=new OpenLayers.Control.SelectFeature(vlayer,{displayClass: "selectButton", title: 'Select Ways', onSelect:selected, onUnselect:unselected,toggle:false,clickout:true,multiple:false, hover:false,toggleKey:"ctrlKey", multipleKey:"shiftKey",geometryTypes: OpenLayers.Geometry.LineString?, callbacks: {
'over': feature_hover, 'out': feature_hover_out
}
});
map.addControl(selectControl); selectControl.activate();
//Draw Linestring var waypoint_lon="8.3096336042805"; var waypoint_lat="49.016608500028"; var lonlat=transformLonLat(waypoint_lon, waypoint_lat, false); var point=new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat); var arrPoint =[]; arrPoint.push(point);
waypoint_lon="8.3274863874837"; waypoint_lat="49.016249642214"; lonlat=transformLonLat(waypoint_lon, waypoint_lat, false); point=new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat); arrPoint.push(point);
var line = new OpenLayers.Geometry.LineString(arrPoint); var lineF = new OpenLayers.Feature.Vector(line,null);
vlayer.addFeatures([lineF]);
//Functions function transformLonLat(lon, lat, anzeige) { var lonlat1 = null; if (anzeige==true)
lonlat1=new OpenLayers.LonLat(lon, lat).transform(
new OpenLayers.Projection("EPSG:900913"), // Spherical Mercator Projection new OpenLayers.Projection("EPSG:4326") // WGS 1984, );
else
lonlat1=new OpenLayers.LonLat(lon, lat).transform(
new OpenLayers.Projection("EPSG:4326"), // WGS 1984, new OpenLayers.Projection("EPSG:900913") // Spherical Mercator Projection );
return lonlat1; }
function feature_hover( feature ){
feature.layer.div.style.cursor = "crosshair";
}
function feature_hover_out( feature ){
feature.layer.div.style.cursor = "";
}
function selected (obj) {
alert("select");
}
function unselected (obj) {
alert("deselect");
} </script> </body> </html>
