e8960054a9
git-svn-id: http://svn.openlayers.org/trunk/openlayers@12082 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
203 lines
8.1 KiB
HTML
203 lines
8.1 KiB
HTML
<!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: 512; height: 256; 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>
|