wfs Service is the most flexible and powerful Web gis service. Through the request to gis Server, return vector data, generally in two formats (KML and geojson), of course, there are other formats. Then through the built-in parsing function of openlayer, the data is parsed. However, the data returned by wfs does not have a style. You need to set the style (including feature and layer styles) yourself. Otherwise, the default style is used. (feature > Layer > Default) the feature style is set only after the feature is obtained.
- Use wfs to load data.
<!DOCTYPE html>
<html>
<head>
<title>WFS</title>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
<link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/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.5.0/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var vector = new ol.layer.Vector({
//data sources
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: 'http://localhost:8089/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=nyc_roads:tiger_roads&outputFormat=application/json&srsname=EPSG:4326'
}),
//layer style
style: function(feature, resolution) {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 1
})
});
}
});
var map = new ol.Map({
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
}), vector],
target: 'map',
view: new ol.View({
center: [-73.99710639567148, 40.742270050255556],
maxZoom: 19,
zoom: 14,
projection: 'EPSG:4326'
})
});
</script>
</body>
</html>- Modify data. (the power of wfs is that it can modify data)
Data modification needs to use ol.Interaction , interact with the data, and then return the modified data to the server. Complete the modification. For details, see Nonsense uncle's tutorial