0

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
})]
  • Maybe this will help, although it handles circles instead of polygons: gis.stackexchange.com/questions/58570/… – HimBromBeere Nov 25 '15 at 15:56
  • The problem is exactly that OpenLayers only provides Circle, Icon and RegularShape as "point" styles. I need to define a custom shape that doesn't fit into any of these types. – Thiatt Nov 25 '15 at 16:44
1

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'
  }))
});
  • RegularShape only allows for regular polygons/stars (each side the same size), I need an isosceles triangle. The second approach is what I have right now, but I need to change it because I need to represent my features with arbitrary colors, and this is infeasible using image Icons. – Thiatt Nov 26 '15 at 0:11
  • isosceles triangle is a regural shape. isnt it? No matter the title the sample I provide is an isosceles triangle. Did you try it? – pavlos Nov 26 '15 at 8:22
  • As you can see in the example you provided (which has similar code to what you posted), thar code generates an equilateral triangle. – Thiatt Nov 26 '15 at 12:06
  • equilateral triangle is isosceled as well in terms of geometry. So now its clear, you strictly want to produce isosceled triagles and not equilateral. As far as I know ol3 doesnt provide a direct way to do your job. The code snip you allready use, seems to me the only way. What is wrong with it? – pavlos Nov 26 '15 at 12:35
  • You're right, I'm sorry for my geometrical imprecision ;) The problem with the snippet I posted is that Geometries (in Styles at least) represent actual physical coordinates, so a polygon style will represent an actual physical area instead a point. – Thiatt Nov 26 '15 at 14:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.