Example demonstrating the use of a filter with the WFS protocol.

git-svn-id: http://svn.openlayers.org/trunk/openlayers@10600 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
2010-08-05 21:20:56 +00:00
parent 33410b0e76
commit a52cb98622
2 changed files with 77 additions and 0 deletions

29
examples/wfs-filter.html Normal file
View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>OpenLayers WFS Protocol with Filter</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="../theme/default/google.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../lib/OpenLayers.js"></script>
<script src="wfs-filter.js"></script>
</head>
<body onload="init()">
<h1 id="title">WFS Protocol and Filter</h1>
<p id="shortdesc">
Demonstrates the use of a filter in making GetFeature requests using the WFS protocol.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>
If a vector layer has a filter and the protocol supports server-side filtering,
the filter will be serialized in requests for features. The WFS protocol can be
used with a vector layer to serialize a filter using OGC Filter Encoding. This
example requests all features that are <code>TYPE</code> "highway" or "road".
</p><p>
See the <a href="wfs-filter.js" target="_blank">wfs-filter source</a>
for details on how this is done.
</p>
</div>
</body>
</html>

48
examples/wfs-filter.js Normal file
View File

@@ -0,0 +1,48 @@
var map;
// use proxy if requesting features cross-domain
OpenLayers.ProxyHost= "/proxy/?url=";
function init() {
map = new OpenLayers.Map({
div: "map",
layers: [
new OpenLayers.Layer.WMS(
"Natural Earth",
"http://demo.opengeo.org/geoserver/wms",
{layers: "topp:naturalearth"}
),
new OpenLayers.Layer.Vector("WFS", {
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.WFS({
url: "http://demo.opengeo.org/geoserver/wfs",
featureType: "tasmania_roads",
featureNS: "http://www.openplans.org/topp"
}),
styleMap: new OpenLayers.StyleMap({
strokeWidth: 3,
strokeColor: "#333333"
}),
filter: new OpenLayers.Filter.Logical({
type: OpenLayers.Filter.Logical.OR,
filters: [
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "TYPE",
value: "highway"
}),
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "TYPE",
value: "road"
})
]
})
})
],
center: new OpenLayers.LonLat(146.7, -41.8),
zoom: 6
});
}