在 OpenLayers 3 中设置图标颜色的问题

Question

我正在通过尝试为 Openlayers 3 中的图标分配颜色来尝试一些麻烦。

我已经查看了 Openlayers 站点中的 Icon Colors example，但即使使用我们在那里找到的代码，它也不起作用。如果我们在示例中单击 "Edit" 按钮，将打开一个 jsfiddle，但如果我们想看到图标，我们应该注释我们分配自定义颜色的行。这是我目前所拥有的：

pointInMap.setStyle( new ol.style.Style( {
    image: new ol.style.Icon( ( {
        color: [ 113, 140, 0 ],
        src: 'https://openlayers.org/en/v3.20.1/examples/data/dot.png'
    } ) )
} ) );

vectorSource.addFeature(pointInMap);

我将颜色定义为Openlayers 3 API states应该定义的颜色，我也尝试了其他一些方法，但根本没有用。

你可以找到一个活的 jsfiddle here。我注释了完成颜色分配的代码，但是如果您取消注释其中一行，您会看到甚至没有显示该图标。

Answer 1

我也遇到了同样的问题。您需要添加 crossOrigin: 'anonymous',

rome.setStyle(new ol.style.Style({
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        color: '#8959A8',
        crossOrigin: 'anonymous',
        src: 'https://openlayers.org/en/v3.20.1/examples/data/dot.png'
    }))
}));

请找到对应的thread and explanation:

Note that icon files need to obey the same origin policy or send proper CORS headers for this to work. When relying on CORS headers, the ol.style.Icon must be configured with crossOrigin: 'anonymous'.

Answer 2

为什么不使用 svg？

例如：<svg width="50" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg" ><circle cx="25" cy="25" r="5" stroke="black" stroke-width="3" fill="rbg(113, 140, 0 )"/></svg>

然后您可以将其用作 src:

这是 jsfiddle：https://jsfiddle.net/v89ryfas/3/

希望对您有所帮助！

在 OpenLayers 3 中设置图标颜色的问题

Issues setting Icon Colors in OpenLayers 3

javascript

maps

icons

openstreetmap

openlayers-3