WebGL / Rework symbol rendering to include circles with outlines, shapes and icons

[jahow]

This PR significantly reworks how symbols are handled in the WebGL renderers. Symbol styles now use a format that is compatible with the "flat" style format used by Canvas renderers, and which looks like this:

const iconStyle = {
  'icon-src': '../data/icon.png',
  'icon-width': 40,
  'icon-height': 80,
  'icon-offset': [5, 10],
  'icon-size': [20, 40],
};

const circleStyle = {
  'circle-radius': ['get', 'size'],
  'circle-fill-color': 'rgba(120, 140, 255, 0.6)',
  'circle-stroke-width': 3,
  'circle-stroke-color': 'blue',
};

const starStyle = {
  'shape-points': 4,
  'shape-radius1': 12,
  'shape-radius2': 5,
  'shape-fill-color': 'orange',
};

The previous symbol style format is not supported anymore: using it will simply not show anything on screen.

New styling possibilities include:

• circles with outline
• regular shapes or stars with or without outlines
• icons specified as path or Image, with displacement, offset, anchor etc.

Note: this will break existing applications using WebGLPointsLayer with the previous style format. I figured that since we're moving towards a new major version, it was the right time to introduce a breaking change (which only affects parts of the API marked as experimental anyway).

I added several rendering tests to better guarantee the output of the rendering in WebGL.

Remaining to do:

• fix heatmap layer
• fix remaining broken tests
• update the change log

This work is sponsored by BSW-Hamburg and Landesbetrieb Geoinformation und Vermessung Hamburg.

[github-actions]

📦 Preview the website for this branch here: https://deploy-preview-14883--ol-site.netlify.app/.

[jahow]

This is ready for review, please let me know if I need to subdivide some commits further to make this easier to read, thanks in advance!

[tschaub]

@jahow - this looks great! I meant to review it earlier, but then lost track of it.