meface/olwfs.md at c4e8f7c0dc16c780817fed46f623502cfbf3709b

6.1 KiB

Raw Blame History

title

date

author

1. WFS

详见查看服务标准中的WFS简述。

在Openlayers中，加载WFS服务使用到的是矢量数据源ol.source.Vector来加载数据和矢量图层ol.layer.Vector进行渲染。在加载矢量数据时有两种方式（加载服务端的服务）：

在初始化矢量数据源ol.source.Vector时，使用url参数设置服务地址或返回服务地址的函数；
使用loader参数的加载函数。

两种方式都是请求WFS服务的GetFeature接口，将接口的返回的要素集使用对应的解析器format解析要素添加到数据源中，最后使用ol.layer.Vector渲染矢量要素。

在设置数据源的时候，需要主要一个叫strategy的参数。该参数用于配置WFS服务的加载策略，可选值有：

all（默认值），一次性加载服务中所有的要素；
bbox，加载地图当前视图范围内的要素；

2. 图层加载

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

<!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。

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

6.1 KiB Raw Blame History Unescape Escape

1. WFS

2. 图层加载

3.Tips

6.1 KiB

Raw Blame History