Using WFS spatial filters

Filtering alphanumerical attributes is quite a common task. However, in a GIS application, you may also want to filter features according to geometric properties.

WFS includes a few spatial relationships that you can use to create a spatial filter. From a general point of view, you need an input shape, a relationship to be checked, and some target shapes to be filtered.

In this recipe, we use the DWITHIN spatial relationship to filter countries that are within a circular buffer.

Tip

You can find the full source code for this recipe in the code bundle available from the Packt site for this book. Look for the ch01_wfsSpatialFilter.html file.

How to do it…

1. Copy the file used in the first recipe to the wfsSpatialFilter.html file in the same folder. Then, alter the JavaScript part as shown in the following code:

   <script type="text/javascript">
     function init() {
       map = new OpenLayers.Map({
         div: "myMap",
         allOverlays: true,
         layers: [
           new OpenLayers.Layer.Vector("Filtered Countries", {
             strategies: [new OpenLayers.Strategy.Fixed()],
             protocol: new OpenLayers.Protocol.WFS({
               url: "http://localhost/geoserver/wfs",
               featureType: "countries",
               featureNS: "http://www.naturalearthdata.com/",
               geometryName: "geom"
             }),
             styleMap: new OpenLayers.StyleMap({
               strokeWidth: 3,
               strokeColor: "#000000",
               strokeWidth: 1,
               fillColor: "#78c679",
               fillOpacity: 1
             }),

2. Insert a spatial filter, as shown in the following code:

             filter: new OpenLayers.Filter.Logical({
               type: OpenLayers.Filter.Logical.AND,
               filters: [
                 new OpenLayers.Filter.Spatial({
                   type: OpenLayers.Filter.Spatial.DWITHIN,
                   value: new OpenLayers.Geometry.Point(12, 42),
                   distance: 8
                 })
               ]
             })
           })
         ],
         center: [12.48, 42.60],
         zoom: 4
       });
       map.addControl(new OpenLayers.Control.LayerSwitcher());
     }
   </script>

3. Save the file and point your browser to it. You should get a map that looks like the one shown in the introduction to this recipe.

How it works…

Not surprisingly, the code contained in the file is not so different from that used in the previous recipe. Indeed, we are performing the same task, which is filtering data, but now we want to use a different filter: a spatial filter.

You set a logical filter with an AND logical join:

          filter: new OpenLayers.Filter.Logical({
            type: OpenLayers.Filter.Logical.AND,

Then, you add a Filter.Spatial class. This is the magic of this recipe. The value parameter lets you choose the spatial relationship; in this case, we use DWITHIN, that is, all features within a specific distance from the source geometry will be selected:

            filters: [
              new OpenLayers.Filter.Spatial({
                type: OpenLayers.Filter.Spatial.DWITHIN,

The source geometry is a point feature created with an OpenLayers class and specifies the latitude and longitude values:

                value: new OpenLayers.Geometry.Point(12, 42),

Then, you have to set a distance. Please note that you can also set zero as a distance value; in this case, if you have a polygon geometry, only the feature that is contained in the polygon will be selected:

                distance: 8
              })
            ]
          })

Note

GeoServer lets you use a few spatial filters: Disjoint, Equals, DWithin, Beyond, Intersect, Touches, Crosses, Within, Contains, Overlaps, and BBOX. For more details about them, point to http://www.opengeospatial.org/standards/filter.