Vue+Openlayers6加载Geoserver的WFS服务

• 导入相关模块

import "ol/ol.css"
import Map from "ol/Map"
import View from "ol/View"
import VectorSource from 'ol/source/Vector'
import GeoJSON from 'ol/format/GeoJSON'
import VectorLayer from 'ol/layer/Vector'
import {Stroke, Style} from 'ol/style'
//引入的是bbox：根据当前视图范围加载要素
import {bbox as bboxStrategy} from 'ol/loadingstrategy';

• 加载wfs的参数配置。typeName图层名称。

在geoserver服务器打开GeoJSON。得到地址：http://ip地址:8080/geoserver/demo/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=demo:polylineTest&maxFeatures=50&outputFormat=application%2Fjson

方法一

strategy：设置加载wfs的方式。

    var vector = new VectorLayer({
          source: new VectorSource({
                format: new GeoJSON(),
                url: function(extent) {
                  //上面通过GeoJSON得到的url。
                  return 'http://ip地址:8080/geoserver/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName=demo:polylineTest&maxFeatures=50&outputFormat=application/json'+'&bbox='+extent.join(',')
                },
                style: '',
                 /*
                  all:一次性加载所有要素
                  bbox：加载当前视图范围内的要素，注意url中要有extent参数
                 tile：基于瓦片格网加载要素
                 */
                strategy:bboxStrategy,
          }),
    });
     var map = new Map({
            layers: [vector],
             //目标id
            target: 'mapDivRef',
            view: new View({
                center: [43253.10261, 28479.09492],
                zoom: 12,
                maxZoom: 19,
            }),
        });

效果图

方法二

通过axios请求wfs服务

//参数
wfsParams: {    
              service : 'WFS',    
              version : '1.0.0',    
              request : 'GetFeature',    
              typeName : 'demo:polylineTest',  //图层名称     
              outputFormat : 'application/json',  //重点，不要改变  
        },

//接口
 var source=new VectorSource({
            format: new GeoJSON(),
            loader: (extent,resolution, projection)=> {
              var url = 'http://ip地址:8080/geoserver/wfs'; 
              axios.request({    
                      url: url,    
                      params : this.wfsParams, 
                      method: 'get',
 
              })
              .then((res) => {
            //addFeatures加载图层
                source.addFeatures(new GeoJSON().readFeatures(res.data)); 
                
              });    
            },
            style: '',
            strategy:bboxStrategy,
          })

//引入。
 var vector = new VectorLayer({
          source: source,
            });

效果图