How to define size of a webgl-point in openlayers?

Question

I created circles using webgl point layer, but I don't know how to change size. How do I do that? Base link: https://openlayers.org/en/latest/examples/webgl-points-layer.html My style are below:

style: {
    symbol: {
      symbolType: 'circle',
      size: [
        "interpolate",
        [
          "exponential",
          2.5
        ],
        [
          "zoom"
        ],
        2,
        1,
        14,
        32
      ],
      color: 'rgba(255,0,0,0.5)'
    }
  }

I need the behavior to be the same as these circles: http://smartcitybr-app-isolated-functions.s3-website-us-east-1.amazonaws.com/index.html

Answer 1

It works in the example, although the size does not increase above zoom 14. You could change the max zoom and size if you wanted, also reducing the exponent base to 2 makes the transition better relate to the changing resolution.

"size": [
  "interpolate",
  [
    "exponential",
    2
  ],
  [
    "zoom"
  ],
  2,
  1,
  28,
  256
],

The only polygons directly supported are triangle and square. They can be scaled in both dimensions as well as rotated, so you could get a rectangle using:

  "symbolType": "square",
  "size": ["array", ["/", 2000, ["resolution"]], ["/", 1000, ["resolution"]]],

For more complex polygons you would need to use "symbolType": "image", and supply an icon src which could be a dataURL for something you draw on a 2d canvas, or you could use OpenLayers to produce the shape, for example:

  symbolType: 'image',
  src: new RegularShape({
    fill: new Fill({color: 'red'}),
    stroke: new Stroke({color: 'black', width: 1}),
    points: 5,
    radius: 10,
    radius2: 4,
    angle: 0,
  }).getImage(10).toDataURL(),
  "size": ["/", 1000, ["resolution"]],