[GIS] Custom styling for cluster images in OpenLayers 3

html5openlayers

new with OpenLayers 3.

While it is possible to generate simple polygons and circles (like in the cluster example) I wish to generate a more complex Cluster style that varies depending on the features contained in the cluster.

For instance, I would like to generate a dynamic pie chart based on values. It is possible to render this client-side using HTML5 canvas function (arc()) and friends, but I cannot find a way to generate such a drawing using generic canvas primitives within OL3's styles.

Can anybody point me in the right direction? If impossible, I'll "enhance" OL3 with the missing functionality…

Best Answer

If you convert a canvas to a HTML Image, you can use the ol.style.Icon to display your canvas.

Given that canvas is a ready canvas to be used, you must use a style like this:

 var image = new Image();
 image.src = canvas.toDataURL("image/png");

 style = new ol.style.Style({
    image: new ol.style.Icon({
       img: image,
       imgSize: [canvas.width,canvas.height],
      })
 });

and then style it using something like:

var clusters = new ol.layer.Vector({
          source: clusterSource,
          style: style
        });
Related Question