Attribute based rotation and offset with OpenLayers WebGL Points Layer

Question

Using normal vector layers, I already draw directed antenna symbolizers like this:

Basically this is a point with a direction (and a horizontal beam width, but let's forget about that for now). This is what I try to recreate in OL 6.8.1 using WebGLPoints layer, but have issues with creating the correct style. I way able to rotate simple triangle symbols but they are overlapping, and they should touch by the corners:

I guess the key to the problem is setting some offset, but this is where I failed to find a working solution. This is the style I currently use:

symbol: {
    symbolType: 'triangle',
    size: ['interpolate', ['exponential', 2.5], ['zoom'], 6, 10, 20, 100],
    color: ['case',["==", ['get','band'],2100], '#aa0000',["==", ['get','band'],3500], '#00aa00', '#0000aa'  ],
    rotateWithView: true,
    offset: [ 0,0 ],
    opacity: 0.4,
    rotation: ['-', ['*', ['get','azy'] , 0.01745329251 ], 3.1415926],
}

(notes: as you can see the symbol size is zoom dependent, I use 2 different colors based on the 'band' attribute and rotate it using the 'azy' attribute (which is the desired direction in degrees, counted from N as 0, clockwise))

The rotation works okay, but for the offset, I need some help. I'm not even sure of it's affected by the rotation or not... Thanks in advance! If you have any other solution for the problem using WebGL, I'd appreciate that too!

Answer 1

So, here's the solution, thanks to @Mike! The trick is to multiply the offset with -1, so the corners of the triangles touch.

symbol: {
    symbolType: 'triangle',
    size: ['interpolate', ['exponential', 2.5], ['zoom'], 6, 10, 20, 100],
    color: ['case',["==", ['get','band'],2100], '#aa0000',["==", ['get','band'],3500], '#00aa00', '#0000aa'  ],
    rotateWithView: false,
    offset: ['array', 0, ['*', ['interpolate', ['exponential', 2.5], ['zoom'], 6, 3, 20, 48], -1] ],
    opacity: 0.75,
    rotation: ['-', ['*', ['get','azy'] , 0.01745329251 ], 3.1415926],
}

Note: the offset is smaller with 2 pixels that half the size. With half size, the triangles did not touch, had a few pixels gap. It looks like this:

Another solution is that I created a png with the desired symbol:

Note that the center of picture is the center of circle of which the sector was cut out, so when rotated, it will stay over the point of the rotation. The style is:

symbol: {
    symbolType: 'image',
    src: 'tools/testbench/olmap2/cell_symbol.png',
    size: ['interpolate', ['exponential', 2.5], ['zoom'], 6, 10, 20, 100],
    color: ['case',["==", ['get','band'],2100], '#aa0000',["==", ['get','band'],3500], '#00aa00', '#0000aa'  ],
    rotateWithView: false,
    opacity: 0.75,
    rotation: ['*', ['get','azy'] , 0.01745329251 ]
},

The result is:

This is somewhat slower, but I guess the 800x800px png is an overkill for this, so maybe downsizing it would solve the performance issue :) The pro side of this solution that I can create circle segments in different opening angles, so the antenna's (horizontal) beamwidth could be shown too. With the triangle symbolizer I cannot do this. (If later I could draw custom polygons in OL, that would be the perfect solution for this.)