[GIS] Openlayers 3 custom Polygon feature

javascriptopenlayers

I'm trying to create a custom Polygon style for my layer style.

I receive some information about position, orientation and age for a number of objects and I want to represent those as zoom independent (like using Icons or RegularShapes) isosceles triangles, pointing at an angle and color-coded according to age.

I have a good idea of the color-coding and rotation part, but I'm stumped at creating an isosceles triangle using the style objects provided by OpenLayers.

This is what I have so far:

style = [new ol.style.Style({
    geometry: function(feature) {
        return new ol.geom.Polygon([[
            [0, 0],
            [2, 0],
            [1, 3]
        ]]);
    },
    fill: new ol.style.Fill({color: '#000'}) //black right now
})]

Best Answer

this will create a triangle 

new ol.style.Style({
image: new ol.style.RegularShape({
  fill: new ol.style.Fill({
  color: 'red'
  }),
  stroke: new ol.style.Stroke({
  color: 'black', 
  width: 2
  }),
  points: 3,
  radius: 10,
  rotation: Math.PI / 4,
  angle: 0
  })
})

for more symbols check this example regular shapes example

you can always use extrenal images to style your points as an alternative. something like this should work if this is your case

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