WFS

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

#### WFS

Example of using WFS with a BBOX strategy.

This example loads new features from GeoServer WFS when the view extent changes.

Related API documentation:

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

Copy Edit
WFS Example of using WFS with a BBOX strategy. var vectorSource = new ol.source.Vector({ format: new ol.format.GeoJSON(), url: function(extent) { return 'https://ahocevar.com/geoserver/wfs?service=WFS&' + 'version=1.1.0&request=GetFeature&typename=osm:water_areas&' + 'outputFormat=application/json&srsname=EPSG:3857&' + 'bbox=' + extent.join(',') + ',EPSG:3857'; }, strategy: ol.loadingstrategy.bbox }); 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 }) }); <div id="map" class="map"></div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>WFS</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({
            format: new ol.format.GeoJSON(),
            url: function(extent) {
              return 'https://ahocevar.com/geoserver/wfs?service=WFS&' +
                  'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
                  'outputFormat=application/json&srsname=EPSG:3857&' +
                  'bbox=' + extent.join(',') + ',EPSG:3857';
            },
            strategy: ol.loadingstrategy.bbox
          });

          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
            })
          });
        </script>
      </body>
    </html>