ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adding a parser for reading and writing CQL. This can be used to create filters to be used in rules when styling or it can be used to serialize filters when making requests to services that supprot CQL. p=dwinslow, r=me (closes #2522)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@11065 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
2011-01-28 23:15:10 +00:00
parent b434c02e1d
commit 6b0b3375e3
6 changed files with 839 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
examples/cql-format.html Normal file
View File

@@ -0,0 +1,51 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>
OpenLayers CQL Example
</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style>
#cql {
width: 400px;
}
#output {
padding-top: 1em;
width: 512px;
height: 60px;
border: none;
color: #ff3333;
}
</style>
<script src="../lib/OpenLayers.js"></script>
</head>
<body>
<h1 id="title">CQL Filter Example</h1>
<div id="tags">
CQL, filter
</div>
<p id="shortdesc">
Demonstrate use the CQL filter.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>
Enter text for a CQL filter to update the features displayed.
<br>
<form name="cql_form" id="cql_form">
<label for="cql">CQL</label>
<input id="cql" type="text" value="STATE_ABBR >= 'B' AND STATE_ABBR <= 'O'">
<input type="submit" value="update">
<input type="reset" value="reset">
</form>
<textarea id="output"></textarea>
</p><p>
View the <a href="cql-filter.js" target="_blank">cql-filter.js source</a>
to see how this is done.
</p>
</div>
<script src="cql-format.js"></script>
<script src="http://demo.opengeo.org/geoserver/wfs?service=WFS&amp;version=1.0.0&amp;request=GetFeature&amp;typename=topp:states&amp;outputFormat=json&amp;format_options=callback:loadFeatures" type="text/javascript"></script>
</body>
</html>

61
examples/cql-format.js Normal file
View File

@@ -0,0 +1,61 @@
// use a CQL parser for easy filter creation
var format = new OpenLayers.Format.CQL();
// this rule will get a filter from the CQL text in the form
var rule = new OpenLayers.Rule({
// We could also set a filter here. E.g.
// filter: format.read("STATE_ABBR >= 'B' AND STATE_ABBR <= 'O'"),
symbolizer: {
fillColor: "#ff0000",
strokeColor: "#ffcccc",
fillOpacity: "0.5"
}
});
var states = new OpenLayers.Layer.Vector("States", {
styleMap: new OpenLayers.StyleMap({
"default": new OpenLayers.Style(null, {rules: [rule]})
})
});
var map = new OpenLayers.Map({
div: "map",
layers: [
new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://maps.opengeo.org/geowebcache/service/wms",
{layers: "openstreetmap", format: "image/png"}
),
states
],
center: new OpenLayers.LonLat(-101, 39),
zoom: 3
});
// called when features are fetched
function loadFeatures(data) {
var features = new OpenLayers.Format.GeoJSON().read(data);
states.addFeatures(features);
};
// update filter and redraw when form is submitted
var cql = document.getElementById("cql");
var output = document.getElementById("output");
function updateFilter() {
var filter;
try {
filter = format.read(cql.value);
} catch (err) {
output.value = err.message;
}
if (filter) {
output.value = "";
rule.filter = filter;
states.redraw();
}
return false;
}
updateFilter();
var form = document.getElementById("cql_form");
form.onsubmit = updateFilter;