openlayer开发&添加Geoserver发布的WFS服务

首先，我们这里需要使用Geoserver发布好wfs服务,我这里使用的是shapefile来创建的wfs要素服务。如下图所示，是Geoserver服务器展示的效果。

在浏览器中，打开debug模式，推荐使用google浏览器。然后如下图所示。我们可以看到一些请求信息，这些东西后面将会用到。如图层名。

注意了上面的服务是以WMS展示的，下面我们用代码来将发布好的服务添加进来。

//投影设置
var projection = new ol.proj.Projection({
    code: 'EPSG:4326',
    units: 'degrees'
    // units: 'm',
    // axisOrientation: 'neu'
});

//view设置
var view = new ol.View({
    projection: projection,
    center: [117.234, 31.782],
    zoom: 8,
    maxZoom: 18,
    minZoom: 1
});

//创建图层
var layers2=[new ol.layer.Tile(
    {
        source: new ol.source.OSM()   //加载OSM瓦片
    })]

//创建一个map
var map = new ol.Map({
        layers: layers2,
        //layers: [tiledwms],
        overlays:[overlay],
        target: "map",
        view: view
    });

//创建wfs资源
 var wfsVectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        projection: 'EPSG:4326',
        url: function(extent) {
            
            return 'http://localhost:8080/geoserver/sde/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName=sde:bou2_4l &outputFormat=application%2Fjson&srsname=EPSG:4326';
        },
        strategy: ol.loadingstrategy.bbox
    });
//创建wfs图层，注意需要设置好描边样式，否则不展示效果出来
var wfsVectorLayer = new ol.layer.Vector({
        source: wfsVectorSource,
        style: new ol.style.Style({
            image:new ol.style.Circle({
                radius: 5,
                fill: new ol.style.Fill({
                    color: "#3885ff",
                    opacity: 0.5
                })
            }),
            stroke:new ol.style.Stroke({
                  color: 'blue',
                  width: 5
                }
            )

        })
    });

好了，最后的效果如下图所示。

---

---

                             更多内容，请微信扫二维码关注公众号，或者加入Geoserver技术交流群：1019869405