Add new className property to ol/layer/Base

src/ol/layer/Base.js

@@ -10,6 +10,7 @@ import {assign} from '../obj.js';
 
 /**
  * @typedef {Object} Options
+ * @property {string} [className='ol-layer'] A CSS class name to set to the layer element.
  * @property {number} [opacity=1] Opacity (0, 1).
  * @property {boolean} [visible=true] Visibility.
  * @property {import("../extent.js").Extent} [extent] The bounding extent for layer rendering.  The layer will not be
@@ -57,6 +58,13 @@ class BaseLayer extends BaseObject {
     properties[LayerProperty.MIN_RESOLUTION] =
        options.minResolution !== undefined ? options.minResolution : 0;
 
+    /**
+     * @type {string}
+     * @private
+     */
+    this.className_ = properties.className !== undefined ? options.className : 'ol-layer';
+    delete properties.className;
+
     this.setProperties(properties);
 
     /**
@@ -67,6 +75,13 @@ class BaseLayer extends BaseObject {
 
   }
 
+  /**
+   * @return {string} CSS class name.
+   */
+  getClassName() {
+    return this.className_;
+  }
+
   /**
    * @return {import("./Layer.js").State} Layer state.
    */

src/ol/renderer/canvas/IntermediateCanvas.js

@@ -44,7 +44,10 @@ class IntermediateCanvasRenderer extends CanvasLayerRenderer {
      * @type {CanvasRenderingContext2D}
      */
     this.layerContext = createCanvasContext2D();
-    this.layerContext.canvas.style.position = 'absolute';
+
+    const canvas = this.layerContext.canvas;
+    canvas.style.position = 'absolute';
+    canvas.className = this.getLayer().getClassName();
   }
 
   /**

src/ol/renderer/canvas/VectorLayer.js

@@ -83,6 +83,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
 
     const canvas = this.context.canvas;
     canvas.style.position = 'absolute';
+    canvas.className = this.getLayer().getClassName();
 
     listen(labelCache, EventType.CLEAR, this.handleFontsChanged_, this);
   }