Custom vector shape markers in OpenLayers 3

Question

I have a OpenLayers 3 map on which I'm showing all kinds of data. One of them is showing boats that are detected by a nearby radar. Currently I'm displaying boats as a simple vector Circle. I'd like to display it as a vector shaped as a boat.

As far as I'm informed, my best bet is using a *.png icon, and doing something like this:

style: new ol.style.Icon({
  image: new ol.style.Icon(({
    anchor: [0.5, 0.5],
    anchorXUnits: 'fraction',
    anchorYUnits: 'fraction',
    opacity: 1,
    scale: 1,
    src: '/Content/images/boat.png',
    rotation: 0
  }))
});

This works but I'd like to have a vector that doesn't scale when i zoom in/out. My current solution for some different data is displaying a rectangle, but it scales when zooming:

var style = (function () {
  function (feature, resolution) {
  // font size
  if (resolution > 0.4) var fontSize = '12px';
  else var fontSize = '14px';

  var temperature = feature.get('temperature') || '-';
  temperature = temperature.replace(/,/g, '.');

  return [new ol.style.Style({
    fill: fill,
    stroke: stroke,
    text: new ol.style.Text({
      font: 'bold ' + fontSize + ' helvetica,sans-serif',
      text: Math.round(temperature * 100) / 100 + '°C',
      fill: new ol.style.Fill({ color: '#000' })
    }),
    geometry: function (feature) {
      var startingCoordinates = feature.getGeometry().getCoordinates();
      var coordinates = [[
          [startingCoordinates[0] + 0, startingCoordinates[1] + 0],
          [startingCoordinates[0] + 33, startingCoordinates[1] + 0],
          [startingCoordinates[0] + 33, startingCoordinates[1] + (-11.35)],
          [startingCoordinates[0] + 0, startingCoordinates[1] + (-11.35)],
          [startingCoordinates[0] + 0, startingCoordinates[1] + 0]
      ]];

      return new ol.geom.Polygon(coordinates);
      }
    })]
  }
})()

Is there a better solution for this than using startingCoordinates + (constant * resolution)? Are there any significant performance differences in using vector vs. png? Thanks

EDIT: After consulting with few colleagues of mine, I'm basically trying to have this http://openlayers.org/en/v3.5.0/examples/regularshape.html but with a custom shape.

EDIT2: Actually more like this http://dev.openlayers.org/examples/graphic-name.html 'The named symbols "lightning", "rectangle" and "church" are user defined.'

Answer 1

I know this is an old question but answering for others as this was the top result while I was looking into how to do this.

My solution is to use a data:image/svg+xml with an svg to provide an icon you can programmatically generate

new ol.style.Style({
    image: new ol.style.Icon({
        // svg of an equilateral triangle 25px wide at the base
        src: `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="21.65" width="25" id="canvas"><polygon points="0,0 25,0 12.5,21.65" style="fill:rgba(0,0,0,1);"></polygon></svg>')}`,
    }),
})

Note: you don't need to base64 encode svg in a data url but you do need to encodeURIComponent() it for non webkit browsers.