WFS - GetFeature

This example uses OpenLayers v4.0.1. The latest is v.

#### WFS - GetFeature

Example of making a WFS GetFeature request with a filter.

This example generates a `GetFeature` request which uses a `PropertyIsEqualTo` and a `PropertyIsLike` filter, and then posts the request to load the features that match the query.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.format.filter
,
- ol.format.WFS
,
- ol.format.GeoJSON
,
- ol.layer.Tile
,
- ol.layer.Vector
,
- ol.source.BingMaps
,
- ol.source.Vector
,
- ol.style.Stroke
,
- ol.style.Style

Copy Edit
WFS - GetFeature Example of making a WFS GetFeature request with a filter. var vectorSource = new ol.source.Vector(); var vector = new ol.layer.Vector({ source: vectorSource, style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(0, 0, 255, 1.0)', width: 2 }) }) }); var raster = new ol.layer.Tile({ source: new ol.source.BingMaps({ imagerySet: 'Aerial', key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here' }) }); var map = new ol.Map({ layers: [raster, vector], target: document.getElementById('map'), view: new ol.View({ center: [-8908887.277395891, 5381918.072437216], maxZoom: 19, zoom: 12 }) }); // generate a GetFeature request var featureRequest = new ol.format.WFS().writeGetFeature({ srsName: 'EPSG:3857', featureNS: 'http://openstreemap.org', featurePrefix: 'osm', featureTypes: ['water_areas'], outputFormat: 'application/json', filter: ol.format.filter.and( ol.format.filter.like('name', 'Mississippi*'), ol.format.filter.equalTo('waterway', 'riverbank') ) }); // then post the request and add the received features to a layer fetch('https://ahocevar.com/geoserver/wfs', { method: 'POST', body: new XMLSerializer().serializeToString(featureRequest) }).then(function(response) { return response.json(); }).then(function(json) { var features = new ol.format.GeoJSON().readFeatures(json); vectorSource.addFeatures(features); map.getView().fit(vectorSource.getExtent()); }); <div id="map" class="map"></div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>WFS - GetFeature</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
      </head>
      <body>
        <div id="map" class="map"></div>
        <script>
          var vectorSource = new ol.source.Vector();
          var vector = new ol.layer.Vector({
            source: vectorSource,
            style: new ol.style.Style({
              stroke: new ol.style.Stroke({
                color: 'rgba(0, 0, 255, 1.0)',
                width: 2
              })
            })
          });

          var raster = new ol.layer.Tile({
            source: new ol.source.BingMaps({
              imagerySet: 'Aerial',
              key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here'
            })
          });

          var map = new ol.Map({
            layers: [raster, vector],
            target: document.getElementById('map'),
            view: new ol.View({
              center: [-8908887.277395891, 5381918.072437216],
              maxZoom: 19,
              zoom: 12
            })
          });

          // generate a GetFeature request
          var featureRequest = new ol.format.WFS().writeGetFeature({
            srsName: 'EPSG:3857',
            featureNS: 'http://openstreemap.org',
            featurePrefix: 'osm',
            featureTypes: ['water_areas'],
            outputFormat: 'application/json',
            filter: ol.format.filter.and(
              ol.format.filter.like('name', 'Mississippi*'),
              ol.format.filter.equalTo('waterway', 'riverbank')
            )
          });

          // then post the request and add the received features to a layer
          fetch('https://ahocevar.com/geoserver/wfs', {
            method: 'POST',
            body: new XMLSerializer().serializeToString(featureRequest)
          }).then(function(response) {
            return response.json();
          }).then(function(json) {
            var features = new ol.format.GeoJSON().readFeatures(json);
            vectorSource.addFeatures(features);
            map.getView().fit(vectorSource.getExtent());
          });
        </script>
      </body>
    </html>