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

Question

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

我已经看过 Icon Colors example在 Openlayers 站点中，但即使使用我们在那里找到的代码，它也不起作用。如果我们单击示例中的“编辑”按钮，则会打开一个 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和 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'.