[OpenLayers-Users] Modify Feature Control does not select features
Sebastian Schmitz
schmitz at geographie.uni-bonn.de
Mon Sep 29 05:06:07 EDT 2008
Hi list,
I use OpenLayers 2.6 and have trouble with the ModifyFeature Control.
If I select a point for modifying, it does not get selected in the nice
blue select style, but stays in the layers style.
Debugging told me the modified feature is in fact displayed selected at
some point (ModifyFeature.selectFeature(object): before
this.resetVertices();) but then overridden by the layers default style
(in the Vector drawFeature method as the feature lacks a style). The
feature does neither have a style nor a renderIntent attached to it.
Using the SelectFaeture Control on it's own without the ModifyFeature on
the map, however, features do get selected nicely.
What is worse: The modified feature disappears, when I select another
feature.
Glad for any hint.
Cheers
Sebastian
This is my code (the selectControl is used for :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SelectFeature Control on Layer.Vector</title>
<link rel="stylesheet" href="../theme/default/style.css"
type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
#controlToggle li {
list-style: none;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript"><!--
var map, drawControls, vectors;
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
function init(){
map = new OpenLayers.Map('map', {controls: []});
var wmsLayer = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'}
);
vectors = new OpenLayers.Layer.WFS(
"Cities",
"http://localhost:8080/geoserver/wfs",
{typename: 'topp:tasmania_cities'},
{
typename: "tasmania_cities",
featureNS: "http://www.openplans.org/topp",
featurePrefix: "topp",
extractAttributes: false,
commitReport: function(str) {
OpenLayers.Console.log(str);
}
}
);
//new OpenLayers.Layer.Vector("Vector Layer");
map.addLayers([wmsLayer, vectors]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
drawControls = {
point: new OpenLayers.Control.DrawFeature(
vectors, OpenLayers.Handler.Point,
{
featureAdded : function(feature) {
feature.layer.eraseFeatures([feature]);
// cast to multipoint
feature.geometry = new
OpenLayers.Geometry.MultiPoint(feature.geometry);
feature.state = OpenLayers.State.INSERT;
feature.layer.drawFeature(feature);
}
}
),
line: new OpenLayers.Control.DrawFeature(
vectors, OpenLayers.Handler.Path
),
polygon: new OpenLayers.Control.DrawFeature(
vectors, OpenLayers.Handler.Polygon
),
/*select: new OpenLayers.Control.SelectFeature(
vectors,
{
clickout: false, toggle: false,
multiple: false, hover: false,
toggleKey: "ctrlKey", // ctrl key removes from
selection
multipleKey: "shiftKey", // shift key adds to
selection
onSelect: function(feature){
feature.state = OpenLayers.State.DELETE
},
onUnselect: function(feature){
feature.state = null
}
}
),*/
selecthover: new OpenLayers.Control.SelectFeature(
vectors,
{
multiple: false, hover: true,
toggleKey: "ctrlKey", // ctrl key removes from
selection
multipleKey: "shiftKey" // shift key adds to
selection
}
),
save: new OpenLayers.Control.Button(
{
trigger: OpenLayers.Function.bind(vectors.commit,
vectors),
displayClass: "olControlSaveFeature"
}
)
,
modify: new OpenLayers.Control.ModifyFeature(
vectors
,
{
displayClass: "olControlModifyFeature",
onModificationStart: function(feature) {
OpenLayers.Console.log("start modifying MODIFY",
feature.id);
},
onModification: function(feature) {
OpenLayers.Console.log("modified MODIFY", feature.id);
feature.state = OpenLayers.State.UPDATE;
},
onModificationEnd: function(feature) {
OpenLayers.Console.log("end modifying MODIFY",
feature.id);
feature.state = OpenLayers.State.UPDATE;
}
}
)
};
for(var key in drawControls) {
map.addControl(drawControls[key]);
}
var panel = new OpenLayers.Control.Panel(
{displayClass: 'olControlEditingToolbar'}
);
panel.addControls(
[
drawControls['save'],drawControls['modify']
]
);
map.addControl(panel);
map.addControl(new OpenLayers.Control.MouseDefaults());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.PanZoom());
map.zoomToExtent(new OpenLayers.Bounds(140.64,-44.42,151.89,-38.80));
}
function toggleControl(element) {
for(key in drawControls) {
var control = drawControls[key];
if(element.value == key && element.checked) {
control.activate();
} else {
control.deactivate();
}
}
}
function update() {
var clickout = document.getElementById("clickout").checked;
drawControls.select.clickout = clickout;
var hover = document.getElementById("hover").checked;
drawControls.select.hover = hover;
drawControls.select.box =
document.getElementById("box").checked;
if(drawControls.select.active) {
drawControls.select.deactivate();
drawControls.select.activate();
}
}
--></script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers Select Feature Example</h1>
<p id="shortdesc">
Select a feature on hover or click with the Control.SelectFeature
on a
vector layer.
</p>
<div id="map" class="smallmap"></div>
<ul id="controlToggle">
<li>
<input type="radio" name="type" value="none" id="noneToggle"
onclick="toggleControl(this);" checked="checked" />
<label for="noneToggle">navigate</label>
</li>
<li>
<input type="radio" name="type" value="point" id="pointToggle"
onclick="toggleControl(this);" />
<label for="pointToggle">draw point</label>
</li>
<li>
<input type="radio" name="type" value="line" id="lineToggle"
onclick="toggleControl(this);" />
<label for="lineToggle">draw line</label>
</li>
<li>
<input type="radio" name="type" value="polygon"
id="polygonToggle"
onclick="toggleControl(this);" />
<label for="polygonToggle">draw polygon</label>
</li>
<li>
<input type="radio" name="type" value="selecthover" id="hover"
onclick="toggleControl(this);" />
<label for="selecthoverToggle">Select features on hover</label>
</li>
<li>
<input type="radio" name="type" value="select"
id="selectToggle"
onclick="toggleControl(this);" />
<label for="selectToggle">select feature</label>
<ul>
<li>
<input id="box" type="checkbox" checked="checked"
name="box" onchange="update()" />
<label for="box">select features in a box</label>
</li>
<li>
<input id="clickout" type="checkbox"
name="clickout" onchange="update()" />
<label for="clickout">click out to unselect
features</label>
</li>
</ul>
</li>
</ul>
<p>Use the shift key to select multiple features. Use the ctrl key to
toggle selection on features one at a time. Note: the "clickout"
option has no
effect when "hover" is selected.</p>
</body>
</html>
More information about the Users
mailing list