openlayer+geoserver实现属性查询

之前在网上找了很多资料发现没有比较完整的demo，所以我在这里整理了一下，这里我是在OSM底图上叠加了自己发布在geoserver上的地图：

<div id="map" class="map"></div>
    <script>
        
        //设置数据源属性
        var wmsSource = new ol.source.TileWMS({
            url: 'http://localhost:9999/geoserver/wfs',//端口号要改成自己的
            params: {
                'LAYERS': '？', //填写自己的地址中的layers=？
                'TILED': true
            },
            serverType: 'geoserver',
            // crossOrigin: 'anonymous',
            projection: 'EPSG:4326'
        });

    

        var wmsLayer = new ol.layer.Tile({
            source: wmsSource
        });
        //设置视图
        var view = new ol.View({
            center: [102.43652, 30.76172],
            zoom: 7,
            projection : "EPSG:4326"
        });
        var osm =  new ol.layer.Tile({
            source: new ol.source.OSM()
        })
        var map = new ol.Map({
            loadTilesWhileInteracting: true,
            target: 'map',
            view: view
        });
        map.addLayer(osm);
        map.addLayer(wmsLayer);

        function btnClick(){
            //首先定义一个空的矢量图层，设置样式并添加到当前map中
            var vectorSource = new ol.source.Vector;
            var vector = new ol.layer.Vector({
                source: vectorSource,
                style: new ol.style.Style({
                    fill: new ol.style.Fill({
                        color: 'white'
                    }),
                    stroke:new ol.style.Stroke({
                        color: 'red',
                        width:1
                    })
                })
            });
            map.addLayer(vector);

            //设置查询参数与条件
            var featureRequest = new ol.format.WFS().writeGetFeature({
                srsName: 'EPSG:4326',//坐标系统
                featureNS: 'http://geoserver.org',//命名空间 URI
                featurePrefix: 'test',//工作区名称
                featureTypes: ['test:sichuan_xianjie'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
                outputFormat: 'application/json',
                filter: ol.format.filter.equalTo("NAME",document.getElementById("st").value)//前者是属性名，后者是对应值
            });

            fetch('http://localhost:9999/geoserver/wfs', {//geoserver wfs地址如localhost:8080/geoserver/wfs，我是9999
                method: 'POST',
                body: new XMLSerializer().serializeToString(featureRequest)
            }).then(function(response) {
                return response.json();
            }).then(function(json) {
                var features = new ol.format.GeoJSON().readFeatures(json);
                vectorSource.addFeatures(features);
                map.getView().fit(vectorSource.getExtent());//缩放到查询出的feature
            });
        }
        
    </script>
     <div id="query">
        <input type="text" value="" id="st"/>
        <button id="b" onclick="btnClick()">click me</button>
    </div>

完成

在文本框中输入然后点击查询就ok！！！