openlayers学习（四）加载geoserver发布的wfs图层

最新推荐文章于 2024-07-12 16:06:22 发布

mylove10086

最新推荐文章于 2024-07-12 16:06:22 发布

阅读量2.4k

点赞数 1

分类专栏： geoserver 文章标签： geoserver

本文链接：https://blog.csdn.net/u014572215/article/details/109056727

版权

geoserver 专栏收录该内容

14 篇文章 17 订阅

订阅专栏

这篇博客介绍了如何通过OpenLayers显示Geoserver发布的WFS图层，使用了两种不同的方法：一是通过bbox策略加载数据，二是采用tile策略并使用POST请求获取数据。示例代码详细展示了如何配置vector source和图层，以及如何将图层添加到地图中。

摘要由CSDN通过智能技术生成

要达到的效果显示geoserver中发布的wfs图层，数据使用geoserver自带的示例数据。安装后geoserver后就有的数据poi图层

官网示例：https://openlayers.org/en/latest/examples/vector-wfs.html

1、创建vector

var vs = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: function (extent) {
        return ('http://localhost:8080/geoserver/tiger/ows?service=WFS&' +
            'version=1.1.0&request=GetFeature&typeName=tiger:poi&' +
            'outputFormat=application/json&srsname=EPSG:4326&' +
            'bbox=' + extent.join(',') + ',EPSG:4326');
    },
    strategy: ol.loadingstrategy.bbox
});

2、创建图层

//方法一
var vs = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: function (extent) {
        return ('http://localhost:8080/geoserver/tiger/ows?service=WFS&' +
            'version=1.1.0&request=GetFeature&typeName=tiger:poi&' +
            'outputFormat=application/json&srsname=EPSG:4326&' +
            'bbox=' + extent.join(',') + ',EPSG:4326');
    },
    strategy: ol.loadingstrategy.bbox
});

//方法二
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/tiger/ows?service=WFS&' +
            'version=1.0.0&request=GetFeature&typename=tiger:poi&' +
            'outputFormat=application/json&srsname=' + proj + '&' +
            'bbox=' + extent.join(',') + ',' + proj;
        var featureRequest = new ol.format.WFS().writeGetFeature({
            srsName: 'EPSG:4326',//坐标系
            featureNS: 'http://www.census.gov',// 注意这个值必须为创建工作区时的命名空间URI
            featurePrefix: 'tiger',//工作区的命名
            featureTypes: ['poi'],//所要访问的图层
            maxFeatures: 5000,
            outputFormat: 'application/json'
        });
        fetch(url, {
            method: 'POST',
            body: new XMLSerializer().serializeToString(featureRequest)
        }).then(function (response) {
            return response.json();
        }).then(function (json) {
            var features = new ol.format.GeoJSON().readFeatures(json);
            console.log(features.length);
            if (features.length > 0) {
                vectorSource.clear();
                vectorSource.addFeatures(features);
            }
        });
    },
    strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({
        maxZoom: 25
    })),
    projection: 'EPSG:4326'
});

3、添加到map中

map.addLayer(v);

效果如下

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加wfs图层</title>
    <script src="../lib/openlayerv6.4.3/build/ol.js"></script>
    <link rel="stylesheet" href="../lib/openlayerv6.4.3/css/ol.css">
    <style>
        .map {
            width: 100%;
            height: 600px;
        }
    </style>
</head>
<script>
    var map;
    var typeSelect;
    var draw; // global so we can remove it later
    var source;

    function init() {
        var rootLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G'
            }) //加载谷歌影像地图
        });

        var view = new ol.View({
            center: [-74.0087, 40.7122],
            projection: 'EPSG:4326',
            zoom: 10
        });
        map = new ol.Map({
            layers: [rootLayer],
            target: 'map',
            view: view
        });
    }

    var feature;

    function addwms() {

        //方法一
        var vs = new ol.source.Vector({
            format: new ol.format.GeoJSON(),
            url: function (extent) {
                return ('http://localhost:8080/geoserver/tiger/ows?service=WFS&' +
                    'version=1.1.0&request=GetFeature&typeName=tiger:poi&' +
                    'outputFormat=application/json&srsname=EPSG:4326&' +
                    'bbox=' + extent.join(',') + ',EPSG:4326');
            },
            strategy: ol.loadingstrategy.bbox
        });
        var v = new ol.layer.Vector({
            source: vs,
            style: new ol.style.Style({//添加显示的样式
                image: new ol.style.Circle({
                    stroke: new ol.style.Stroke({
                        color: '#3399CC',
                        width: 1.25
                    }),
                    radius: 15,
                    fill: new ol.style.Fill({
                        color: '#cc3352'
                    }),
                })

            })
        });
        map.addLayer(v);
    }

    function addwms2() {
        //方法二
        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/tiger/ows?service=WFS&' +
                    'version=1.0.0&request=GetFeature&typename=tiger:poi&' +
                    'outputFormat=application/json&srsname=' + proj + '&' +
                    'bbox=' + extent.join(',') + ',' + proj;
                var featureRequest = new ol.format.WFS().writeGetFeature({
                    srsName: 'EPSG:4326',//坐标系
                    featureNS: 'http://www.census.gov',// 注意这个值必须为创建工作区时的命名空间URI
                    featurePrefix: 'tiger',//工作区的命名
                    featureTypes: ['poi'],//所要访问的图层
                    maxFeatures: 5000,
                    outputFormat: 'application/json'
                });
                fetch(url, {
                    method: 'POST',
                    body: new XMLSerializer().serializeToString(featureRequest)
                }).then(function (response) {
                    return response.json();
                }).then(function (json) {
                    var features = new ol.format.GeoJSON().readFeatures(json);
                    console.log(features.length);
                    if (features.length > 0) {
                        vectorSource.clear();
                        vectorSource.addFeatures(features);
                    }
                });
            },
            strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({
                maxZoom: 25
            })),
            projection: 'EPSG:4326'
        });
        var v = new ol.layer.Vector({
            source: vectorSource,
            style: new ol.style.Style({//添加显示的样式
                image: new ol.style.Circle({
                    stroke: new ol.style.Stroke({
                        color: '#3399CC',
                        width: 1.25
                    }),
                    radius: 15,
                    fill: new ol.style.Fill({
                        color: '#cc3352'
                    }),
                })

            })
        });
        map.addLayer(v);
    }
</script>
<body οnlοad="init()">
<div id="map" class="map" tabindex="0"></div>
<button οnclick="addwms()">方法一</button>
<button οnclick="addwms2()">方法二</button>

</body>
</html>