您的位置:首页 > 运维架构

Openlayers3 请求Geoserver带Filter的WFS查询

2018-01-12 15:43 1636 查看
官方例子在这:http://openlayers.org/en/latest/examples/vector-wfs-getfeature.html?q=wfs

openlayers3 将基于OGC规范的 WFS查询封装了一下,所以不用去写 XML规范的请求,或者在url上拼接cql_filter= ,还要处理字符编码的问题。

//TODO WFS 查询要素TEST

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
})
})
});
map.addLayer(vector);

// generate a GetFeature request
var featureRequest = new ol.format.WFS().writeGetFeature({
srsName: 'EPSG:3857',
featureNS: 'http://www.ztbr.com',    //命名空间
featurePrefix: 'zbtr',               //工作区域
featureTypes: ['yanqing18jd'],       //图层名
outputFormat: 'application/json',
filter:
ol.format.filter.equalTo('街道', '百泉街道')    //todo 条件查询过滤
});

// then post the request and add the received features to a layer
fetch('http://localhost:8082/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());
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: