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= ,还要处理字符编码的问题。
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()); });
相关文章推荐
- GIS的学习(二十)基于Geoserver的WFS服务与Openlayers实现地理查询
- 使用openlayers3自带的功能,使用WFS对geoserver服务器进行空间查询
- GIS的学习(二十)基于Geoserver的WFS服务与Openlayers实现地理查询
- OpenLayers中基于Filter的WFS查询
- 基于Geoserver的WFS服务与Openlayers实现地理查询
- 利用Geoserver的wfs BBOX范围查询及Openlayers解析GML,添加Marker
- 利用Geoserver的wfs BBOX范围查询及Openlayers解析GML,添加Marker
- openlayers 3 开发,点击 Overlay 请求WFS并进入下一级别(顺带解决上一次问题)
- GeoServer中WMS、WFS的区别和请求规范
- 关于OpenLayers的WFS地名点查询中文问题的解决
- Openlayers3 加载 GeoServer WFS的实现
- openlayers3 通过wfs请求方式添加矢量vector图层
- wfs形式从geoserver请求所有的图层数据
- GeoServer中WMS、WFS的请求规范
- openlayers3 在地图上叠加WFS查询矢量图层
- 关于OpenLayers的WFS地名点查询中文问题的解决
- Openlayers实现WFS服务及单击要素查询
- GeoServer中WMS、WFS的请求规范(转载)
- 基于OpenLayers 的WFS模糊查询优化
- Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)