diff options
Diffstat (limited to 'misc/openlayers/examples/SLDSelect.html')
| -rw-r--r-- | misc/openlayers/examples/SLDSelect.html | 202 |
1 files changed, 202 insertions, 0 deletions
diff --git a/misc/openlayers/examples/SLDSelect.html b/misc/openlayers/examples/SLDSelect.html new file mode 100644 index 0000000..ff07e31 --- /dev/null +++ b/misc/openlayers/examples/SLDSelect.html @@ -0,0 +1,202 @@ +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> + <meta name="apple-mobile-web-app-capable" content="yes"> + <title>OpenLayers SLD based selection control</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"> + .olControlSLDSelectBoxActive { + cursor: crosshair; + } + .olControlSLDSelectPolygonActive { + cursor: crosshair; + } + .olControlSLDSelectLineActive { + cursor: crosshair; + } + .olControlSLDSelectPointActive { + cursor: pointer; + } + </style> + <script src="../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var map, controls, layers; + + function init(){ + OpenLayers.ProxyHost= "proxy.cgi?url="; + map = new OpenLayers.Map('map', {allOverlays: true, controls: []}); + var url = "http://demo.opengeo.org/geoserver/wms"; + layers = { + states: new OpenLayers.Layer.WMS("State boundary", url, + {layers: 'topp:tasmania_state_boundaries', format: 'image/gif', transparent: 'TRUE'}, + {singleTile: true}), + roads: new OpenLayers.Layer.WMS("Roads", url, + {layers: 'topp:tasmania_roads', format: 'image/gif', transparent: 'TRUE'}, + {singleTile: true}), + waterbodies: new OpenLayers.Layer.WMS("Water bodies", url, + {layers: 'topp:tasmania_water_bodies', format: 'image/gif', transparent: 'TRUE'}, + {singleTile: true}), + cities: new OpenLayers.Layer.WMS("Cities", url, + {layers: 'topp:tasmania_cities', format: 'image/gif', transparent: 'TRUE'}, + {singleTile: true}) + }; + + for (var key in layers) { + map.addLayer(layers[key]); + } + + map.setCenter(new OpenLayers.LonLat(146.65748632815,-42.230763671875), 7); + + map.addControl(new OpenLayers.Control.LayerSwitcher()); + + controls = { + navigation: new OpenLayers.Control.Navigation(), + box: new OpenLayers.Control.SLDSelect( + OpenLayers.Handler.RegularPolygon, + { + displayClass: 'olControlSLDSelectBox', + layers: [layers['waterbodies']], + handlerOptions: {irregular: true} + } + ), + polygon: new OpenLayers.Control.SLDSelect( + OpenLayers.Handler.Polygon, + { + displayClass: 'olControlSLDSelectPolygon', + layers: [layers['waterbodies']] + } + ), + line: new OpenLayers.Control.SLDSelect( + OpenLayers.Handler.Path, + { + displayClass: 'olControlSLDSelectLine', + layers: [layers['waterbodies']] + } + ), + point: new OpenLayers.Control.SLDSelect( + OpenLayers.Handler.Click, + { + displayClass: 'olControlSLDSelectPoint', + layers: [layers['waterbodies']] + } + ), + circle: new OpenLayers.Control.SLDSelect( + OpenLayers.Handler.RegularPolygon, + { + displayClass: 'olControlSLDSelectBox', + layers: [layers['waterbodies']], + handlerOptions: {sides: 30} + } + ) + }; + + for(var key in controls) { + map.addControl(controls[key]); + } + } + + function toggleControl(element) { + for(var key in controls) { + var control = controls[key]; + if(element.value == key && element.checked) { + control.activate(); + } else { + control.deactivate(); + } + } + } + + function toggleSelectionLayer(element) { + var selectLayers = []; + var elements = element.value.split("_"); + for (var key in layers) { + var layer = layers[key]; + for (var i=0, len=elements.length; i<len; i++) { + var value = elements[i]; + if (value == key && element.checked) { + selectLayers.push(layer); + } + } + } + for (var i=0, len=this.map.controls.length; i<len; i++) { + var control = this.map.controls[i]; + if (control instanceof OpenLayers.Control.SLDSelect) { + control.setLayers(selectLayers); + } + } + } + + </script> + </head> + <body onload="init()"> + <h1 id="title">SLD based selection on WMS layers</h1> + + <div id="tags"> + sld, sldselect, styling, style + </div> + + <div id="shortdesc">Using Styled Layer Descriptors to make a selection on WMS layers</div> + + <div id="map" style="width: 512px; height: 256px; border: 1px solid red;"></div> + + <div id="docs"> + This example uses the OpenLayers.Control.SLDSelect to select features in a WMS + layer. The features are highlighted using Styled Layer Descriptors (SLD). The + control supports point, box, line and polygon selection modes by configuring the + appriopriate handler. + </div> + + <div id="controls"> + <ul id="controlToggle"><b>Map Controls</b> + <li> + <input type="radio" name="control" value="navigation" id="noneToggle" onclick="toggleControl(this);" CHECKED> + <label for="noneToggle">navigate</label> + </li> + <li> + <input type="radio" name="control" value="box" id="boxToggle" onclick="toggleControl(this);"> + <label for="boxToggle">SLD select with box</label> + </li> + <li> + <input type="radio" name="control" value="polygon" id="polygonToggle" onclick="toggleControl(this);"> + <label for="polygonToggle">SLD select with polygon</label> + </li> + <li> + <input type="radio" name="control" value="line" id="lineToggle" onclick="toggleControl(this);"> + <label for="lineToggle">SLD select with line</label> + </li> + <li> + <input type="radio" name="control" value="point" id="pointToggle" onclick="toggleControl(this);"> + <label for="pointToggle">SLD select with point</label> + </li> + <li> + <input type="radio" name="control" value="circle" id="circleToggle" onclick="toggleControl(this);"> + <label for="circleToggle">SLD select with circle</label> + </li> + </ul> + </div> + <div id="layers"> + <ul id="layerToggle"><b>Selection layer</b> + <li> + <input type="radio" name="layer" value="waterbodies" id="waterbodiesToggle" onclick="toggleSelectionLayer(this);" CHECKED> + <label for="noneToggle">Water bodies</label> + </li> + <li> + <input type="radio" name="layer" value="cities" id="citiesToggle" onclick="toggleSelectionLayer(this);"> + <label for="citiesToggle">Cities</label> + </li> + <li> + <input type="radio" name="layer" value="roads" id="roadsToggle" onclick="toggleSelectionLayer(this);"> + <label for="roadsToggle">Roads</label> + </li> + <li> + <input type="radio" name="layer" value="roads_cities" id="roadsCitiesToggle" onclick="toggleSelectionLayer(this);"> + <label for="roadsCitiesToggle">Roads and cities</label> + </li> + </ul> + </div> + + </body> +</html> |