如何在openlayers3中更改图像颜色？

Question

I am new to openlayers3. I am showing point as a image but I want to change color of image dynamically.Is it possible in openlayers3 or have any other facility like canvas in openlayers3?

var iconStyle = new ol.style.Style({ 
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
         anchor: [0.5, 46], 
         anchorXUnits: 'fraction', 
         anchorYUnits: 'pixels', 
         src: 'data/icon.png' 
    })) 
}); 

Answer 1

Taking Icon Colors as starting point where they use a transparent PNG with ol.Color option to have multiple color dots I've tried to change the colors like this without success...

 var london = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.12755, 51.507222])) }); london.setStyle(new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ color: '#ff0000', crossOrigin: 'anonymous', src: 'https://openlayers.org/en/v4.1.1/examples/data/dot.png' })) })); var vectorSource = new ol.source.Vector({ features: [london] }); var vectorLayer = new ol.layer.Vector({ source: vectorSource }); var rasterLayer = new ol.layer.Tile({ source: new ol.source.TileJSON({ url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure', crossOrigin: '' }) }); var map = new ol.Map({ layers: [rasterLayer, vectorLayer], target: document.getElementById('map'), view: new ol.View({ center: ol.proj.fromLonLat([2.896372, 44.60240]), zoom: 3 }) }); map.on('singleclick', function (event) { // Use 'pointermove' to capture mouse movement over the feature map.forEachFeatureAtPixel(event.pixel, function (feature, layer) { /* Get the current image instance and its color */ var image = feature.getStyle().getImage(); console.log(image.getColor()); /* Color gets stored in image.i, but there's no setter */ console.log(image.i); /* Trying to force the color change: */ image.i = [0, 255, 0, 1]; /* Dispatch the changed() event on layer, to force styles reload */ layer.changed(); console.log(image.getColor()); // Logs new color, but it doesn't work... }); }); 

 <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <script src="https://openlayers.org/en/v4.1.1/build/ol.js"></script> <div id="map" class="map"></div> 

See how you can retrieve an icon's color like this:

var image = feature.getStyle().getImage(),
    color = image.getColor(); // returns [R, G, B, alpha]

but there's no setColor() method, so there's no way to change the color in runtime...

---

EDIT: Reviewing again your question and your code, I've noticed you never set a color for your icon, so maybe you don't really want to actually change the color in response to an event but just set a color. If that's what you want, then it's easy:

var iconStyle = new ol.style.Style({ 
     image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
         anchor: [0.5, 46], 
         anchorXUnits: 'fraction', 
         anchorYUnits: 'pixels', 
         src: 'data/icon.png',
         color: '#ff0000' // allows HEX as String or RGB(a) as Array
     })) 
});

See: http://openlayers.org/en/latest/apidoc/ol.style.Icon.html