212 lines
6.1 KiB
Markdown
212 lines
6.1 KiB
Markdown
---
|
||
title: 加载WFS服务
|
||
date: 2020-03-21
|
||
author: ac
|
||
tags:
|
||
- WFS
|
||
- Openlayers
|
||
categories:
|
||
- GIS
|
||
---
|
||
|
||
## 1. WFS
|
||
|
||
详见查看服务标准中的[WFS简述](./wfs.md)。
|
||
|
||
在`Openlayers`中，加载`WFS`服务使用到的是矢量数据源`ol.source.Vector`来加载数据和矢量图层`ol.layer.Vector`进行渲染。在加载矢量数据时有两种方式（加载服务端的服务）：
|
||
|
||
1. 在初始化矢量数据源`ol.source.Vector`时，使用`url`参数设置服务地址或返回服务地址的函数；
|
||
2. 使用`loader`参数的加载函数。
|
||
|
||
两种方式都是请求`WFS`服务的`GetFeature`接口，将接口的返回的要素集使用对应的解析器`format`解析要素添加到数据源中，最后使用`ol.layer.Vector`渲染矢量要素。
|
||
|
||
在设置数据源的时候，需要主要一个叫`strategy`的参数。该参数用于配置`WFS`服务的加载策略，可选值有：
|
||
|
||
- `all`（默认值），一次性加载服务中所有的要素；
|
||
- `bbox`，加载地图当前视图范围内的要素；
|
||
|
||
## 2. 图层加载
|
||
|
||
|
||
|
||
```html
|
||
<!doctype html>
|
||
<html >
|
||
<head>
|
||
<link rel="stylesheet" href="css/ol.css" type="text/css">
|
||
<style>
|
||
.map {
|
||
height: 400px;
|
||
width: 100%;
|
||
}
|
||
</style>
|
||
<script src="lib/ol.js"></script>
|
||
<title>OpenLayers example</title>
|
||
<meta charset="UTF-8">
|
||
</head>
|
||
<body>
|
||
<h2>OGC WFS服务：加载GeoServer的WFS服务</h2>
|
||
<div id="map" class="map"></div>
|
||
<script type="text/javascript">
|
||
var nyc = [-73.92722,40.774221];
|
||
var map = new ol.Map({
|
||
layers: [
|
||
new ol.layer.Tile({
|
||
source: new ol.source.OSM()
|
||
}),
|
||
new ol.layer.Vector({
|
||
source: new ol.source.Vector({
|
||
format: new ol.format.GeoJSON(),
|
||
url: function(extent) {
|
||
//直接返回WFS的GetFeature接口访问地址，设置outputFormat为json格式和format中的解析器一致
|
||
return 'http://localhost:8080/geoserver/wfs?service=WFS&' +
|
||
'version=1.1.0&request=GetFeature&typename=tiger:tiger_roads&' +
|
||
'outputFormat=application/json&srsname=EPSG:3857&' +
|
||
'bbox=' + extent.join(',') + ',EPSG:3857';
|
||
},
|
||
/*
|
||
* 加载策略，可选值：
|
||
* all，一次性加载所有的要素；
|
||
* bbox，加载地图当前视图范围内的要素；
|
||
* tile，基于瓦片格网加载要素
|
||
*/
|
||
strategy: ol.loadingstrategy.bbox
|
||
}),
|
||
style: new ol.style.Style({
|
||
stroke: new ol.style.Stroke({
|
||
color: 'rgba(0, 0, 255, 1.0)',
|
||
width: 2
|
||
})
|
||
})
|
||
})
|
||
],
|
||
target: 'map',
|
||
view: new ol.View({
|
||
center:ol.proj.fromLonLat(nyc),
|
||
zoom: 11
|
||
})
|
||
})
|
||
</script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
|
||
|
||
```html
|
||
<!doctype html>
|
||
<html >
|
||
<head>
|
||
<link rel="stylesheet" href="css/ol.css" type="text/css">
|
||
<style>
|
||
.map {
|
||
height: 400px;
|
||
width: 100%;
|
||
}
|
||
</style>
|
||
<script src="lib/ol.js"></script>
|
||
<title>OpenLayers example</title>
|
||
<meta charset="UTF-8">
|
||
</head>
|
||
<body>
|
||
<h2>OGC WFS服务：加载GeoServer的WFS服务</h2>
|
||
<div id="map" class="map"></div>
|
||
<script type="text/javascript">
|
||
var vectorSource = new ol.source.Vector({
|
||
format: new ol.format.GeoJSON(),
|
||
loader: function(extent, resolution, projection) {
|
||
var proj = projection.getCode();
|
||
var url = 'http://localhost:8080/geoserver/wfs?service=WFS&' +
|
||
'version=1.1.0&request=GetFeature&typename=tiger:tiger_roads&' +
|
||
'outputFormat=application/json&srsname='+proj+'&' +
|
||
'bbox=' + extent.join(',') + ',' +proj;
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.open('GET', url);
|
||
var onError = function() {
|
||
vectorSource.removeLoadedExtent(extent);
|
||
}
|
||
xhr.onerror = onError;
|
||
xhr.onload = function() {
|
||
if (xhr.status == 200) {
|
||
//获取配置的解析器，解析要素集并添加到数据源中
|
||
vectorSource.addFeatures(
|
||
vectorSource.getFormat().readFeatures(xhr.responseText));
|
||
} else {
|
||
onError();
|
||
}
|
||
}
|
||
xhr.send();
|
||
},
|
||
strategy: ol.loadingstrategy.bbox
|
||
});
|
||
var nyc = [-73.92722,40.774221];
|
||
var map = new ol.Map({
|
||
layers: [
|
||
new ol.layer.Tile({
|
||
source: new ol.source.OSM()
|
||
}),
|
||
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
|
||
})
|
||
})
|
||
})
|
||
],
|
||
target: 'map',
|
||
view: new ol.View({
|
||
center:ol.proj.fromLonLat(nyc),
|
||
zoom: 11
|
||
})
|
||
})
|
||
</script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
|
||
|
||
## 3.Tips
|
||
|
||
在请求WFS服务时，可能会出现跨域问题。
|
||
|
||
|
||
|
||
解决方式可以在GeoServer中配置跨域支持。
|
||
|
||
将geoserver-2.18.1\lib中的jetty-servlets-9.4.12.v20180830.jar和jetty-util-9.4.12.v20180830.jar拷贝到geoserver-2.18.1\webapps\geoserver\WEB-INF\lib目录中，再修改geoserver-2.18.1\webapps\geoserver\WEB-INF目录下web.xml文件，将下列的注释取消，重启GeoServer。
|
||
|
||
```xml
|
||
<!-- Uncomment following filter to enable CORS in Jetty. Do not forget the second config block further down.
|
||
-->
|
||
<filter>
|
||
<filter-name>cross-origin</filter-name>
|
||
<filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
|
||
<init-param>
|
||
<param-name>chainPreflight</param-name>
|
||
<param-value>false</param-value>
|
||
</init-param>
|
||
<init-param>
|
||
<param-name>allowedOrigins</param-name>
|
||
<param-value>*</param-value>
|
||
</init-param>
|
||
<init-param>
|
||
<param-name>allowedMethods</param-name>
|
||
<param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value>
|
||
</init-param>
|
||
<init-param>
|
||
<param-name>allowedHeaders</param-name>
|
||
<param-value>*</param-value>
|
||
</init-param>
|
||
</filter>
|
||
|
||
<!-- Uncomment following filter to enable CORS-->
|
||
<filter-mapping>
|
||
<filter-name>cross-origin</filter-name>
|
||
<url-pattern>/*</url-pattern>
|
||
</filter-mapping>
|
||
```
|
||
|