css - openlayers-3 更改外部 wms 图层样式

Question

是否可以更改外部 wms 图层的样式？？

我正在尝试使用这一层:

https://firms.modaps.eosdis.nasa.gov/wms/?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&LAYERS=fires24&width=400&height=250&BBOX=-26,34,35,82

在 openlayers3 上使用此代码

var fill = new ol.style.Fill({color: 'GREEN'});
var stroke = new ol.style.Stroke({color: 'GREEN'});

var styles = [new ol.style.Style({
    image: new ol.style.Circle({
        fill: fill,
        stroke: stroke,
        radius: 5
    })
})];


var fires = new ol.layer.Image({
    name: 'fires',
    source: new ol.source.ImageWMS({
        url: 'https://firms.modaps.eosdis.nasa.gov/wms/',
        params: {
            'LAYERS': 'fires24',
            'VERSION': '1.1.1'
        }
    }),
    style: styles
});

图层显示正确，但没有我自己的样式。

是否可以这样做或替换为自定义图标？

Answer 1

您使用的 WMS 链接正在返回一个 PNG 文件，我相信 OpenLayers 无法“事后”设置样式。一旦获得它，它就是不可变的 - 它不是“数据”，而是覆盖在底层 map 源之上的透明图像。

您可以将一些参数传递到 wms 调用中(就像您所做的那样)，标准看起来可以支持您将样式传递到对 WMS 服务器的调用中，以使其在渲染图像时使用这些样式。

我从地理服务器网站(一个 GIS 服务器)得到了一个可能的参数列表 - http://docs.geoserver.org/stable/en/user/services/wms/reference.html

查看该链接，它看起来像 sld 或 sld_body 参数可能有效。 SLD 类似于 OL 样式，但在 XML 中。这些样式表的详细信息在这里 - http://docs.geoserver.org/stable/en/user/styling/index.html#styling

我尝试过这个 jsfiddle:https://jsfiddle.net/y7fj57dj/但它不是这样工作的——它可能是我的 SLD(我没有跟上它的速度)或者 NASA 服务器不知道如何处理它/正在忽略它。

您可能需要联系 NASA 服务器管理员以确认您是否可以设置 WMS 调用的样式(support@earthdata.nasa.gov，通过转到 https://firms.modaps.eosdis.nasa.gov/wms/?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetCapabilities 检索)。