Icon Pixel Operations
Example using an icon to symbolize a point. Click on the icon to select it, and it will be rendered using its negative image.
Related API documentation:
<!DOCTYPE html> <html> <head> <title>Icon Pixel Operations</title> <link rel="stylesheet" href="http://openlayers.org/en/v3.13.0/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/v3.13.0/build/ol.js"></script> </head> <body> <div id="map" class="map"></div> <script> function createStyle(src, img) { return new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 0.96], src: src, img: img, imgSize: img ? [img.width, img.height] : undefined })) }); } var iconFeature = new ol.Feature(new ol.geom.Point([0, 0])); iconFeature.set('style', createStyle('data/icon.png', undefined)); var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.Stamen({layer: 'watercolor'}) }), new ol.layer.Vector({ style: function(feature) { return feature.get('style'); }, source: new ol.source.Vector({features: [iconFeature]}) }) ], target: document.getElementById('map'), view: new ol.View({ center: [0, 0], zoom: 3 }) }); var selectStyle = {}; var select = new ol.interaction.Select({ style: function(feature) { var image = feature.get('style').getImage().getImage(); if (!selectStyle[image.src]) { var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.width = image.width; canvas.height = image.height; context.drawImage(image, 0, 0, image.width, image.height); var imageData = context.getImageData(0, 0, canvas.width, canvas.height); var data = imageData.data; for (var i = 0, ii = data.length; i < ii; i = i + (i % 4 == 2 ? 2 : 1)) { data[i] = 255 - data[i]; } context.putImageData(imageData, 0, 0); selectStyle[image.src] = createStyle(undefined, canvas); } return selectStyle[image.src]; } }); map.addInteraction(select); map.on('pointermove', function(evt) { map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : ''; }); </script> </body> </html>