select-feature.html
5.58 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<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;
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
function init(){
map = new OpenLayers.Map('map');
var wmsLayer = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'}
);
var vectors = 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
),
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
box: true
}
),
selecthover: new OpenLayers.Control.SelectFeature(
vectors,
{
multiple: false, hover: true,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey" // shift key adds to selection
}
)
};
for(var key in drawControls) {
map.addControl(drawControls[key]);
}
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
}
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="selecthoverToggle"
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>