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

【问题标题】：Issues setting Icon Colors in OpenLayers 3在 OpenLayers 3 中设置图标颜色的问题
【发布时间】：2017-01-31 08:37:13
【问题描述】：

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

我已经查看了 Openlayers 站点中的 Icon Colors example，但即使使用我们在那里找到的代码，它也不起作用。如果我们在示例中单击“编辑”按钮，则会打开一个 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。我对完成颜色分配的代码进行了注释，但是如果您取消注释其中一行，您将看到图标甚至没有显示。

【问题讨论】：

标签： javascript icons maps openstreetmap openlayers-3

【解决方案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和explanation：

请注意，图标文件需要遵守相同的来源策略或发送正确的 CORS 标头才能使其正常工作。依赖 CORS 标头时，ol.style.Icon 必须配置为 crossOrigin: 'anonymous'。

【讨论】：

非常感谢！很好的解决方案，有很好的链接！但是，虽然它可以在 jsfiddle 上运行，但我无法让它在真实环境中运行。在我的本地盒子里，它还没有填充任何颜色：S
您确定使用 3.13.0（或更高）版本的 Openlayers 吗？
如果您使用的是来自 Openlayers 的图标，Access-Control-Allow-Origin :"*" 已经定义。但是，如果您使用本地服务器中的图像或其他图像，则需要从您的服务器设置Access-Control-Allow-Origin。我被这一步困住了，所以从那里我不会有太大帮助。
谢谢，使用的 OpenLayers 版本是 3.3.0。我将其更改为 v3.20.1（这是 OpenLayers 站点中的最新版本，我真的不知道 3.3.0 是从哪里来的……）现在它可以完美运行了！ :D 根本不需要更改 Access-Control-Allow-Origin

【解决方案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/

希望这会有所帮助！

【讨论】：

谢谢！这将是一个可能的解决方案，但我想尽可能地设置与示例相似的特定图片。