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 | <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; 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> |