OpenLayers not showing Vector from WFS

Question

I'm working on creating a web GIS app with OpenLayers. I'm having a difficulty with fetching data from WFS GeoServer.

The data is correctly downloaded, however it is not being drawn in any way. It's just not visible. The WFS server uses polish units - EPSG:2180, so I reprojected it at the beginning. WMS downloaded the exact same way works fine.

<!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 compURL = '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(),
            url: function(extent) {
                // console.log(compURL+'&bbox='+extent.join(','))
                return compURL+'&bbox='+extent.join(',');
            },
            
            strategy: ol.loadingstrategy.bbox,
            //draw geoms
            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)'
                })
            }),
            projection: 'EPSG:2180',
            visible: true,
            opacity: 1,
            zIndex: 100
        });
        const WFSvectorLayer = new ol.layer.Vector({
            source: WFSvectorSource,
            projection: 'EPSG:2180'
        });
        
        /**
         * MAPA init
         */
        var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM(),
            projection: 'EPSG:2180'
          }),
            WFSvectorLayer
        ],
        target: 'map',
        view: new ol.View({
          projection: 'EPSG:2180',
          center: miejsce,
          zoom: 12
        })
      });
    </script>
</body>
</html>

I tried reading the documentation, watching tutorials etc. None helped, because this isn't GeoJSON. This server only gives GML. Changing style parameter of vector object doesn't do absolutely anything, same with adding extra parameters (like "projection" to vectorsource object). I expect it drawing geometries and polygons downloaded from WFS on the OpenStreetMap that works as background.

The problem is due to the WFS treating EPSG:2180 as having axis order N-E instead of E-N used by Openlayers. You should add ` +axis=neu` to the proj4 definition. You may also need to swap the coordinate order in the bbox `'&bbox='+[extent[1], extent[0], extent[3], extent[2]].join(',')` — Mike, Mar 30 '23 at 12:46
Thank you for your answer. I used both of your suggestions. This definitely did something, the WFS data now downloads itself only once (instead of previous 27 times). However, it still does not render, and the open street map is rotated by 90 degrees. My proj definition looks like that: `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 +axis=neu");` — T3chnoM4ciej, Mar 30 '23 at 14:24
The rotation is due to the proj4 version you are using. Try 2.7.5 — Mike, Mar 30 '23 at 14:32
It works now! Thanks a lot! I did however have to remove `'&bbox='+[extent[1], extent[0], extent[3], extent[2]].join(',')` and leave it as it was before. So the complete solution is newer proj4 and +axis=neu . — T3chnoM4ciej, Mar 30 '23 at 14:46

OpenLayers not showing Vector from WFS

0 Answers0