Openlayers 样式不适用于某些 Geoserver WFS 图层（块状）答案

【问题标题】：Openlayers Style doesn't work on certain Geoserver WFS layer (block-shape)Openlayers 样式不适用于某些 Geoserver WFS 图层（块状）
【发布时间】：2020-04-29 03:06:53
【问题描述】：

我想使用 OpenLayer 更改 geoserver 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"

【问题讨论】：

标签： openlayers openlayers-3 geoserver web-feature-service

【解决方案1】：

如果您想将小多边形/多多边形设置为图像，您可以在样式中使用几何函数来返回它们的内部点

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

【讨论】：

【解决方案2】：

问题是第一层要素几何类型是点，因此上面的样式代码将起作用。

但是，其他层的几何类型是多边形/多多边形，因此根据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)'
    })
})

【讨论】：