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>
|
|||
|
|
```
|
|||
|
|
|