openlayersopenlayers-3geoserverweb-feature-service

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

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

enter image description here

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)

enter image description here

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"

enter image description here

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"

enter image description here

Solution

  • 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)'
    })
})