Openlayers Style doesn't work on certain Geoserver WFS layer (block-shape)

Question

I want to change styling of the geoserver WFS layer using OpenLayer. The problem is, there is a layer that the style can be changed, but there are other layers that can't be changed.

Using this code

style: new ol.style.Style({
                image: new ol.style.Circle({
                    stroke: new ol.style.Stroke({
                        color: 'rgba(255, 0, 0, 1.0)',
                        width: 5
                    }),
                    radius: 5
                })
            })

I can change this layer (SRID : 4326) to like this

But the style can't be applied to the other layer that has SRID : 32663. No matter what kind of style that I try (stroke, fill, color, image), it will always show up like this (block shape)

I imported these layers from PostgreSQL database. Looking at the geometry projection, the successfully changed layer has point-shape like this

SELECT ST_AsEWKT(geometry) FROM "table1" LIMIT 1;
result : SRID=4326;POINT(126.8865913 37.2598192)

geom sample : "0101000020E6100000C39A6FE9BDB85F40BB6F6BC141A14240"

Meanwhile the unsuccessfully changed layer has block-shape like this

SELECT ST_AsEWKT(geometry) FROM "table2" LIMIT 1;
result : SRID=32663;MULTIPOLYGON(((14240035.8111278 4485667.02788355,14239940.2255882 4485585.20329766,.........

geom sample : "0106000020977F00000100000001030000000100000005000000CDA1878968066B41EE70C72749445141284876F45D066B418F4696B13144514100B1FC4552066B41989893F24644514160E00CDB5C066B415B95DD685E445141CDA1878968066B41EE70C72749445141"

score 1 · Answer 1 · answered Apr 29 '20 at 09:30

If you want to style small polygons/multipolygons as images you can use a geometry function in the style to return their interior points

style: new ol.style.Style({
                geometry: function(feature) {
                  var geom = feature.getGeometry();
                  if (geom.getType() = 'Polygon') {
                    return geom.getInteriorPoint();
                  }
                  if (geom.getType() = 'MultiPolygon') {
                    return geom.getInteriorPoints();
                  }
                  return geom;
                },
                image: new ol.style.Circle({
                    stroke: new ol.style.Stroke({
                        color: 'rgba(255, 0, 0, 1.0)',
                        width: 5
                    }),
                    radius: 5
                })
            })

score 0 · Accepted Answer · answered Apr 29 '20 at 05:36

The problem is the first layer feature geometry type is Point, therefore the above styling code will work.

However, the other layer geom type is polygon/multipolygon, therefore according to https://embed.plnkr.co/plunk/GvdVNE , different type will requires different code. The below code works for polygon styling.

var polyStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: 'rgb(0,255,255)',
        width: 3
    }),
    fill: new ol.style.Fill({
        color: 'rgba(0, 255, 255, 0.5)'
    })
})

Openlayers Style doesn't work on certain Geoserver WFS layer (block-shape)

2 Answers2