root/sandbox/camptocamp/mobile/trunk/lib/IOL/externals/openlayers/examples/select-feature.html

Revision 9960, 5.7 KB (checked in by bbinet, 2 years ago)

svn export  http://svn.opengeo.org/mobile/IOL/trunk : Exported revision 61.
Line 
1<html xmlns="http://www.w3.org/1999/xhtml">
2  <head>
3    <title>SelectFeature Control on Layer.Vector</title> 
4    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
5    <link rel="stylesheet" href="style.css" type="text/css" />
6    <style type="text/css">
7        #controlToggle li {
8            list-style: none;
9        }
10    </style>
11    <script src="../lib/OpenLayers.js"></script>
12    <script type="text/javascript">
13        var map, drawControls;
14        OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
15        function init(){
16            map = new OpenLayers.Map('map');
17            var wmsLayer = new OpenLayers.Layer.WMS(
18                "OpenLayers WMS", 
19                "http://labs.metacarta.com/wms/vmap0",
20                {layers: 'basic'}
21            ); 
22
23            var vectors = new OpenLayers.Layer.Vector("Vector Layer");
24            map.addLayers([wmsLayer, vectors]);
25            map.addControl(new OpenLayers.Control.LayerSwitcher());
26           
27            drawControls = {
28                point: new OpenLayers.Control.DrawFeature(
29                    vectors, OpenLayers.Handler.Point
30                ),
31                line: new OpenLayers.Control.DrawFeature(
32                    vectors, OpenLayers.Handler.Path
33                ),
34                polygon: new OpenLayers.Control.DrawFeature(
35                    vectors, OpenLayers.Handler.Polygon
36                ),
37                select: new OpenLayers.Control.SelectFeature(
38                    vectors,
39                    {
40                        clickout: false, toggle: false,
41                        multiple: false, hover: false,
42                        toggleKey: "ctrlKey", // ctrl key removes from selection
43                        multipleKey: "shiftKey", // shift key adds to selection
44                        box: true
45                    }
46                ),
47                selecthover: new OpenLayers.Control.SelectFeature(
48                    vectors,
49                    {
50                        multiple: false, hover: true,
51                        toggleKey: "ctrlKey", // ctrl key removes from selection
52                        multipleKey: "shiftKey" // shift key adds to selection
53                    }
54                )
55            };
56           
57            for(var key in drawControls) {
58                map.addControl(drawControls[key]);
59            }
60            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
61
62        }
63
64        function toggleControl(element) {
65            for(key in drawControls) {
66                var control = drawControls[key];
67                if(element.value == key && element.checked) {
68                    control.activate();
69                } else {
70                    control.deactivate();
71                }
72            }
73        }
74
75        function update() {
76            var clickout = document.getElementById("clickout").checked;
77            if(clickout != drawControls.select.clickout) {
78                drawControls.select.clickout = clickout;
79            }
80
81            var box = document.getElementById("box").checked;
82            if(box != drawControls.select.box) {
83                drawControls.select.box = box;
84                if(drawControls.select.active) {
85                    drawControls.select.deactivate();
86                    drawControls.select.activate();
87                }
88            }
89        }
90    </script>
91  </head>
92  <body onload="init()">
93    <h1 id="title">OpenLayers Select Feature Example</h1>
94    <p id="shortdesc">
95      Select a feature on hover or click with the Control.SelectFeature on a
96      vector layer.
97    </p> 
98    <div id="map" class="smallmap"></div>
99    <ul id="controlToggle">
100        <li>
101            <input type="radio" name="type" value="none" id="noneToggle"
102                   onclick="toggleControl(this);" checked="checked" />
103            <label for="noneToggle">navigate</label>
104        </li>
105        <li>
106            <input type="radio" name="type" value="point" id="pointToggle"
107                   onclick="toggleControl(this);" />
108            <label for="pointToggle">draw point</label>
109        </li>
110        <li>
111            <input type="radio" name="type" value="line" id="lineToggle"
112                   onclick="toggleControl(this);" />
113            <label for="lineToggle">draw line</label>
114        </li>
115        <li>
116            <input type="radio" name="type" value="polygon" id="polygonToggle"
117                   onclick="toggleControl(this);" />
118            <label for="polygonToggle">draw polygon</label>
119        </li>
120        <li>
121            <input type="radio" name="type" value="selecthover" id="selecthoverToggle"
122                   onclick="toggleControl(this);" />
123            <label for="selecthoverToggle">Select features on hover</label>
124        </li>
125        <li>
126            <input type="radio" name="type" value="select" id="selectToggle"
127                   onclick="toggleControl(this);" />
128            <label for="selectToggle">select feature</label>
129            <ul>
130                <li>
131                    <input id="box" type="checkbox" checked="checked"
132                           name="box" onchange="update()" />
133                    <label for="box">select features in a box</label>
134                </li>
135                <li>
136                    <input id="clickout" type="checkbox"
137                           name="clickout" onchange="update()" />
138                    <label for="clickout">click out to unselect features</label>
139                </li>
140            </ul>
141        </li>
142    </ul>
143    <p>Use the shift key to select multiple features.  Use the ctrl key to
144    toggle selection on features one at a time.  Note: the "clickout" option has no
145    effect when "hover" is selected.</p>
146  </body>
147</html>
Note: See TracBrowser for help on using the browser.