OpenLayers无法显示WFS服务加载的矢量数据问题求助

你遇到的核心问题是GML3格式解析配置缺失，加上样式属性放置错误，导致WFS矢量数据无法渲染。以下是具体修复步骤：

1. 修正GML3格式解析配置 #

OpenLayers的ol.format.GML3需要明确指定要素命名空间(featureNS)和要素类型(featureType)，否则无法正确解析GeoServer返回的带命名空间的GML数据。从你的WFS请求typename=ms:Ark_50k_42来看，需要添加对应的命名空间（可通过WFS的GetCapabilities文档获取，这里对应MapServer的默认命名空间）。

2. 调整样式属性位置 #

style是ol.layer.Vector的属性，而非ol.source.Vector的属性，你之前把样式放在了数据源里，导致样式不生效。

3. 完善WFS请求的BBOX参数 #

WFS 1.1.0规范要求BBOX参数需要包含坐标系信息，所以在拼接bbox时要加上,EPSG:2180，确保服务器返回正确范围的数据。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GEO</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.2/proj4.js"></script>
    <script src="http://epsg.io/2180.js"></script>
    <script src="./ol.js"></script>
    <link rel="stylesheet" href="./ol.min.css">
</head>
<body>
    <div id="map" class="map" style="width: 800px; height: 800px;"></div>
    
    <script>
        /** 
         * PROJ
        */
        proj4.defs("EPSG:2180","+proj=tmerc +lat_0=0 +lon_0=19 +k=0.9993 +x_0=500000 +y_0=-5300000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs");
        ol.proj.proj4.register(proj4);
        ol.proj.get("EPSG:2180").setExtent([0, 0, 1000000, 1000000]);

        /** 
         * Place
        */
        let miejsce4326 = [18.05165,53.23004] 
        const miejsce = ol.proj.transform(miejsce4326, 'EPSG:4326', 'EPSG:2180');


        /**
         * WFS 
         */
        let baseURL = 'https://corsproxy.io/?https://mapy.geoportal.gov.pl/wss/service/PZGIK/mapy/WFS/SiatkiPodzialuArkuszowego?service=WFS&Request=GetFeature&version=1.1.0&srsname=EPSG:2180&typename=ms:Ark_50k_42&outputFormat=GML3'
        const WFSvectorSource = new ol.source.Vector({
            format: new ol.format.GML3({
                featureNS: 'http://mapserver.gis.umn.edu/mapserver', // 对应ms前缀的命名空间
                featureType: 'Ark_50k_42' // 要素类型名
            }),
            url: function(extent) {
                // WFS 1.1.0需要在bbox后追加坐标系
                return baseURL + '&bbox=' + extent.join(',') + ',EPSG:2180';
            },
            strategy: ol.loadingstrategy.bbox
        });
        
        const WFSvectorLayer = new ol.layer.Vector({
            source: WFSvectorSource,
            // 样式移到图层上
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: '#ffcc33',
                    width: 2
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                })
            }),
            opacity: 1,
            zIndex: 100
        });
        
        /**
         * MAPA init
         */
        var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM(),
            // OSM默认是EPSG:3857，OpenLayers会自动转换到视图的EPSG:2180，无需手动设置projection
          }),
            WFSvectorLayer
        ],
        target: 'map',
        view: new ol.View({
          projection: 'EPSG:2180',
          center: miejsce,
          zoom: 12
        })
      });
    </script>
</body>
</html>

额外说明 #

• 关于OSM底图：无需给ol.source.OSM设置projection，OpenLayers会自动将底图瓦片从EPSG:3857转换到视图的EPSG:2180。
• 命名空间验证：如果上述命名空间不生效，可以通过访问WFS的GetCapabilities地址查找ms前缀对应的命名空间URI。

内容的提问来源于stack exchange，提问作者T3chnoM4ciej