diff --git a/examples/vector-wfs-getfeature.html b/examples/vector-wfs-getfeature.html new file mode 100644 index 0000000000..7919ec785f --- /dev/null +++ b/examples/vector-wfs-getfeature.html @@ -0,0 +1,13 @@ +--- +layout: example.html +title: WFS - GetFeature +shortdesc: Example of making a WFS GetFeature request with a filter. +docs: > + 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. +tags: "vector, WFS, GetFeature, filter" +cloak: + AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://www.bingmapsportal.com/ here +--- +
diff --git a/examples/vector-wfs-getfeature.js b/examples/vector-wfs-getfeature.js new file mode 100644 index 0000000000..d1905ac0a2 --- /dev/null +++ b/examples/vector-wfs-getfeature.js @@ -0,0 +1,66 @@ +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.format.ogc.filter'); +goog.require('ol.format.WFS'); +goog.require('ol.format.GeoJSON'); +goog.require('ol.layer.Tile'); +goog.require('ol.layer.Vector'); +goog.require('ol.source.BingMaps'); +goog.require('ol.source.Vector'); +goog.require('ol.style.Stroke'); +goog.require('ol.style.Style'); + + +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: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF' + }) +}); + +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 f = ol.format.ogc.filter; +var featureRequest = new ol.format.WFS().writeGetFeature({ + srsName: 'EPSG:3857', + featureNS: 'http://openstreemap.org', + featurePrefix: 'osm', + featureTypes: ['water_areas'], + outputFormat: 'application/json', + filter: f.and( + f.like('name', 'Mississippi*'), + f.equalTo('waterway', 'riverbank') + ) +}); + +// then post the request and add the received features to a layer +fetch('http://demo.boundlessgeo.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(), /** @type {ol.Size} */ (map.getSize())); +});