openlayer之加载wfs服务
wfs服务是最灵活,功能最强大的webgis服务。通过向gis服务器请求,返回矢量数据,一般为两种格式(KML和geojson),当然还有其他格式。然后通过openlayer内置的解析函数,解析数据。但wfs返回的数据没有样式,需要自己设置样式(包括feature和layer样式),否则使用默认样式。(feature>layer>default)feature样式得到feature后才进行设置。
- 使用wfs加载数据。
<!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({
//数据来源
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: 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>
- 修改数据。(wfs强大之处就是它可以修改数据)
修改数据需要用到ol.Interaction,与数据进行交互,然后将修改后的数据返回服务器。完成修改。详细参见扯淡大叔的教程
转载自:https://blog.csdn.net/qq_31805885/article/details/78820659