Created
October 23, 2011 12:41
-
-
Save amercader/1307324 to your computer and use it in GitHub Desktop.
Modify FILTER parameter in OpenLayers WMS layer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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>WMS Filter Example</title> | |
| <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css"> | |
| <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css"> | |
| <script src="http://openlayers.org/dev/OpenLayers.js"></script> | |
| <script type="text/javascript"> | |
| var map; | |
| function getFilterParam(species_id){ | |
| var ol_filter = new OpenLayers.Filter.Logical({ | |
| type: OpenLayers.Filter.Logical.AND, | |
| filters: [ | |
| new OpenLayers.Filter.Comparison({ | |
| type: OpenLayers.Filter.Comparison.EQUAL_TO, | |
| property: "type", | |
| value: "1" | |
| }), | |
| new OpenLayers.Filter.Comparison({ | |
| type: OpenLayers.Filter.Comparison.EQUAL_TO, | |
| property: "concept", | |
| value: species_id | |
| })] | |
| }); | |
| var filter_1_0 = new OpenLayers.Format.Filter({version: "1.0.0"}); | |
| var xml = new OpenLayers.Format.XML(); | |
| var filter_param = xml.write(filter_1_0.write(ol_filter)) | |
| /* | |
| filter_param is now something like: | |
| <Filter><And> | |
| <PropertyIsEqualTo><PropertyName>type</PropertyName><Literal>1</Literal></PropertyIsEqualTo> | |
| <PropertyIsEqualTo><PropertyName>concept</PropertyName><Literal>13816613</Literal></PropertyIsEqualTo> | |
| </And></Filter> | |
| */ | |
| return filter_param; | |
| } | |
| function refreshWMSLayer(species_id){ | |
| var species_layer = map.getLayersByName("Species")[0]; | |
| var new_filter = getFilterParam(species_id); | |
| species_layer.params['FILTER'] = new_filter; | |
| species_layer.redraw(); | |
| } | |
| function init(){ | |
| map = new OpenLayers.Map( 'map' ); | |
| var base_layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", | |
| "http://vmap0.tiles.osgeo.org/wms/vmap0", | |
| {"layers": "basic"} ); | |
| map.addLayer(base_layer); | |
| var filter_param = getFilterParam(13816613); | |
| var species_layer = new OpenLayers.Layer.WMS( "Species", | |
| "http://geoserver.gbif.org/wms", | |
| {"layers": "gbif:gbifDensityLayer", | |
| "transparent":"true", | |
| "filter":filter_param | |
| }, | |
| {"isBaseLayer":false} ); | |
| map.addLayer(species_layer); | |
| map.zoomToMaxExtent(); | |
| } | |
| </script> | |
| </head> | |
| <body onload="init()"> | |
| <h1 id="title">WMS Filter</h1> | |
| <div id="map" class="smallmap"></div> | |
| <input type="text" id="species_id" /> | |
| <!-- onclick is very ugly, don't use it--> | |
| <input type="submit" value="Actualitzar" onclick="refreshWMSLayer(document.getElementById('species_id').value)"/> | |
| <p>e.g. 13839799, 13803619</p> | |
| <div id="docs"> | |
| <p>Quick and dirty example on how to modifiy FILTER params in WMS layers</p> | |
| <p>Species distribution data provided by the <a href="http://www.gbif.org">Global Biodiversity Information Facility (GBIF)</a></p> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
plz show the Preview on wms layer multiple work