Openlayers 样式不适用于某些 Geoserver WFS 层(块状)

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

我想使用 OpenLayer 更改地理服务器 WFS 层的样式。问题是,有一个层可以改样式,但是还有其他层不能改。

使用此代码

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

我可以将这一层 (SRID : 4326) 改成这样

但是样式不能应用到SRID为32663的其他图层。无论我尝试什么样的样式(描边、填充、颜色、图像),它总是会这样显示(块状)

我从 PostgreSQL 数据库中导入了这些图层。看几何投影,成功改变的层有这样的点状

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

geom sample : "0101000020E6100000C39A6FE9BDB85F40BB6F6BC141A14240"

同时修改失败的图层变成了这样的块状

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

geom sample : "0106000020977F00000100000001030000000100000005000000CDA1878968066B41EE70C72749445141284876F45D066B418F4696B13144514100B1FC4552066B41989893F24644514160E00CDB5C066B415B95DD685E445141CDA1878968066B41EE70C72749445141"

问题是第一层特征几何类型是点,因此上面的样式代码可以工作。

然而,另一层geom类型是polygon/multipolygon,因此根据https://embed.plnkr.co/plunk/GvdVNE,不同的类型需要不同的代码。以下代码适用于多边形样式。

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

如果您想将小 polygons/multipolygons 样式设置为图像,您可以在样式中使用几何函数来 return 它们的内部点

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