Merge branch 'openlayers:main' into scalebarcolors

examples/d3.js

@@ -1,5 +1,4 @@
 import Map from '../src/ol/Map.js';
-import SourceState from '../src/ol/source/State.js';
 import Stamen from '../src/ol/source/Stamen.js';
 import View from '../src/ol/View.js';
 import {Layer, Tile as TileLayer} from '../src/ol/layer.js';
@@ -21,7 +20,7 @@ class CanvasLayer extends Layer {
   }
 
   getSourceState() {
-    return SourceState.READY;
+    return 'ready';
   }
 
   render(frameState) {

src/ol/Overlay.js

@@ -3,12 +3,18 @@
  */
 import BaseObject from './Object.js';
 import MapEventType from './MapEventType.js';
-import OverlayPositioning from './OverlayPositioning.js';
 import {CLASS_SELECTABLE} from './css.js';
 import {containsExtent} from './extent.js';
 import {listen, unlistenByKey} from './events.js';
 import {outerHeight, outerWidth, removeChildren, removeNode} from './dom.js';
 
+/**
+ * @typedef {'bottom-left' | 'bottom-center' | 'bottom-right' | 'center-left' | 'center-center' | 'center-right' | 'top-left' | 'top-center' | 'top-right'} Positioning
+ * The overlay position: `'bottom-left'`, `'bottom-center'`,  `'bottom-right'`,
+ * `'center-left'`, `'center-center'`, `'center-right'`, `'top-left'`,
+ * `'top-center'`, or `'top-right'`.
+ */
+
 /**
  * @typedef {Object} Options
  * @property {number|string} [id] Set the overlay id. The overlay id can be used
@@ -21,7 +27,7 @@ import {outerHeight, outerWidth, removeChildren, removeNode} from './dom.js';
  * shifts the overlay down.
  * @property {import("./coordinate.js").Coordinate} [position] The overlay position
  * in map projection.
- * @property {import("./OverlayPositioning.js").default} [positioning='top-left'] Defines how
+ * @property {Positioning} [positioning='top-left'] Defines how
  * the overlay is actually positioned with respect to its `position` property.
  * Possible values are `'bottom-left'`, `'bottom-center'`, `'bottom-right'`,
  * `'center-left'`, `'center-center'`, `'center-right'`, `'top-left'`,
@@ -215,13 +221,7 @@ class Overlay extends BaseObject {
 
     this.setOffset(options.offset !== undefined ? options.offset : [0, 0]);
 
-    this.setPositioning(
+    this.setPositioning(options.positioning || 'top-left');
-      options.positioning !== undefined
-        ? /** @type {import("./OverlayPositioning.js").default} */ (
-            options.positioning
-          )
-        : OverlayPositioning.TOP_LEFT
-    );
 
     if (options.position !== undefined) {
       this.setPosition(options.position);
@@ -285,15 +285,13 @@ class Overlay extends BaseObject {
 
   /**
    * Get the current positioning of this overlay.
-   * @return {import("./OverlayPositioning.js").default} How the overlay is positioned
+   * @return {Positioning} How the overlay is positioned
    *     relative to its point on the map.
    * @observable
    * @api
    */
   getPositioning() {
-    return /** @type {import("./OverlayPositioning.js").default} */ (
+    return /** @type {Positioning} */ (this.get(Property.POSITIONING));
-      this.get(Property.POSITIONING)
-    );
   }
 
   /**
@@ -503,7 +501,7 @@ class Overlay extends BaseObject {
 
   /**
    * Set the positioning for this overlay.
-   * @param {import("./OverlayPositioning.js").default} positioning how the overlay is
+   * @param {Positioning} positioning how the overlay is
    *     positioned relative to its point on the map.
    * @observable
    * @api
@@ -559,28 +557,28 @@ class Overlay extends BaseObject {
     let posX = '0%';
     let posY = '0%';
     if (
-      positioning == OverlayPositioning.BOTTOM_RIGHT ||
+      positioning == 'bottom-right' ||
-      positioning == OverlayPositioning.CENTER_RIGHT ||
+      positioning == 'center-right' ||
-      positioning == OverlayPositioning.TOP_RIGHT
+      positioning == 'top-right'
     ) {
       posX = '-100%';
     } else if (
-      positioning == OverlayPositioning.BOTTOM_CENTER ||
+      positioning == 'bottom-center' ||
-      positioning == OverlayPositioning.CENTER_CENTER ||
+      positioning == 'center-center' ||
-      positioning == OverlayPositioning.TOP_CENTER
+      positioning == 'top-center'
     ) {
       posX = '-50%';
     }
     if (
-      positioning == OverlayPositioning.BOTTOM_LEFT ||
+      positioning == 'bottom-left' ||
-      positioning == OverlayPositioning.BOTTOM_CENTER ||
+      positioning == 'bottom-center' ||
-      positioning == OverlayPositioning.BOTTOM_RIGHT
+      positioning == 'bottom-right'
     ) {
       posY = '-100%';
     } else if (
-      positioning == OverlayPositioning.CENTER_LEFT ||
+      positioning == 'center-left' ||
-      positioning == OverlayPositioning.CENTER_CENTER ||
+      positioning == 'center-center' ||
-      positioning == OverlayPositioning.CENTER_RIGHT
+      positioning == 'center-right'
     ) {
       posY = '-50%';
     }

src/ol/OverlayPositioning.js

@@ -1,21 +0,0 @@
-/**
- * @module ol/OverlayPositioning
- */
-
-/**
- * Overlay position: `'bottom-left'`, `'bottom-center'`,  `'bottom-right'`,
- * `'center-left'`, `'center-center'`, `'center-right'`, `'top-left'`,
- * `'top-center'`, `'top-right'`
- * @enum {string}
- */
-export default {
-  BOTTOM_LEFT: 'bottom-left',
-  BOTTOM_CENTER: 'bottom-center',
-  BOTTOM_RIGHT: 'bottom-right',
-  CENTER_LEFT: 'center-left',
-  CENTER_CENTER: 'center-center',
-  CENTER_RIGHT: 'center-right',
-  TOP_LEFT: 'top-left',
-  TOP_CENTER: 'top-center',
-  TOP_RIGHT: 'top-right',
-};

src/ol/VectorRenderTile.js

@@ -2,7 +2,7 @@
  * @module ol/VectorRenderTile
  */
 import Tile from './Tile.js';
-import {createCanvasContext2D} from './dom.js';
+import {createCanvasContext2D, releaseCanvas} from './dom.js';
 import {getUid} from './util.js';
 
 /**
@@ -154,7 +154,9 @@ class VectorRenderTile extends Tile {
    */
   release() {
     for (const key in this.context_) {
-      canvasPool.push(this.context_[key].canvas);
+      const context = this.context_[key];
+      releaseCanvas(context);
+      canvasPool.push(context.canvas);
       delete this.context_[key];
     }
     super.release();

src/ol/View.js

@@ -2,7 +2,6 @@
  * @module ol/View
  */
 import BaseObject from './Object.js';
-import GeometryType from './geom/GeometryType.js';
 import Units from './proj/Units.js';
 import ViewHint from './ViewHint.js';
 import ViewProperty from './ViewProperty.js';
@@ -1345,7 +1344,7 @@ class View extends BaseObject {
       assert(!isEmpty(geometryOrExtent), 25); // Cannot fit empty extent provided as `geometry`
       const extent = fromUserExtent(geometryOrExtent, this.getProjection());
       geometry = polygonFromExtent(extent);
-    } else if (geometryOrExtent.getType() === GeometryType.CIRCLE) {
+    } else if (geometryOrExtent.getType() === 'Circle') {
       const extent = fromUserExtent(
         geometryOrExtent.getExtent(),
         this.getProjection()

src/ol/control/OverviewMap.js

@@ -8,7 +8,6 @@ import MapEventType from '../MapEventType.js';
 import MapProperty from '../MapProperty.js';
 import ObjectEventType from '../ObjectEventType.js';
 import Overlay from '../Overlay.js';
-import OverlayPositioning from '../OverlayPositioning.js';
 import PluggableMap from '../PluggableMap.js';
 import View from '../View.js';
 import ViewProperty from '../ViewProperty.js';
@@ -205,7 +204,7 @@ class OverviewMap extends Control {
      */
     this.boxOverlay_ = new Overlay({
       position: [0, 0],
-      positioning: OverlayPositioning.CENTER_CENTER,
+      positioning: 'center-center',
       element: box,
     });
     this.ovmap_.addOverlay(this.boxOverlay_);

src/ol/css.js

@@ -114,11 +114,3 @@ export const getFontParameters = function (fontSpec) {
   style.families = style.family.split(/,\s?/);
   return style;
 };
-
-/**
- * @param {number} opacity Opacity (0..1).
- * @return {string} CSS opacity.
- */
-export function cssOpacity(opacity) {
-  return opacity === 1 ? '' : String(Math.round(opacity * 100) / 100);
-}

src/ol/dom.js

@@ -40,6 +40,18 @@ export function createCanvasContext2D(
   );
 }
 
+/**
+ * Releases canvas memory to avoid exceeding memory limits in Safari.
+ * See https://pqina.nl/blog/total-canvas-memory-use-exceeds-the-maximum-limit/
+ * @param {CanvasRenderingContext2D} context Context.
+ */
+export function releaseCanvas(context) {
+  const canvas = context.canvas;
+  canvas.width = 1;
+  canvas.height = 1;
+  context.clearRect(0, 0, 1, 1);
+}
+
 /**
  * Get the current computed width for the given element including margin,
  * padding and border.

src/ol/extent.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/extent
  */
-import Corner from './extent/Corner.js';
 import Relationship from './extent/Relationship.js';
 import {assert} from './asserts.js';
 
@@ -11,6 +10,11 @@ import {assert} from './asserts.js';
  * @api
  */
 
+/**
+ * Extent corner.
+ * @typedef {'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'} Corner
+ */
+
 /**
  * Build an extent that includes all given coordinates.
  *
@@ -484,18 +488,18 @@ export function getCenter(extent) {
 /**
  * Get a corner coordinate of an extent.
  * @param {Extent} extent Extent.
- * @param {import("./extent/Corner.js").default} corner Corner.
+ * @param {Corner} corner Corner.
  * @return {import("./coordinate.js").Coordinate} Corner coordinate.
  */
 export function getCorner(extent, corner) {
   let coordinate;
-  if (corner === Corner.BOTTOM_LEFT) {
+  if (corner === 'bottom-left') {
     coordinate = getBottomLeft(extent);
-  } else if (corner === Corner.BOTTOM_RIGHT) {
+  } else if (corner === 'bottom-right') {
     coordinate = getBottomRight(extent);
-  } else if (corner === Corner.TOP_LEFT) {
+  } else if (corner === 'top-left') {
     coordinate = getTopLeft(extent);
-  } else if (corner === Corner.TOP_RIGHT) {
+  } else if (corner === 'top-right') {
     coordinate = getTopRight(extent);
   } else {
     assert(false, 13); // Invalid corner
@@ -531,6 +535,29 @@ export function getForViewAndSize(
   size,
   opt_extent
 ) {
+  const [x0, y0, x1, y1, x2, y2, x3, y3] = getRotatedViewport(
+    center,
+    resolution,
+    rotation,
+    size
+  );
+  return createOrUpdate(
+    Math.min(x0, x1, x2, x3),
+    Math.min(y0, y1, y2, y3),
+    Math.max(x0, x1, x2, x3),
+    Math.max(y0, y1, y2, y3),
+    opt_extent
+  );
+}
+
+/**
+ * @param {import("./coordinate.js").Coordinate} center Center.
+ * @param {number} resolution Resolution.
+ * @param {number} rotation Rotation.
+ * @param {import("./size.js").Size} size Size.
+ * @return {Array<number>} Linear ring representing the viewport.
+ */
+export function getRotatedViewport(center, resolution, rotation, size) {
   const dx = (resolution * size[0]) / 2;
   const dy = (resolution * size[1]) / 2;
   const cosRotation = Math.cos(rotation);
@@ -541,21 +568,18 @@ export function getForViewAndSize(
   const ySin = dy * sinRotation;
   const x = center[0];
   const y = center[1];
-  const x0 = x - xCos + ySin;
+  return [
-  const x1 = x - xCos - ySin;
+    x - xCos + ySin,
-  const x2 = x + xCos - ySin;
+    y - xSin - yCos,
-  const x3 = x + xCos + ySin;
+    x - xCos - ySin,
-  const y0 = y - xSin - yCos;
+    y - xSin + yCos,
-  const y1 = y - xSin + yCos;
+    x + xCos - ySin,
-  const y2 = y + xSin + yCos;
+    y + xSin + yCos,
-  const y3 = y + xSin - yCos;
+    x + xCos + ySin,
-  return createOrUpdate(
+    y + xSin - yCos,
-    Math.min(x0, x1, x2, x3),
+    x - xCos + ySin,
-    Math.min(y0, y1, y2, y3),
+    y - xSin - yCos,
-    Math.max(x0, x1, x2, x3),
+  ];
-    Math.max(y0, y1, y2, y3),
-    opt_extent
-  );
 }
 
 /**

src/ol/extent/Corner.js

@@ -1,14 +0,0 @@
-/**
- * @module ol/extent/Corner
- */
-
-/**
- * Extent corner.
- * @enum {string}
- */
-export default {
-  BOTTOM_LEFT: 'bottom-left',
-  BOTTOM_RIGHT: 'bottom-right',
-  TOP_LEFT: 'top-left',
-  TOP_RIGHT: 'top-right',
-};

src/ol/featureloader.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/featureloader
  */
-import FormatType from './format/FormatType.js';
 import {VOID} from './functions.js';
 
 /**
@@ -72,7 +71,7 @@ export function loadFeaturesXhr(
     typeof url === 'function' ? url(extent, resolution, projection) : url,
     true
   );
-  if (format.getType() == FormatType.ARRAY_BUFFER) {
+  if (format.getType() == 'arraybuffer') {
     xhr.responseType = 'arraybuffer';
   }
   xhr.withCredentials = withCredentials;
@@ -86,9 +85,9 @@ export function loadFeaturesXhr(
       const type = format.getType();
       /** @type {Document|Node|Object|string|undefined} */
       let source;
-      if (type == FormatType.JSON || type == FormatType.TEXT) {
+      if (type == 'json' || type == 'text') {
         source = xhr.responseText;
-      } else if (type == FormatType.XML) {
+      } else if (type == 'xml') {
         source = xhr.responseXML;
         if (!source) {
           source = new DOMParser().parseFromString(
@@ -96,7 +95,7 @@ export function loadFeaturesXhr(
             'application/xml'
           );
         }
-      } else if (type == FormatType.ARRAY_BUFFER) {
+      } else if (type == 'arraybuffer') {
         source = /** @type {ArrayBuffer} */ (xhr.response);
       }
       if (source) {

src/ol/format/EsriJSON.js

@@ -3,7 +3,6 @@
  */
 import Feature from '../Feature.js';
 import GeometryLayout from '../geom/GeometryLayout.js';
-import GeometryType from '../geom/GeometryType.js';
 import JSONFeature from './JSONFeature.js';
 import LineString from '../geom/LineString.js';
 import LinearRing from '../geom/LinearRing.js';
@@ -43,27 +42,29 @@ import {transformGeometryWithOptions} from './Feature.js';
 
 /**
  * @const
- * @type {Object<import("../geom/GeometryType.js").default, function(EsriJSONGeometry): import("../geom/Geometry.js").default>}
+ * @type {Object<import("../geom/Geometry.js").Type, function(EsriJSONGeometry): import("../geom/Geometry.js").default>}
  */
-const GEOMETRY_READERS = {};
+const GEOMETRY_READERS = {
-GEOMETRY_READERS[GeometryType.POINT] = readPointGeometry;
+  Point: readPointGeometry,
-GEOMETRY_READERS[GeometryType.LINE_STRING] = readLineStringGeometry;
+  LineString: readLineStringGeometry,
-GEOMETRY_READERS[GeometryType.POLYGON] = readPolygonGeometry;
+  Polygon: readPolygonGeometry,
-GEOMETRY_READERS[GeometryType.MULTI_POINT] = readMultiPointGeometry;
+  MultiPoint: readMultiPointGeometry,
-GEOMETRY_READERS[GeometryType.MULTI_LINE_STRING] = readMultiLineStringGeometry;
+  MultiLineString: readMultiLineStringGeometry,
-GEOMETRY_READERS[GeometryType.MULTI_POLYGON] = readMultiPolygonGeometry;
+  MultiPolygon: readMultiPolygonGeometry,
+};
 
 /**
  * @const
- * @type {Object<string, function(import("../geom/Geometry.js").default, import("./Feature.js").WriteOptions=): (EsriJSONGeometry)>}
+ * @type {Object<import("../geom/Geometry.js").Type, function(import("../geom/Geometry.js").default, import("./Feature.js").WriteOptions=): (EsriJSONGeometry)>}
  */
-const GEOMETRY_WRITERS = {};
+const GEOMETRY_WRITERS = {
-GEOMETRY_WRITERS[GeometryType.POINT] = writePointGeometry;
+  Point: writePointGeometry,
-GEOMETRY_WRITERS[GeometryType.LINE_STRING] = writeLineStringGeometry;
+  LineString: writeLineStringGeometry,
-GEOMETRY_WRITERS[GeometryType.POLYGON] = writePolygonGeometry;
+  Polygon: writePolygonGeometry,
-GEOMETRY_WRITERS[GeometryType.MULTI_POINT] = writeMultiPointGeometry;
+  MultiPoint: writeMultiPointGeometry,
-GEOMETRY_WRITERS[GeometryType.MULTI_LINE_STRING] = writeMultiLineStringGeometry;
+  MultiLineString: writeMultiLineStringGeometry,
-GEOMETRY_WRITERS[GeometryType.MULTI_POLYGON] = writeMultiPolygonGeometry;
+  MultiPolygon: writeMultiPolygonGeometry,
+};
 
 /**
  * @typedef {Object} Options
@@ -255,28 +256,28 @@ function readGeometry(object, opt_options) {
   if (!object) {
     return null;
   }
-  /** @type {import("../geom/GeometryType.js").default} */
+  /** @type {import("../geom/Geometry.js").Type} */
   let type;
   if (typeof object['x'] === 'number' && typeof object['y'] === 'number') {
-    type = GeometryType.POINT;
+    type = 'Point';
   } else if (object['points']) {
-    type = GeometryType.MULTI_POINT;
+    type = 'MultiPoint';
   } else if (object['paths']) {
     const esriJSONPolyline = /** @type {EsriJSONPolyline} */ (object);
     if (esriJSONPolyline.paths.length === 1) {
-      type = GeometryType.LINE_STRING;
+      type = 'LineString';
     } else {
-      type = GeometryType.MULTI_LINE_STRING;
+      type = 'MultiLineString';
     }
   } else if (object['rings']) {
     const esriJSONPolygon = /** @type {EsriJSONPolygon} */ (object);
     const layout = getGeometryLayout(esriJSONPolygon);
     const rings = convertRings(esriJSONPolygon.rings, layout);
     if (rings.length === 1) {
-      type = GeometryType.POLYGON;
+      type = 'Polygon';
       object = assign({}, object, {['rings']: rings[0]});
     } else {
-      type = GeometryType.MULTI_POLYGON;
+      type = 'MultiPolygon';
       object = assign({}, object, {['rings']: rings});
     }
   }

src/ol/format/Feature.js

@@ -51,6 +51,10 @@ import {
  * Default is no rounding.
  */
 
+/**
+ * @typedef {'arraybuffer' | 'json' | 'text' | 'xml'} Type
+ */
+
 /**
  * @classdesc
  * Abstract base class; normally only used for creating subclasses and not
@@ -134,7 +138,7 @@ class FeatureFormat {
 
   /**
    * @abstract
-   * @return {import("./FormatType.js").default} Format.
+   * @return {Type} The format type.
    */
   getType() {
     return abstract();

src/ol/format/FormatType.js

@@ -1,13 +0,0 @@
-/**
- * @module ol/format/FormatType
- */
-
-/**
- * @enum {string}
- */
-export default {
-  ARRAY_BUFFER: 'arraybuffer',
-  JSON: 'json',
-  TEXT: 'text',
-  XML: 'xml',
-};

src/ol/format/GPX.js

@@ -3,7 +3,6 @@
  */
 import Feature from '../Feature.js';
 import GeometryLayout from '../geom/GeometryLayout.js';
-import GeometryType from '../geom/GeometryType.js';
 import LineString from '../geom/LineString.js';
 import MultiLineString from '../geom/MultiLineString.js';
 import Point from '../geom/Point.js';
@@ -848,7 +847,7 @@ function writeRte(node, feature, objectStack) {
   const context = {node: node};
   context['properties'] = properties;
   const geometry = feature.getGeometry();
-  if (geometry.getType() == GeometryType.LINE_STRING) {
+  if (geometry.getType() == 'LineString') {
     const lineString = /** @type {LineString} */ (
       transformGeometryWithOptions(geometry, true, options)
     );
@@ -882,7 +881,7 @@ function writeTrk(node, feature, objectStack) {
   const context = {node: node};
   context['properties'] = properties;
   const geometry = feature.getGeometry();
-  if (geometry.getType() == GeometryType.MULTI_LINE_STRING) {
+  if (geometry.getType() == 'MultiLineString') {
     const multiLineString = /** @type {MultiLineString} */ (
       transformGeometryWithOptions(geometry, true, options)
     );
@@ -932,7 +931,7 @@ function writeWpt(node, feature, objectStack) {
   const context = objectStack[objectStack.length - 1];
   context['properties'] = feature.getProperties();
   const geometry = feature.getGeometry();
-  if (geometry.getType() == GeometryType.POINT) {
+  if (geometry.getType() == 'Point') {
     const point = /** @type {Point} */ (
       transformGeometryWithOptions(geometry, true, options)
     );

src/ol/format/GeoJSON.js

@@ -4,7 +4,6 @@
 
 import Feature from '../Feature.js';
 import GeometryCollection from '../geom/GeometryCollection.js';
-import GeometryType from '../geom/GeometryType.js';
 import JSONFeature from './JSONFeature.js';
 import LineString from '../geom/LineString.js';
 import MultiLineString from '../geom/MultiLineString.js';
@@ -284,46 +283,46 @@ function readGeometry(object, opt_options) {
    */
   let geometry;
   switch (object['type']) {
-    case GeometryType.POINT: {
+    case 'Point': {
       geometry = readPointGeometry(/** @type {GeoJSONPoint} */ (object));
       break;
     }
-    case GeometryType.LINE_STRING: {
+    case 'LineString': {
       geometry = readLineStringGeometry(
         /** @type {GeoJSONLineString} */ (object)
       );
       break;
     }
-    case GeometryType.POLYGON: {
+    case 'Polygon': {
       geometry = readPolygonGeometry(/** @type {GeoJSONPolygon} */ (object));
       break;
     }
-    case GeometryType.MULTI_POINT: {
+    case 'MultiPoint': {
       geometry = readMultiPointGeometry(
         /** @type {GeoJSONMultiPoint} */ (object)
       );
       break;
     }
-    case GeometryType.MULTI_LINE_STRING: {
+    case 'MultiLineString': {
       geometry = readMultiLineStringGeometry(
         /** @type {GeoJSONMultiLineString} */ (object)
       );
       break;
     }
-    case GeometryType.MULTI_POLYGON: {
+    case 'MultiPolygon': {
       geometry = readMultiPolygonGeometry(
         /** @type {GeoJSONMultiPolygon} */ (object)
       );
       break;
     }
-    case GeometryType.GEOMETRY_COLLECTION: {
+    case 'GeometryCollection': {
       geometry = readGeometryCollectionGeometry(
         /** @type {GeoJSONGeometryCollection} */ (object)
       );
       break;
     }
     default: {
-      throw new Error('Unsupported GeoJSON type: ' + object.type);
+      throw new Error('Unsupported GeoJSON type: ' + object['type']);
     }
   }
   return transformGeometryWithOptions(geometry, false, opt_options);
@@ -407,56 +406,56 @@ function writeGeometry(geometry, opt_options) {
   /** @type {GeoJSONGeometry} */
   let geoJSON;
   switch (type) {
-    case GeometryType.POINT: {
+    case 'Point': {
       geoJSON = writePointGeometry(
         /** @type {Point} */ (geometry),
         opt_options
       );
       break;
     }
-    case GeometryType.LINE_STRING: {
+    case 'LineString': {
       geoJSON = writeLineStringGeometry(
         /** @type {LineString} */ (geometry),
         opt_options
       );
       break;
     }
-    case GeometryType.POLYGON: {
+    case 'Polygon': {
       geoJSON = writePolygonGeometry(
         /** @type {Polygon} */ (geometry),
         opt_options
       );
       break;
     }
-    case GeometryType.MULTI_POINT: {
+    case 'MultiPoint': {
       geoJSON = writeMultiPointGeometry(
         /** @type {MultiPoint} */ (geometry),
         opt_options
       );
       break;
     }
-    case GeometryType.MULTI_LINE_STRING: {
+    case 'MultiLineString': {
       geoJSON = writeMultiLineStringGeometry(
         /** @type {MultiLineString} */ (geometry),
         opt_options
       );
       break;
     }
-    case GeometryType.MULTI_POLYGON: {
+    case 'MultiPolygon': {
       geoJSON = writeMultiPolygonGeometry(
         /** @type {MultiPolygon} */ (geometry),
         opt_options
       );
       break;
     }
-    case GeometryType.GEOMETRY_COLLECTION: {
+    case 'GeometryCollection': {
       geoJSON = writeGeometryCollectionGeometry(
         /** @type {GeometryCollection} */ (geometry),
         opt_options
       );
       break;
     }
-    case GeometryType.CIRCLE: {
+    case 'Circle': {
       geoJSON = {
         type: 'GeometryCollection',
         geometries: [],

src/ol/format/JSONFeature.js

@@ -2,7 +2,6 @@
  * @module ol/format/JSONFeature
  */
 import FeatureFormat from './Feature.js';
-import FormatType from './FormatType.js';
 import {abstract} from '../util.js';
 
 /**
@@ -19,10 +18,10 @@ class JSONFeature extends FeatureFormat {
   }
 
   /**
-   * @return {import("./FormatType.js").default} Format.
+   * @return {import("./Feature.js").Type} Format.
    */
   getType() {
-    return FormatType.JSON;
+    return 'json';
   }
 
   /**

src/ol/format/KML.js

@@ -5,7 +5,6 @@ import Feature from '../Feature.js';
 import Fill from '../style/Fill.js';
 import GeometryCollection from '../geom/GeometryCollection.js';
 import GeometryLayout from '../geom/GeometryLayout.js';
-import GeometryType from '../geom/GeometryType.js';
 import Icon from '../style/Icon.js';
 import IconAnchorUnits from '../style/IconAnchorUnits.js';
 import IconOrigin from '../style/IconOrigin.js';
@@ -1012,16 +1011,12 @@ function createFeatureStyleFunction(
               .getGeometriesArrayRecursive()
               .filter(function (geometry) {
                 const type = geometry.getType();
-                return (
+                return type === 'Point' || type === 'MultiPoint';
-                  type === GeometryType.POINT ||
-                  type === GeometryType.MULTI_POINT
-                );
               });
             drawName = multiGeometryPoints.length > 0;
           } else {
             const type = geometry.getType();
-            drawName =
+            drawName = type === 'Point' || type === 'MultiPoint';
-              type === GeometryType.POINT || type === GeometryType.MULTI_POINT;
           }
         }
       }
@@ -1759,7 +1754,7 @@ function readMultiGeometry(node, objectStack) {
   if (homogeneous) {
     let layout;
     let flatCoordinates;
-    if (type == GeometryType.POINT) {
+    if (type == 'Point') {
       const point = geometries[0];
       layout = point.getLayout();
       flatCoordinates = point.getFlatCoordinates();
@@ -1769,13 +1764,13 @@ function readMultiGeometry(node, objectStack) {
       }
       multiGeometry = new MultiPoint(flatCoordinates, layout);
       setCommonGeometryProperties(multiGeometry, geometries);
-    } else if (type == GeometryType.LINE_STRING) {
+    } else if (type == 'LineString') {
       multiGeometry = new MultiLineString(geometries);
       setCommonGeometryProperties(multiGeometry, geometries);
-    } else if (type == GeometryType.POLYGON) {
+    } else if (type == 'Polygon') {
       multiGeometry = new MultiPolygon(geometries);
       setCommonGeometryProperties(multiGeometry, geometries);
-    } else if (type == GeometryType.GEOMETRY_COLLECTION) {
+    } else if (type == 'GeometryCollection') {
       multiGeometry = new GeometryCollection(geometries);
     } else {
       assert(false, 37); // Unknown geometry type found
@@ -1919,7 +1914,7 @@ function readStyle(node, objectStack) {
         geometry: function (feature) {
           const geometry = feature.getGeometry();
           const type = geometry.getType();
-          if (type === GeometryType.GEOMETRY_COLLECTION) {
+          if (type === 'GeometryCollection') {
             const collection =
               /** @type {import("../geom/GeometryCollection").default} */ (
                 geometry
@@ -1929,16 +1924,10 @@ function readStyle(node, objectStack) {
                 .getGeometriesArrayRecursive()
                 .filter(function (geometry) {
                   const type = geometry.getType();
-                  return (
+                  return type !== 'Polygon' && type !== 'MultiPolygon';
-                    type !== GeometryType.POLYGON &&
-                    type !== GeometryType.MULTI_POLYGON
-                  );
                 })
             );
-          } else if (
+          } else if (type !== 'Polygon' && type !== 'MultiPolygon') {
-            type !== GeometryType.POLYGON &&
-            type !== GeometryType.MULTI_POLYGON
-          ) {
             return geometry;
           }
         },
@@ -1952,7 +1941,7 @@ function readStyle(node, objectStack) {
         geometry: function (feature) {
           const geometry = feature.getGeometry();
           const type = geometry.getType();
-          if (type === GeometryType.GEOMETRY_COLLECTION) {
+          if (type === 'GeometryCollection') {
             const collection =
               /** @type {import("../geom/GeometryCollection").default} */ (
                 geometry
@@ -1962,16 +1951,10 @@ function readStyle(node, objectStack) {
                 .getGeometriesArrayRecursive()
                 .filter(function (geometry) {
                   const type = geometry.getType();
-                  return (
+                  return type === 'Polygon' || type === 'MultiPolygon';
-                    type === GeometryType.POLYGON ||
-                    type === GeometryType.MULTI_POLYGON
-                  );
                 })
             );
-          } else if (
+          } else if (type === 'Polygon' || type === 'MultiPolygon') {
-            type === GeometryType.POLYGON ||
-            type === GeometryType.MULTI_POLYGON
-          ) {
             return geometry;
           }
         },
@@ -2868,27 +2851,27 @@ function writeMultiGeometry(node, geometry, objectStack) {
   let geometries = [];
   /** @type {function(*, Array<*>, string=): (Node|undefined)} */
   let factory;
-  if (type === GeometryType.GEOMETRY_COLLECTION) {
+  if (type === 'GeometryCollection') {
     /** @type {GeometryCollection} */ (geometry)
       .getGeometriesArrayRecursive()
       .forEach(function (geometry) {
         const type = geometry.getType();
-        if (type === GeometryType.MULTI_POINT) {
+        if (type === 'MultiPoint') {
           geometries = geometries.concat(
             /** @type {MultiPoint} */ (geometry).getPoints()
           );
-        } else if (type === GeometryType.MULTI_LINE_STRING) {
+        } else if (type === 'MultiLineString') {
           geometries = geometries.concat(
             /** @type {MultiLineString} */ (geometry).getLineStrings()
           );
-        } else if (type === GeometryType.MULTI_POLYGON) {
+        } else if (type === 'MultiPolygon') {
           geometries = geometries.concat(
             /** @type {MultiPolygon} */ (geometry).getPolygons()
           );
         } else if (
-          type === GeometryType.POINT ||
+          type === 'Point' ||
-          type === GeometryType.LINE_STRING ||
+          type === 'LineString' ||
-          type === GeometryType.POLYGON
+          type === 'Polygon'
         ) {
           geometries.push(geometry);
         } else {
@@ -2896,13 +2879,13 @@ function writeMultiGeometry(node, geometry, objectStack) {
         }
       });
     factory = GEOMETRY_NODE_FACTORY;
-  } else if (type === GeometryType.MULTI_POINT) {
+  } else if (type === 'MultiPoint') {
     geometries = /** @type {MultiPoint} */ (geometry).getPoints();
     factory = POINT_NODE_FACTORY;
-  } else if (type === GeometryType.MULTI_LINE_STRING) {
+  } else if (type === 'MultiLineString') {
     geometries = /** @type {MultiLineString} */ (geometry).getLineStrings();
     factory = LINE_STRING_NODE_FACTORY;
-  } else if (type === GeometryType.MULTI_POLYGON) {
+  } else if (type === 'MultiPolygon') {
     geometries = /** @type {MultiPolygon} */ (geometry).getPolygons();
     factory = POLYGON_NODE_FACTORY;
   } else {
@@ -3036,22 +3019,18 @@ function writePlacemark(node, feature, objectStack) {
           const geometry = style.getGeometryFunction()(feature);
           if (geometry) {
             const type = geometry.getType();
-            if (type === GeometryType.GEOMETRY_COLLECTION) {
+            if (type === 'GeometryCollection') {
               return /** @type {GeometryCollection} */ (geometry)
                 .getGeometriesArrayRecursive()
                 .filter(function (geometry) {
                   const type = geometry.getType();
-                  return (
+                  return type === 'Point' || type === 'MultiPoint';
-                    type === GeometryType.POINT ||
-                    type === GeometryType.MULTI_POINT
-                  );
                 }).length;
             }
-            return (
+            return type === 'Point' || type === 'MultiPoint';
-              type === GeometryType.POINT || type === GeometryType.MULTI_POINT
-            );
           }
         });
+        ('Point');
       }
       if (this.writeStyles_) {
         let lineStyles = styleArray;
@@ -3061,42 +3040,30 @@ function writePlacemark(node, feature, objectStack) {
             const geometry = style.getGeometryFunction()(feature);
             if (geometry) {
               const type = geometry.getType();
-              if (type === GeometryType.GEOMETRY_COLLECTION) {
+              if (type === 'GeometryCollection') {
                 return /** @type {GeometryCollection} */ (geometry)
                   .getGeometriesArrayRecursive()
                   .filter(function (geometry) {
                     const type = geometry.getType();
-                    return (
+                    return type === 'LineString' || type === 'MultiLineString';
-                      type === GeometryType.LINE_STRING ||
-                      type === GeometryType.MULTI_LINE_STRING
-                    );
                   }).length;
               }
-              return (
+              return type === 'LineString' || type === 'MultiLineString';
-                type === GeometryType.LINE_STRING ||
-                type === GeometryType.MULTI_LINE_STRING
-              );
             }
           });
           polyStyles = styleArray.filter(function (style) {
             const geometry = style.getGeometryFunction()(feature);
             if (geometry) {
               const type = geometry.getType();
-              if (type === GeometryType.GEOMETRY_COLLECTION) {
+              if (type === 'GeometryCollection') {
                 return /** @type {GeometryCollection} */ (geometry)
                   .getGeometriesArrayRecursive()
                   .filter(function (geometry) {
                     const type = geometry.getType();
-                    return (
+                    return type === 'Polygon' || type === 'MultiPolygon';
-                      type === GeometryType.POLYGON ||
-                      type === GeometryType.MULTI_POLYGON
-                    );
                   }).length;
               }
-              return (
+              return type === 'Polygon' || type === 'MultiPolygon';
-                type === GeometryType.POLYGON ||
-                type === GeometryType.MULTI_POLYGON
-              );
             }
           });
         }

src/ol/format/MVT.js

@@ -4,9 +4,7 @@
 //FIXME Implement projection handling
 
 import FeatureFormat, {transformGeometryWithOptions} from './Feature.js';
-import FormatType from './FormatType.js';
 import GeometryLayout from '../geom/GeometryLayout.js';
-import GeometryType from '../geom/GeometryType.js';
 import LineString from '../geom/LineString.js';
 import MultiLineString from '../geom/MultiLineString.js';
 import MultiPoint from '../geom/MultiPoint.js';
@@ -202,7 +200,7 @@ class MVT extends FeatureFormat {
       feature.transform(options.dataProjection);
     } else {
       let geom;
-      if (geometryType == GeometryType.POLYGON) {
+      if (geometryType == 'Polygon') {
         const endss = inflateEnds(flatCoordinates, ends);
         geom =
           endss.length > 1
@@ -210,15 +208,13 @@ class MVT extends FeatureFormat {
             : new Polygon(flatCoordinates, GeometryLayout.XY, ends);
       } else {
         geom =
-          geometryType === GeometryType.POINT
+          geometryType === 'Point'
             ? new Point(flatCoordinates, GeometryLayout.XY)
-            : geometryType === GeometryType.LINE_STRING
+            : geometryType === 'LineString'
             ? new LineString(flatCoordinates, GeometryLayout.XY)
-            : geometryType === GeometryType.POLYGON
+            : geometryType === 'MultiPoint'
-            ? new Polygon(flatCoordinates, GeometryLayout.XY, ends)
-            : geometryType === GeometryType.MULTI_POINT
             ? new MultiPoint(flatCoordinates, GeometryLayout.XY)
-            : geometryType === GeometryType.MULTI_LINE_STRING
+            : geometryType === 'MultiLineString'
             ? new MultiLineString(flatCoordinates, GeometryLayout.XY, ends)
             : null;
       }
@@ -241,10 +237,10 @@ class MVT extends FeatureFormat {
   }
 
   /**
-   * @return {import("./FormatType.js").default} Format.
+   * @return {import("./Feature.js").Type} Format.
    */
   getType() {
-    return FormatType.ARRAY_BUFFER;
+    return 'arraybuffer';
   }
 
   /**
@@ -421,19 +417,17 @@ function readRawFeature(pbf, layer, i) {
  * @param {number} type The raw feature's geometry type
  * @param {number} numEnds Number of ends of the flat coordinates of the
  * geometry.
- * @return {import("../geom/GeometryType.js").default} The geometry type.
+ * @return {import("../geom/Geometry.js").Type} The geometry type.
  */
 function getGeometryType(type, numEnds) {
-  /** @type {import("../geom/GeometryType.js").default} */
+  /** @type {import("../geom/Geometry.js").Type} */
   let geometryType;
   if (type === 1) {
-    geometryType =
+    geometryType = numEnds === 1 ? 'Point' : 'MultiPoint';
-      numEnds === 1 ? GeometryType.POINT : GeometryType.MULTI_POINT;
   } else if (type === 2) {
-    geometryType =
+    geometryType = numEnds === 1 ? 'LineString' : 'MultiLineString';
-      numEnds === 1 ? GeometryType.LINE_STRING : GeometryType.MULTI_LINE_STRING;
   } else if (type === 3) {
-    geometryType = GeometryType.POLYGON;
+    geometryType = 'Polygon';
     // MultiPolygon not relevant for rendering - winding order determines
     // outer rings of polygons.
   }

src/ol/format/TextFeature.js

@@ -2,7 +2,6 @@
  * @module ol/format/TextFeature
  */
 import FeatureFormat from '../format/Feature.js';
-import FormatType from '../format/FormatType.js';
 import {abstract} from '../util.js';
 
 /**
@@ -19,10 +18,10 @@ class TextFeature extends FeatureFormat {
   }
 
   /**
-   * @return {import("./FormatType.js").default} Format.
+   * @return {import("./Feature.js").Type} Format.
    */
   getType() {
-    return FormatType.TEXT;
+    return 'text';
   }
 
   /**

src/ol/format/WKB.js

@@ -3,10 +3,8 @@
  */
 import Feature from '../Feature.js';
 import FeatureFormat, {transformGeometryWithOptions} from './Feature.js';
-import FormatType from './FormatType.js';
 import GeometryCollection from '../geom/GeometryCollection.js';
 import GeometryLayout from '../geom/GeometryLayout.js';
-import GeometryType from '../geom/GeometryType.js';
 import LineString from '../geom/LineString.js';
 import MultiLineString from '../geom/MultiLineString.js';
 import MultiPoint from '../geom/MultiPoint.js';
@@ -579,14 +577,17 @@ class WkbWriter {
    * @param {number} [srid] SRID
    */
   writeGeometry(geom, srid) {
+    /**
+     * @type {Object<import("../geom/Geometry.js").Type, WKBGeometryType>}
+     */
     const wkblut = {
-      [GeometryType.POINT]: WKBGeometryType.POINT,
+      Point: WKBGeometryType.POINT,
-      [GeometryType.LINE_STRING]: WKBGeometryType.LINE_STRING,
+      LineString: WKBGeometryType.LINE_STRING,
-      [GeometryType.POLYGON]: WKBGeometryType.POLYGON,
+      Polygon: WKBGeometryType.POLYGON,
-      [GeometryType.MULTI_POINT]: WKBGeometryType.MULTI_POINT,
+      MultiPoint: WKBGeometryType.MULTI_POINT,
-      [GeometryType.MULTI_LINE_STRING]: WKBGeometryType.MULTI_LINE_STRING,
+      MultiLineString: WKBGeometryType.MULTI_LINE_STRING,
-      [GeometryType.MULTI_POLYGON]: WKBGeometryType.MULTI_POLYGON,
+      MultiPolygon: WKBGeometryType.MULTI_POLYGON,
-      [GeometryType.GEOMETRY_COLLECTION]: WKBGeometryType.GEOMETRY_COLLECTION,
+      GeometryCollection: WKBGeometryType.GEOMETRY_COLLECTION,
     };
     const geomType = geom.getType();
     const typeId = wkblut[geomType];
@@ -604,12 +605,12 @@ class WkbWriter {
 
     if (geom instanceof SimpleGeometry) {
       const writerLUT = {
-        [GeometryType.POINT]: this.writePoint,
+        Point: this.writePoint,
-        [GeometryType.LINE_STRING]: this.writeLineString,
+        LineString: this.writeLineString,
-        [GeometryType.POLYGON]: this.writePolygon,
+        Polygon: this.writePolygon,
-        [GeometryType.MULTI_POINT]: this.writeMultiPoint,
+        MultiPoint: this.writeMultiPoint,
-        [GeometryType.MULTI_LINE_STRING]: this.writeMultiLineString,
+        MultiLineString: this.writeMultiLineString,
-        [GeometryType.MULTI_POLYGON]: this.writeMultiPolygon,
+        MultiPolygon: this.writeMultiPolygon,
       };
       writerLUT[geomType].call(this, geom.getCoordinates(), geom.getLayout());
     } else if (geom instanceof GeometryCollection) {
@@ -689,10 +690,10 @@ class WKB extends FeatureFormat {
   }
 
   /**
-   * @return {import("./FormatType.js").default} Format.
+   * @return {import("./Feature.js").Type} Format.
    */
   getType() {
-    return this.hex_ ? FormatType.TEXT : FormatType.ARRAY_BUFFER;
+    return this.hex_ ? 'text' : 'arraybuffer';
   }
 
   /**

src/ol/format/WKT.js

@@ -4,7 +4,6 @@
 import Feature from '../Feature.js';
 import GeometryCollection from '../geom/GeometryCollection.js';
 import GeometryLayout from '../geom/GeometryLayout.js';
-import GeometryType from '../geom/GeometryType.js';
 import LineString from '../geom/LineString.js';
 import MultiLineString from '../geom/MultiLineString.js';
 import MultiPoint from '../geom/MultiPoint.js';
@@ -79,13 +78,18 @@ const TokenType = {
 };
 
 /**
- * @const
+ * @type {Object<import("../geom/Geometry.js").Type, string>}
- * @type {Object<string, string>}
  */
-const WKTGeometryType = {};
+const wktTypeLookup = {
-for (const type in GeometryType) {
+  Point: 'POINT',
-  WKTGeometryType[type] = GeometryType[type].toUpperCase();
+  LineString: 'LINESTRING',
-}
+  Polygon: 'POLYGON',
+  MultiPoint: 'MULTIPOINT',
+  MultiLineString: 'MULTILINESTRING',
+  MultiPolygon: 'MULTIPOLYGON',
+  GeometryCollection: 'GEOMETRYCOLLECTION',
+  Circle: 'CIRCLE',
+};
 
 /**
  * Class to tokenize a WKT string.
@@ -648,10 +652,7 @@ class WKT extends TextFeature {
   readFeaturesFromText(text, opt_options) {
     let geometries = [];
     const geometry = this.readGeometryFromText(text, opt_options);
-    if (
+    if (this.splitCollection_ && geometry.getType() == 'GeometryCollection') {
-      this.splitCollection_ &&
-      geometry.getType() == GeometryType.GEOMETRY_COLLECTION
-    ) {
       geometries = /** @type {GeometryCollection} */ (
         geometry
       ).getGeometriesArray();
@@ -847,22 +848,22 @@ const GeometryEncoder = {
  * @return {string} WKT string for the geometry.
  */
 function encode(geom) {
-  let type = geom.getType();
+  const type = geom.getType();
   const geometryEncoder = GeometryEncoder[type];
   const enc = geometryEncoder(geom);
-  type = type.toUpperCase();
+  let wktType = wktTypeLookup[type];
   if (typeof (/** @type {?} */ (geom).getFlatCoordinates) === 'function') {
     const dimInfo = encodeGeometryLayout(
       /** @type {import("../geom/SimpleGeometry.js").default} */ (geom)
     );
     if (dimInfo.length > 0) {
-      type += ' ' + dimInfo;
+      wktType += ' ' + dimInfo;
     }
   }
   if (enc.length === 0) {
-    return type + ' ' + EMPTY;
+    return wktType + ' ' + EMPTY;
   }
-  return type + '(' + enc + ')';
+  return wktType + '(' + enc + ')';
 }
 
 export default WKT;

src/ol/format/XMLFeature.js

@@ -2,7 +2,6 @@
  * @module ol/format/XMLFeature
  */
 import FeatureFormat from '../format/Feature.js';
-import FormatType from '../format/FormatType.js';
 import {abstract} from '../util.js';
 import {extend} from '../array.js';
 import {getXMLSerializer, isDocument, parse} from '../xml.js';
@@ -27,10 +26,10 @@ class XMLFeature extends FeatureFormat {
   }
 
   /**
-   * @return {import("./FormatType.js").default} Format.
+   * @return {import("./Feature.js").Type} Format.
    */
   getType() {
-    return FormatType.XML;
+    return 'xml';
   }
 
   /**

src/ol/geom/Circle.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/geom/Circle
  */
-import GeometryType from './GeometryType.js';
 import SimpleGeometry from './SimpleGeometry.js';
 import {createOrUpdate, forEachCorner, intersects} from '../extent.js';
 import {deflateCoordinate} from './flat/deflate.js';
@@ -137,11 +136,11 @@ class Circle extends SimpleGeometry {
 
   /**
    * Get the type of this geometry.
-   * @return {import("./GeometryType.js").default} Geometry type.
+   * @return {import("./Geometry.js").Type} Geometry type.
    * @api
    */
   getType() {
-    return GeometryType.CIRCLE;
+    return 'Circle';
   }
 
   /**

src/ol/geom/Geometry.js

@@ -18,6 +18,13 @@ import {get as getProjection, getTransform} from '../proj.js';
 import {memoizeOne} from '../functions.js';
 import {transform2D} from './flat/transform.js';
 
+/**
+ * @typedef {'Point' | 'LineString' | 'LinearRing' | 'Polygon' | 'MultiPoint' | 'MultiLineString' | 'MultiPolygon' | 'GeometryCollection' | 'Circle'} Type
+ * The geometry type.  One of `'Point'`, `'LineString'`, `'LinearRing'`,
+ * `'Polygon'`, `'MultiPoint'`, `'MultiLineString'`, `'MultiPolygon'`,
+ * `'GeometryCollection'`, or `'Circle'`.
+ */
+
 /**
  * @type {import("../transform.js").Transform}
  */
@@ -237,7 +244,7 @@ class Geometry extends BaseObject {
   /**
    * Get the type of this geometry.
    * @abstract
-   * @return {import("./GeometryType.js").default} Geometry type.
+   * @return {Type} Geometry type.
    */
   getType() {
     return abstract();

src/ol/geom/GeometryCollection.js

@@ -3,7 +3,6 @@
  */
 import EventType from '../events/EventType.js';
 import Geometry from './Geometry.js';
-import GeometryType from './GeometryType.js';
 import {
   closestSquaredDistanceXY,
   createOrUpdateEmpty,
@@ -204,11 +203,11 @@ class GeometryCollection extends Geometry {
 
   /**
    * Get the type of this geometry.
-   * @return {import("./GeometryType.js").default} Geometry type.
+   * @return {import("./Geometry.js").Type} Geometry type.
    * @api
    */
   getType() {
-    return GeometryType.GEOMETRY_COLLECTION;
+    return 'GeometryCollection';
   }
 
   /**

src/ol/geom/GeometryType.js

@@ -1,21 +0,0 @@
-/**
- * @module ol/geom/GeometryType
- */
-
-/**
- * The geometry type. One of `'Point'`, `'LineString'`, `'LinearRing'`,
- * `'Polygon'`, `'MultiPoint'`, `'MultiLineString'`, `'MultiPolygon'`,
- * `'GeometryCollection'`, `'Circle'`.
- * @enum {string}
- */
-export default {
-  POINT: 'Point',
-  LINE_STRING: 'LineString',
-  LINEAR_RING: 'LinearRing',
-  POLYGON: 'Polygon',
-  MULTI_POINT: 'MultiPoint',
-  MULTI_LINE_STRING: 'MultiLineString',
-  MULTI_POLYGON: 'MultiPolygon',
-  GEOMETRY_COLLECTION: 'GeometryCollection',
-  CIRCLE: 'Circle',
-};

src/ol/geom/LineString.js

@@ -2,7 +2,6 @@
  * @module ol/geom/LineString
  */
 import GeometryLayout from './GeometryLayout.js';
-import GeometryType from './GeometryType.js';
 import SimpleGeometry from './SimpleGeometry.js';
 import {assignClosestPoint, maxSquaredDelta} from './flat/closest.js';
 import {closestSquaredDistanceXY} from '../extent.js';
@@ -269,11 +268,11 @@ class LineString extends SimpleGeometry {
 
   /**
    * Get the type of this geometry.
-   * @return {import("./GeometryType.js").default} Geometry type.
+   * @return {import("./Geometry.js").Type} Geometry type.
    * @api
    */
   getType() {
-    return GeometryType.LINE_STRING;
+    return 'LineString';
   }
 
   /**

src/ol/geom/LinearRing.js

@@ -2,7 +2,6 @@
  * @module ol/geom/LinearRing
  */
 import GeometryLayout from './GeometryLayout.js';
-import GeometryType from './GeometryType.js';
 import SimpleGeometry from './SimpleGeometry.js';
 import {assignClosestPoint, maxSquaredDelta} from './flat/closest.js';
 import {closestSquaredDistanceXY} from '../extent.js';
@@ -149,11 +148,11 @@ class LinearRing extends SimpleGeometry {
 
   /**
    * Get the type of this geometry.
-   * @return {import("./GeometryType.js").default} Geometry type.
+   * @return {import("./Geometry.js").Type} Geometry type.
    * @api
    */
   getType() {
-    return GeometryType.LINEAR_RING;
+    return 'LinearRing';
   }
 
   /**

src/ol/geom/MultiLineString.js

@@ -2,7 +2,6 @@
  * @module ol/geom/MultiLineString
  */
 import GeometryLayout from './GeometryLayout.js';
-import GeometryType from './GeometryType.js';
 import LineString from './LineString.js';
 import SimpleGeometry from './SimpleGeometry.js';
 import {arrayMaxSquaredDelta, assignClosestArrayPoint} from './flat/closest.js';
@@ -308,11 +307,11 @@ class MultiLineString extends SimpleGeometry {
 
   /**
    * Get the type of this geometry.
-   * @return {import("./GeometryType.js").default} Geometry type.
+   * @return {import("./Geometry.js").Type} Geometry type.
    * @api
    */
   getType() {
-    return GeometryType.MULTI_LINE_STRING;
+    return 'MultiLineString';
   }
 
   /**

src/ol/geom/MultiPoint.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/geom/MultiPoint
  */
-import GeometryType from './GeometryType.js';
 import Point from './Point.js';
 import SimpleGeometry from './SimpleGeometry.js';
 import {closestSquaredDistanceXY, containsXY} from '../extent.js';
@@ -154,11 +153,11 @@ class MultiPoint extends SimpleGeometry {
 
   /**
    * Get the type of this geometry.
-   * @return {import("./GeometryType.js").default} Geometry type.
+   * @return {import("./Geometry.js").Type} Geometry type.
    * @api
    */
   getType() {
-    return GeometryType.MULTI_POINT;
+    return 'MultiPoint';
   }
 
   /**

src/ol/geom/MultiPolygon.js

@@ -2,7 +2,6 @@
  * @module ol/geom/MultiPolygon
  */
 import GeometryLayout from './GeometryLayout.js';
-import GeometryType from './GeometryType.js';
 import MultiPoint from './MultiPoint.js';
 import Polygon from './Polygon.js';
 import SimpleGeometry from './SimpleGeometry.js';
@@ -425,11 +424,11 @@ class MultiPolygon extends SimpleGeometry {
 
   /**
    * Get the type of this geometry.
-   * @return {import("./GeometryType.js").default} Geometry type.
+   * @return {import("./Geometry.js").Type} Geometry type.
    * @api
    */
   getType() {
-    return GeometryType.MULTI_POLYGON;
+    return 'MultiPolygon';
   }
 
   /**

src/ol/geom/Point.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/geom/Point
  */
-import GeometryType from './GeometryType.js';
 import SimpleGeometry from './SimpleGeometry.js';
 import {containsXY, createOrUpdateFromCoordinate} from '../extent.js';
 import {deflateCoordinate} from './flat/deflate.js';
@@ -81,11 +80,11 @@ class Point extends SimpleGeometry {
 
   /**
    * Get the type of this geometry.
-   * @return {import("./GeometryType.js").default} Geometry type.
+   * @return {import("./Geometry.js").Type} Geometry type.
    * @api
    */
   getType() {
-    return GeometryType.POINT;
+    return 'Point';
   }
 
   /**

src/ol/geom/Polygon.js

@@ -2,7 +2,6 @@
  * @module ol/geom/Polygon
  */
 import GeometryLayout from './GeometryLayout.js';
-import GeometryType from './GeometryType.js';
 import LinearRing from './LinearRing.js';
 import Point from './Point.js';
 import SimpleGeometry from './SimpleGeometry.js';
@@ -363,11 +362,11 @@ class Polygon extends SimpleGeometry {
 
   /**
    * Get the type of this geometry.
-   * @return {import("./GeometryType.js").default} Geometry type.
+   * @return {import("./Geometry.js").Type} Geometry type.
    * @api
    */
   getType() {
-    return GeometryType.POLYGON;
+    return 'Polygon';
   }
 
   /**

src/ol/interaction/DragAndDrop.js

@@ -5,7 +5,6 @@
 
 import Event from '../events/Event.js';
 import EventType from '../events/EventType.js';
-import FormatType from '../format/FormatType.js';
 import Interaction from './Interaction.js';
 import {TRUE} from '../functions.js';
 import {get as getProjection} from '../proj.js';
@@ -143,7 +142,7 @@ class DragAndDrop extends Interaction {
       }
       this.formats_.push(format);
       this.readAsBuffer_ =
-        this.readAsBuffer_ || format.getType() === FormatType.ARRAY_BUFFER;
+        this.readAsBuffer_ || format.getType() === 'arraybuffer';
     }
 
     /**
@@ -192,7 +191,7 @@ class DragAndDrop extends Interaction {
     for (let i = 0, ii = formats.length; i < ii; ++i) {
       const format = formats[i];
       let input = result;
-      if (this.readAsBuffer_ && format.getType() !== FormatType.ARRAY_BUFFER) {
+      if (this.readAsBuffer_ && format.getType() !== 'arraybuffer') {
         if (text === undefined) {
           text = new TextDecoder().decode(result);
         }

src/ol/interaction/Draw.js

@@ -6,7 +6,6 @@ import Event from '../events/Event.js';
 import EventType from '../events/EventType.js';
 import Feature from '../Feature.js';
 import GeometryLayout from '../geom/GeometryLayout.js';
-import GeometryType from '../geom/GeometryType.js';
 import InteractionProperty from './Property.js';
 import LineString from '../geom/LineString.js';
 import MapBrowserEvent from '../MapBrowserEvent.js';
@@ -35,7 +34,7 @@ import {squaredDistance as squaredCoordinateDistance} from '../coordinate.js';
 
 /**
  * @typedef {Object} Options
- * @property {import("../geom/GeometryType.js").default} type Geometry type of
+ * @property {import("../geom/Geometry.js").Type} type Geometry type of
  * the geometries being drawn with this instance.
  * @property {number} [clickTolerance=6] The maximum distance in pixels between
  * "down" and "up" for a "up" event to be considered a "click" event and
@@ -282,10 +281,10 @@ class Draw extends PointerInteraction {
 
     /**
      * Geometry type.
-     * @type {import("../geom/GeometryType.js").default}
+     * @type {import("../geom/Geometry.js").Type}
      * @private
      */
-    this.type_ = /** @type {import("../geom/GeometryType.js").default} */ (
+    this.type_ = /** @type {import("../geom/Geometry.js").Type} */ (
       options.type
     );
 
@@ -890,10 +889,7 @@ class Draw extends PointerInteraction {
       const sketchPointGeom = this.sketchPoint_.getGeometry();
       sketchPointGeom.setCoordinates(coordinate);
     }
-    if (
+    if (geometry.getType() === 'Polygon' && this.mode_ !== Mode.POLYGON) {
-      geometry.getType() === GeometryType.POLYGON &&
-      this.mode_ !== Mode.POLYGON
-    ) {
       this.createOrUpdateCustomSketchLine_(/** @type {Polygon} */ (geometry));
     } else if (this.sketchLineCoords_) {
       const sketchLineGeom = this.sketchLine_.getGeometry();
@@ -970,7 +966,7 @@ class Draw extends PointerInteraction {
         this.createOrUpdateSketchPoint_(finishCoordinate);
       }
       this.geometryFunction_(coordinates, geometry, projection);
-      if (geometry.getType() === GeometryType.POLYGON && this.sketchLine_) {
+      if (geometry.getType() === 'Polygon' && this.sketchLine_) {
         this.createOrUpdateCustomSketchLine_(/** @type {Polygon} */ (geometry));
       }
     } else if (mode === Mode.POLYGON) {
@@ -1019,15 +1015,15 @@ class Draw extends PointerInteraction {
     }
 
     // cast multi-part geometries
-    if (this.type_ === GeometryType.MULTI_POINT) {
+    if (this.type_ === 'MultiPoint') {
       sketchFeature.setGeometry(
         new MultiPoint([/** @type {PointCoordType} */ (coordinates)])
       );
-    } else if (this.type_ === GeometryType.MULTI_LINE_STRING) {
+    } else if (this.type_ === 'MultiLineString') {
       sketchFeature.setGeometry(
         new MultiLineString([/** @type {LineCoordType} */ (coordinates)])
       );
-    } else if (this.type_ === GeometryType.MULTI_POLYGON) {
+    } else if (this.type_ === 'MultiPolygon') {
       sketchFeature.setGeometry(
         new MultiPolygon([/** @type {PolyCoordType} */ (coordinates)])
       );
@@ -1274,21 +1270,21 @@ export function createBox() {
 /**
  * Get the drawing mode.  The mode for multi-part geometries is the same as for
  * their single-part cousins.
- * @param {import("../geom/GeometryType.js").default} type Geometry type.
+ * @param {import("../geom/Geometry.js").Type} type Geometry type.
  * @return {Mode} Drawing mode.
  */
 function getMode(type) {
   switch (type) {
-    case GeometryType.POINT:
+    case 'Point':
-    case GeometryType.MULTI_POINT:
+    case 'MultiPoint':
       return Mode.POINT;
-    case GeometryType.LINE_STRING:
+    case 'LineString':
-    case GeometryType.MULTI_LINE_STRING:
+    case 'MultiLineString':
       return Mode.LINE_STRING;
-    case GeometryType.POLYGON:
+    case 'Polygon':
-    case GeometryType.MULTI_POLYGON:
+    case 'MultiPolygon':
       return Mode.POLYGON;
-    case GeometryType.CIRCLE:
+    case 'Circle':
       return Mode.CIRCLE;
     default:
       throw new Error('Invalid type: ' + type);

src/ol/interaction/Extent.js

@@ -3,7 +3,6 @@
  */
 import Event from '../events/Event.js';
 import Feature from '../Feature.js';
-import GeometryType from '../geom/GeometryType.js';
 import MapBrowserEventType from '../MapBrowserEventType.js';
 import Point from '../geom/Point.js';
 import PointerInteraction from './Pointer.js';
@@ -478,7 +477,7 @@ class Extent extends PointerInteraction {
 function getDefaultExtentStyleFunction() {
   const style = createEditingStyle();
   return function (feature, resolution) {
-    return style[GeometryType.POLYGON];
+    return style['Polygon'];
   };
 }
 
@@ -490,7 +489,7 @@ function getDefaultExtentStyleFunction() {
 function getDefaultPointerStyleFunction() {
   const style = createEditingStyle();
   return function (feature, resolution) {
-    return style[GeometryType.POINT];
+    return style['Point'];
   };
 }
 

src/ol/interaction/Modify.js

@@ -6,7 +6,6 @@ import CollectionEventType from '../CollectionEventType.js';
 import Event from '../events/Event.js';
 import EventType from '../events/EventType.js';
 import Feature from '../Feature.js';
-import GeometryType from '../geom/GeometryType.js';
 import MapBrowserEventType from '../MapBrowserEventType.js';
 import Point from '../geom/Point.js';
 import PointerInteraction from './Pointer.js';
@@ -905,38 +904,38 @@ class Modify extends PointerInteraction {
       }
 
       switch (geometry.getType()) {
-        case GeometryType.POINT:
+        case 'Point':
           coordinates = vertex;
           segment[0] = vertex;
           segment[1] = vertex;
           break;
-        case GeometryType.MULTI_POINT:
+        case 'MultiPoint':
           coordinates = geometry.getCoordinates();
           coordinates[segmentData.index] = vertex;
           segment[0] = vertex;
           segment[1] = vertex;
           break;
-        case GeometryType.LINE_STRING:
+        case 'LineString':
           coordinates = geometry.getCoordinates();
           coordinates[segmentData.index + index] = vertex;
           segment[index] = vertex;
           break;
-        case GeometryType.MULTI_LINE_STRING:
+        case 'MultiLineString':
           coordinates = geometry.getCoordinates();
           coordinates[depth[0]][segmentData.index + index] = vertex;
           segment[index] = vertex;
           break;
-        case GeometryType.POLYGON:
+        case 'Polygon':
           coordinates = geometry.getCoordinates();
           coordinates[depth[0]][segmentData.index + index] = vertex;
           segment[index] = vertex;
           break;
-        case GeometryType.MULTI_POLYGON:
+        case 'MultiPolygon':
           coordinates = geometry.getCoordinates();
           coordinates[depth[1]][depth[0]][segmentData.index + index] = vertex;
           segment[index] = vertex;
           break;
-        case GeometryType.CIRCLE:
+        case 'Circle':
           segment[0] = vertex;
           segment[1] = vertex;
           if (segmentData.index === CIRCLE_CENTER_INDEX) {
@@ -1011,7 +1010,7 @@ class Modify extends PointerInteraction {
         }
 
         if (
-          segmentDataMatch.geometry.getType() === GeometryType.CIRCLE &&
+          segmentDataMatch.geometry.getType() === 'Circle' &&
           segmentDataMatch.index === CIRCLE_CIRCUMFERENCE_INDEX
         ) {
           const closestVertex = closestOnSegmentData(
@@ -1049,15 +1048,15 @@ class Modify extends PointerInteraction {
             let coordinates = segmentDataMatch.geometry.getCoordinates();
             switch (segmentDataMatch.geometry.getType()) {
               // prevent dragging closed linestrings by the connecting node
-              case GeometryType.LINE_STRING:
+              case 'LineString':
-              case GeometryType.MULTI_LINE_STRING:
+              case 'MultiLineString':
                 continue;
               // if dragging the first vertex of a polygon, ensure the other segment
               // belongs to the closing vertex of the linear ring
-              case GeometryType.MULTI_POLYGON:
+              case 'MultiPolygon':
                 coordinates = coordinates[depth[1]];
               /* falls through */
-              case GeometryType.POLYGON:
+              case 'Polygon':
                 if (
                   segmentDataMatch.index !==
                   coordinates[depth[0]].length - 2
@@ -1105,7 +1104,7 @@ class Modify extends PointerInteraction {
     for (let i = this.dragSegments_.length - 1; i >= 0; --i) {
       const segmentData = this.dragSegments_[i][0];
       const geometry = segmentData.geometry;
-      if (geometry.getType() === GeometryType.CIRCLE) {
+      if (geometry.getType() === 'Circle') {
         // Update a circle object in the R* bush:
         const coordinates = geometry.getCenter();
         const centerSegmentData = segmentData.featureSegments[0];
@@ -1190,7 +1189,7 @@ class Modify extends PointerInteraction {
               feature.getGeometry()
             );
           if (
-            geometry.getType() === GeometryType.POINT &&
+            geometry.getType() === 'Point' &&
             includes(this.features_.getArray(), feature)
           ) {
             hitPointGeometry = geometry;
@@ -1237,7 +1236,7 @@ class Modify extends PointerInteraction {
           this.delta_[1] = vertex[1] - pixelCoordinate[1];
         }
         if (
-          node.geometry.getType() === GeometryType.CIRCLE &&
+          node.geometry.getType() === 'Circle' &&
           node.index === CIRCLE_CIRCUMFERENCE_INDEX
         ) {
           this.snappedToVertex_ = true;
@@ -1313,19 +1312,19 @@ class Modify extends PointerInteraction {
     }
 
     switch (geometry.getType()) {
-      case GeometryType.MULTI_LINE_STRING:
+      case 'MultiLineString':
         coordinates = geometry.getCoordinates();
         coordinates[depth[0]].splice(index + 1, 0, vertex);
         break;
-      case GeometryType.POLYGON:
+      case 'Polygon':
         coordinates = geometry.getCoordinates();
         coordinates[depth[0]].splice(index + 1, 0, vertex);
         break;
-      case GeometryType.MULTI_POLYGON:
+      case 'MultiPolygon':
         coordinates = geometry.getCoordinates();
         coordinates[depth[1]][depth[0]].splice(index + 1, 0, vertex);
         break;
-      case GeometryType.LINE_STRING:
+      case 'LineString':
         coordinates = geometry.getCoordinates();
         coordinates.splice(index + 1, 0, vertex);
         break;
@@ -1441,22 +1440,22 @@ class Modify extends PointerInteraction {
       component = coordinates;
       deleted = false;
       switch (geometry.getType()) {
-        case GeometryType.MULTI_LINE_STRING:
+        case 'MultiLineString':
           if (coordinates[segmentData.depth[0]].length > 2) {
             coordinates[segmentData.depth[0]].splice(index, 1);
             deleted = true;
           }
           break;
-        case GeometryType.LINE_STRING:
+        case 'LineString':
           if (coordinates.length > 2) {
             coordinates.splice(index, 1);
             deleted = true;
           }
           break;
-        case GeometryType.MULTI_POLYGON:
+        case 'MultiPolygon':
           component = component[segmentData.depth[1]];
         /* falls through */
-        case GeometryType.POLYGON:
+        case 'Polygon':
           component = component[segmentData.depth[0]];
           if (component.length > 4) {
             if (index == component.length - 1) {
@@ -1575,7 +1574,7 @@ function projectedDistanceToSegmentDataSquared(
 ) {
   const geometry = segmentData.geometry;
 
-  if (geometry.getType() === GeometryType.CIRCLE) {
+  if (geometry.getType() === 'Circle') {
     let circleGeometry = /** @type {import("../geom/Circle.js").default} */ (
       geometry
     );
@@ -1617,7 +1616,7 @@ function closestOnSegmentData(pointCoordinates, segmentData, projection) {
   const geometry = segmentData.geometry;
 
   if (
-    geometry.getType() === GeometryType.CIRCLE &&
+    geometry.getType() === 'Circle' &&
     segmentData.index === CIRCLE_CIRCUMFERENCE_INDEX
   ) {
     let circleGeometry = /** @type {import("../geom/Circle.js").default} */ (
@@ -1651,7 +1650,7 @@ function closestOnSegmentData(pointCoordinates, segmentData, projection) {
 function getDefaultStyleFunction() {
   const style = createEditingStyle();
   return function (feature, resolution) {
-    return style[GeometryType.POINT];
+    return style['Point'];
   };
 }
 

src/ol/interaction/Select.js

@@ -4,7 +4,6 @@
 import Collection from '../Collection.js';
 import CollectionEventType from '../CollectionEventType.js';
 import Event from '../events/Event.js';
-import GeometryType from '../geom/GeometryType.js';
 import Interaction from './Interaction.js';
 import VectorLayer from '../layer/Vector.js';
 import {TRUE} from '../functions.js';
@@ -569,11 +568,8 @@ class Select extends Interaction {
  */
 function getDefaultStyleFunction() {
   const styles = createEditingStyle();
-  extend(styles[GeometryType.POLYGON], styles[GeometryType.LINE_STRING]);
+  extend(styles['Polygon'], styles['LineString']);
-  extend(
+  extend(styles['GeometryCollection'], styles['LineString']);
-    styles[GeometryType.GEOMETRY_COLLECTION],
-    styles[GeometryType.LINE_STRING]
-  );
 
   return function (feature) {
     if (!feature.getGeometry()) {

src/ol/interaction/Snap.js

@@ -3,7 +3,6 @@
  */
 import CollectionEventType from '../CollectionEventType.js';
 import EventType from '../events/EventType.js';
-import GeometryType from '../geom/GeometryType.js';
 import PointerInteraction from './Pointer.js';
 import RBush from '../structs/RBush.js';
 import VectorEventType from '../source/VectorEventType.js';
@@ -470,9 +469,7 @@ class Snap extends PointerInteraction {
     if (this.vertex_) {
       for (let i = 0; i < segmentsLength; ++i) {
         const segmentData = segments[i];
-        if (
+        if (segmentData.feature.getGeometry().getType() !== 'Circle') {
-          segmentData.feature.getGeometry().getType() !== GeometryType.CIRCLE
-        ) {
           segmentData.segment.forEach((vertex) => {
             const tempVertexCoord = fromUserCoordinate(vertex, projection);
             const delta = squaredDistance(projectedCoordinate, tempVertexCoord);
@@ -493,9 +490,7 @@ class Snap extends PointerInteraction {
       for (let i = 0; i < segmentsLength; ++i) {
         let vertex = null;
         const segmentData = segments[i];
-        if (
+        if (segmentData.feature.getGeometry().getType() === 'Circle') {
-          segmentData.feature.getGeometry().getType() === GeometryType.CIRCLE
-        ) {
           let circleGeometry = segmentData.feature.getGeometry();
           const userProjection = getUserProjection();
           if (userProjection) {

src/ol/layer/Base.js

@@ -260,7 +260,7 @@ class BaseLayer extends BaseObject {
 
   /**
    * @abstract
-   * @return {import("../source/State.js").default} Source state.
+   * @return {import("../source/Source.js").State} Source state.
    */
   getSourceState() {
     return abstract();

src/ol/layer/Group.js

@@ -7,7 +7,6 @@ import CollectionEventType from '../CollectionEventType.js';
 import Event from '../events/Event.js';
 import EventType from '../events/EventType.js';
 import ObjectEventType from '../ObjectEventType.js';
-import SourceState from '../source/State.js';
 import {assert} from '../asserts.js';
 import {assign, clear} from '../obj.js';
 import {getIntersection} from '../extent.js';
@@ -343,10 +342,10 @@ class LayerGroup extends BaseLayer {
   }
 
   /**
-   * @return {import("../source/State.js").default} Source state.
+   * @return {import("../source/Source.js").State} Source state.
    */
   getSourceState() {
-    return SourceState.READY;
+    return 'ready';
   }
 }
 

src/ol/layer/Layer.js

@@ -5,7 +5,6 @@ import BaseLayer from './Base.js';
 import EventType from '../events/EventType.js';
 import LayerProperty from './Property.js';
 import RenderEventType from '../render/EventType.js';
-import SourceState from '../source/State.js';
 import {assert} from '../asserts.js';
 import {assign} from '../obj.js';
 import {listen, unlistenByKey} from '../events.js';
@@ -209,11 +208,11 @@ class Layer extends BaseLayer {
   }
 
   /**
-   * @return {import("../source/State.js").default} Source state.
+   * @return {import("../source/Source.js").State} Source state.
    */
   getSourceState() {
     const source = this.getSource();
-    return !source ? SourceState.UNDEFINED : source.getState();
+    return !source ? 'undefined' : source.getState();
   }
 
   /**

src/ol/layer/MapboxVector.js

@@ -4,7 +4,6 @@
 import BaseEvent from '../events/Event.js';
 import EventType from '../events/EventType.js';
 import MVT from '../format/MVT.js';
-import SourceState from '../source/State.js';
 import VectorTileLayer from '../layer/VectorTile.js';
 import VectorTileSource from '../source/VectorTile.js';
 import {applyBackground, applyStyle} from 'ol-mapbox-style';
@@ -144,7 +143,7 @@ class MapboxVectorLayer extends VectorTileLayer {
   constructor(options) {
     const declutter = 'declutter' in options ? options.declutter : true;
     const source = new VectorTileSource({
-      state: SourceState.LOADING,
+      state: 'loading',
       format: new MVT(),
     });
 
@@ -179,12 +178,12 @@ class MapboxVectorLayer extends VectorTileLayer {
       accessToken: this.accessToken,
     })
       .then(() => {
-        source.setState(SourceState.READY);
+        source.setState('ready');
       })
       .catch((error) => {
         this.dispatchEvent(new ErrorEvent(error));
         const source = this.getSource();
-        source.setState(SourceState.ERROR);
+        source.setState('error');
       });
     if (this.getBackground() === undefined) {
       applyBackground(this, options.styleUrl, {

src/ol/layer/WebGLTile.js

@@ -3,7 +3,6 @@
  */
 import BaseTileLayer from './BaseTile.js';
 import LayerProperty from '../layer/Property.js';
-import SourceState from '../source/State.js';
 import WebGLTileLayerRenderer, {
   Attributes,
   Uniforms,
@@ -383,11 +382,11 @@ class WebGLTileLayer extends BaseTileLayer {
   }
 
   /**
-   * @return {import("../source/State.js").default} Source state.
+   * @return {import("../source/Source.js").State} Source state.
    */
   getSourceState() {
     const source = this.getRenderSource();
-    return source ? source.getState() : SourceState.UNDEFINED;
+    return source ? source.getState() : 'undefined';
   }
 
   /**
@@ -454,16 +453,16 @@ class WebGLTileLayer extends BaseTileLayer {
     for (let i = 0, ii = sources.length; i < ii; ++i) {
       const source = sources[i];
       const sourceState = source.getState();
-      if (sourceState == SourceState.LOADING) {
+      if (sourceState == 'loading') {
         const onChange = () => {
-          if (source.getState() == SourceState.READY) {
+          if (source.getState() == 'ready') {
             source.removeEventListener('change', onChange);
             this.changed();
           }
         };
         source.addEventListener('change', onChange);
       }
-      ready = ready && sourceState == SourceState.READY;
+      ready = ready && sourceState == 'ready';
     }
     const canvas = this.renderSources(frameState, sources);
     if (this.getRenderer().renderComplete && ready) {

src/ol/render/Feature.js

@@ -3,7 +3,6 @@
  */
 import Feature from '../Feature.js';
 import GeometryLayout from '../geom/GeometryLayout.js';
-import GeometryType from '../geom/GeometryType.js';
 import {
   LineString,
   MultiLineString,
@@ -45,7 +44,7 @@ const tmpTransform = createTransform();
  */
 class RenderFeature {
   /**
-   * @param {import("../geom/GeometryType.js").default} type Geometry type.
+   * @param {import("../geom/Geometry.js").Type} type Geometry type.
    * @param {Array<number>} flatCoordinates Flat coordinates. These always need
    *     to be right-handed for polygons.
    * @param {Array<number>|Array<Array<number>>} ends Ends or Endss.
@@ -72,7 +71,7 @@ class RenderFeature {
 
     /**
      * @private
-     * @type {import("../geom/GeometryType.js").default}
+     * @type {import("../geom/Geometry.js").Type}
      */
     this.type_ = type;
 
@@ -125,7 +124,7 @@ class RenderFeature {
   getExtent() {
     if (!this.extent_) {
       this.extent_ =
-        this.type_ === GeometryType.POINT
+        this.type_ === 'Point'
           ? createOrUpdateFromCoordinate(this.flatCoordinates_)
           : createOrUpdateFromFlatCoordinates(
               this.flatCoordinates_,
@@ -283,7 +282,7 @@ class RenderFeature {
 
   /**
    * Get the type of this feature's geometry.
-   * @return {import("../geom/GeometryType.js").default} Geometry type.
+   * @return {import("../geom/Geometry.js").Type} Geometry type.
    * @api
    */
   getType() {
@@ -348,25 +347,25 @@ RenderFeature.prototype.getFlatCoordinates =
 export function toGeometry(renderFeature) {
   const geometryType = renderFeature.getType();
   switch (geometryType) {
-    case GeometryType.POINT:
+    case 'Point':
       return new Point(renderFeature.getFlatCoordinates());
-    case GeometryType.MULTI_POINT:
+    case 'MultiPoint':
       return new MultiPoint(
         renderFeature.getFlatCoordinates(),
         GeometryLayout.XY
       );
-    case GeometryType.LINE_STRING:
+    case 'LineString':
       return new LineString(
         renderFeature.getFlatCoordinates(),
         GeometryLayout.XY
       );
-    case GeometryType.MULTI_LINE_STRING:
+    case 'MultiLineString':
       return new MultiLineString(
         renderFeature.getFlatCoordinates(),
         GeometryLayout.XY,
         /** @type {Array<number>} */ (renderFeature.getEnds())
       );
-    case GeometryType.POLYGON:
+    case 'Polygon':
       const flatCoordinates = renderFeature.getFlatCoordinates();
       const ends = /** @type {Array<number>} */ (renderFeature.getEnds());
       const endss = inflateEnds(flatCoordinates, ends);

src/ol/render/canvas.js

@@ -8,6 +8,10 @@ import {clear} from '../obj.js';
 import {createCanvasContext2D} from '../dom.js';
 import {getFontParameters} from '../css.js';
 
+/**
+ * @typedef {'Circle' | 'Image' | 'LineString' | 'Polygon' | 'Text' | 'Default'} BuilderType
+ */
+
 /**
  * @typedef {Object} FillState
  * @property {import("../colorlike.js").ColorLike} fillStyle FillStyle.

src/ol/render/canvas/Builder.js

@@ -2,7 +2,6 @@
  * @module ol/render/canvas/Builder
  */
 import CanvasInstruction from './Instruction.js';
-import GeometryType from '../../geom/GeometryType.js';
 import Relationship from '../../extent/Relationship.js';
 import VectorContext from '../VectorContext.js';
 import {asColorLike} from '../../colorlike.js';
@@ -260,7 +259,7 @@ class CanvasBuilder extends VectorContext {
     let offset;
 
     switch (type) {
-      case GeometryType.MULTI_POLYGON:
+      case 'MultiPolygon':
         flatCoordinates =
           /** @type {import("../../geom/MultiPolygon.js").default} */ (
             geometry
@@ -299,11 +298,11 @@ class CanvasBuilder extends VectorContext {
           inflateMultiCoordinatesArray,
         ]);
         break;
-      case GeometryType.POLYGON:
+      case 'Polygon':
-      case GeometryType.MULTI_LINE_STRING:
+      case 'MultiLineString':
         builderEnds = [];
         flatCoordinates =
-          type == GeometryType.POLYGON
+          type == 'Polygon'
             ? /** @type {import("../../geom/Polygon.js").default} */ (
                 geometry
               ).getOrientedFlatCoordinates()
@@ -334,8 +333,8 @@ class CanvasBuilder extends VectorContext {
           inflateCoordinatesArray,
         ]);
         break;
-      case GeometryType.LINE_STRING:
+      case 'LineString':
-      case GeometryType.CIRCLE:
+      case 'Circle':
         flatCoordinates = geometry.getFlatCoordinates();
         builderEnd = this.appendFlatLineCoordinates(
           flatCoordinates,
@@ -362,7 +361,7 @@ class CanvasBuilder extends VectorContext {
           inflateCoordinates,
         ]);
         break;
-      case GeometryType.MULTI_POINT:
+      case 'MultiPoint':
         flatCoordinates = geometry.getFlatCoordinates();
         builderEnd = this.appendFlatPointCoordinates(flatCoordinates, stride);
 
@@ -385,7 +384,7 @@ class CanvasBuilder extends VectorContext {
           ]);
         }
         break;
-      case GeometryType.POINT:
+      case 'Point':
         flatCoordinates = geometry.getFlatCoordinates();
         this.coordinates.push(flatCoordinates[0], flatCoordinates[1]);
         builderEnd = this.coordinates.length;

src/ol/render/canvas/BuilderGroup.js

@@ -9,7 +9,7 @@ import PolygonBuilder from './PolygonBuilder.js';
 import TextBuilder from './TextBuilder.js';
 
 /**
- * @type {Object<import("./BuilderType").default, typeof Builder>}
+ * @type {Object<import("../canvas.js").BuilderType, typeof Builder>}
  */
 const BATCH_CONSTRUCTORS = {
   'Circle': PolygonBuilder,
@@ -54,13 +54,13 @@ class BuilderGroup {
 
     /**
      * @private
-     * @type {!Object<string, !Object<import("./BuilderType").default, Builder>>}
+     * @type {!Object<string, !Object<import("../canvas.js").BuilderType, Builder>>}
      */
     this.buildersByZIndex_ = {};
   }
 
   /**
-   * @return {!Object<string, !Object<import("./BuilderType").default, import("./Builder.js").SerializableInstructions>>} The serializable instructions
+   * @return {!Object<string, !Object<import("../canvas.js").BuilderType, import("./Builder.js").SerializableInstructions>>} The serializable instructions
    */
   finish() {
     const builderInstructions = {};
@@ -77,7 +77,7 @@ class BuilderGroup {
 
   /**
    * @param {number|undefined} zIndex Z index.
-   * @param {import("./BuilderType.js").default} builderType Replay type.
+   * @param {import("../canvas.js").BuilderType} builderType Replay type.
    * @return {import("../VectorContext.js").default} Replay.
    */
   getBuilder(zIndex, builderType) {

src/ol/render/canvas/BuilderType.js

@@ -1,15 +0,0 @@
-/**
- * @module ol/render/canvas/BuilderType
- */
-
-/**
- * @enum {string}
- */
-export default {
-  CIRCLE: 'Circle',
-  DEFAULT: 'Default',
-  IMAGE: 'Image',
-  LINE_STRING: 'LineString',
-  POLYGON: 'Polygon',
-  TEXT: 'Text',
-};

src/ol/render/canvas/ExecutorGroup.js

@@ -2,7 +2,6 @@
  * @module ol/render/canvas/ExecutorGroup
  */
 
-import BuilderType from './BuilderType.js';
 import Executor from './Executor.js';
 import {buffer, createEmpty, extendCoordinate} from '../../extent.js';
 import {
@@ -16,16 +15,9 @@ import {transform2D} from '../../geom/flat/transform.js';
 
 /**
  * @const
- * @type {Array<import("./BuilderType.js").default>}
+ * @type {Array<import("../canvas.js").BuilderType>}
  */
-const ORDER = [
+const ORDER = ['Polygon', 'Circle', 'LineString', 'Image', 'Text', 'Default'];
-  BuilderType.POLYGON,
-  BuilderType.CIRCLE,
-  BuilderType.LINE_STRING,
-  BuilderType.IMAGE,
-  BuilderType.TEXT,
-  BuilderType.DEFAULT,
-];
 
 class ExecutorGroup {
   /**
@@ -36,7 +28,7 @@ class ExecutorGroup {
    * @param {number} resolution Resolution.
    * @param {number} pixelRatio Pixel ratio.
    * @param {boolean} overlaps The executor group can have overlapping geometries.
-   * @param {!Object<string, !Object<import("./BuilderType.js").default, import("../canvas.js").SerializableInstructions>>} allInstructions
+   * @param {!Object<string, !Object<import("../canvas.js").BuilderType, import("../canvas.js").SerializableInstructions>>} allInstructions
    * The serializable instructions.
    * @param {number} [opt_renderBuffer] Optional rendering buffer.
    */
@@ -80,7 +72,7 @@ class ExecutorGroup {
 
     /**
      * @private
-     * @type {!Object<string, !Object<import("./BuilderType.js").default, import("./Executor").default>>}
+     * @type {!Object<string, !Object<import("../canvas.js").BuilderType, import("./Executor").default>>}
      */
     this.executorsByZIndex_ = {};
 
@@ -116,7 +108,7 @@ class ExecutorGroup {
   /**
    * Create executors and populate them using the provided instructions.
    * @private
-   * @param {!Object<string, !Object<import("./BuilderType.js").default, import("../canvas.js").SerializableInstructions>>} allInstructions The serializable instructions
+   * @param {!Object<string, !Object<import("../canvas.js").BuilderType, import("../canvas.js").SerializableInstructions>>} allInstructions The serializable instructions
    */
   createExecutors_(allInstructions) {
     for (const zIndex in allInstructions) {
@@ -139,7 +131,7 @@ class ExecutorGroup {
   }
 
   /**
-   * @param {Array<import("./BuilderType.js").default>} executors Executors.
+   * @param {Array<import("../canvas.js").BuilderType>} executors Executors.
    * @return {boolean} Has executors of the provided types.
    */
   hasExecutors(executors) {
@@ -238,8 +230,7 @@ class ExecutorGroup {
         if (imageData[indexes[i]] > 0) {
           if (
             !declutteredFeatures ||
-            (builderType !== BuilderType.IMAGE &&
+            (builderType !== 'Image' && builderType !== 'Text') ||
-              builderType !== BuilderType.TEXT) ||
             declutteredFeatures.indexOf(feature) !== -1
           ) {
             const idx = (indexes[i] - 3) / 4;
@@ -316,7 +307,7 @@ class ExecutorGroup {
    * @param {import("../../transform.js").Transform} transform Transform.
    * @param {number} viewRotation View rotation.
    * @param {boolean} snapToPixel Snap point symbols and test to integer pixel.
-   * @param {Array<import("./BuilderType.js").default>} [opt_builderTypes] Ordered replay types to replay.
+   * @param {Array<import("../canvas.js").BuilderType>} [opt_builderTypes] Ordered replay types to replay.
    *     Default is {@link module:ol/render/replay~ORDER}
    * @param {import("rbush").default} [opt_declutterTree] Declutter tree.
    */

src/ol/render/canvas/Immediate.js

@@ -5,7 +5,6 @@
 // FIXME need to handle large thick features (where pixel size matters)
 // FIXME add offset and end to ol/geom/flat/transform~transform2D?
 
-import GeometryType from '../../geom/GeometryType.js';
 import VectorContext from '../VectorContext.js';
 import {asColorLike} from '../../colorlike.js';
 import {
@@ -549,46 +548,46 @@ class CanvasImmediateRenderer extends VectorContext {
   drawGeometry(geometry) {
     const type = geometry.getType();
     switch (type) {
-      case GeometryType.POINT:
+      case 'Point':
         this.drawPoint(
           /** @type {import("../../geom/Point.js").default} */ (geometry)
         );
         break;
-      case GeometryType.LINE_STRING:
+      case 'LineString':
         this.drawLineString(
           /** @type {import("../../geom/LineString.js").default} */ (geometry)
         );
         break;
-      case GeometryType.POLYGON:
+      case 'Polygon':
         this.drawPolygon(
           /** @type {import("../../geom/Polygon.js").default} */ (geometry)
         );
         break;
-      case GeometryType.MULTI_POINT:
+      case 'MultiPoint':
         this.drawMultiPoint(
           /** @type {import("../../geom/MultiPoint.js").default} */ (geometry)
         );
         break;
-      case GeometryType.MULTI_LINE_STRING:
+      case 'MultiLineString':
         this.drawMultiLineString(
           /** @type {import("../../geom/MultiLineString.js").default} */ (
             geometry
           )
         );
         break;
-      case GeometryType.MULTI_POLYGON:
+      case 'MultiPolygon':
         this.drawMultiPolygon(
           /** @type {import("../../geom/MultiPolygon.js").default} */ (geometry)
         );
         break;
-      case GeometryType.GEOMETRY_COLLECTION:
+      case 'GeometryCollection':
         this.drawGeometryCollection(
           /** @type {import("../../geom/GeometryCollection.js").default} */ (
             geometry
           )
         );
         break;
-      case GeometryType.CIRCLE:
+      case 'Circle':
         this.drawCircle(
           /** @type {import("../../geom/Circle.js").default} */ (geometry)
         );

src/ol/render/canvas/TextBuilder.js

@@ -3,7 +3,6 @@
  */
 import CanvasBuilder from './Builder.js';
 import CanvasInstruction from './Instruction.js';
-import GeometryType from '../../geom/GeometryType.js';
 import TextPlacement from '../../style/TextPlacement.js';
 import {asColorLike} from '../../colorlike.js';
 import {
@@ -179,27 +178,27 @@ class CanvasTextBuilder extends CanvasBuilder {
 
     if (
       textState.placement === TextPlacement.LINE &&
-      (geometryType == GeometryType.LINE_STRING ||
+      (geometryType == 'LineString' ||
-        geometryType == GeometryType.MULTI_LINE_STRING ||
+        geometryType == 'MultiLineString' ||
-        geometryType == GeometryType.POLYGON ||
+        geometryType == 'Polygon' ||
-        geometryType == GeometryType.MULTI_POLYGON)
+        geometryType == 'MultiPolygon')
     ) {
       if (!intersects(this.getBufferedMaxExtent(), geometry.getExtent())) {
         return;
       }
       let ends;
       flatCoordinates = geometry.getFlatCoordinates();
-      if (geometryType == GeometryType.LINE_STRING) {
+      if (geometryType == 'LineString') {
         ends = [flatCoordinates.length];
-      } else if (geometryType == GeometryType.MULTI_LINE_STRING) {
+      } else if (geometryType == 'MultiLineString') {
         ends = /** @type {import("../../geom/MultiLineString.js").default} */ (
           geometry
         ).getEnds();
-      } else if (geometryType == GeometryType.POLYGON) {
+      } else if (geometryType == 'Polygon') {
         ends = /** @type {import("../../geom/Polygon.js").default} */ (geometry)
           .getEnds()
           .slice(0, 1);
-      } else if (geometryType == GeometryType.MULTI_POLYGON) {
+      } else if (geometryType == 'MultiPolygon') {
         const endss =
           /** @type {import("../../geom/MultiPolygon.js").default} */ (
             geometry
@@ -240,33 +239,33 @@ class CanvasTextBuilder extends CanvasBuilder {
     } else {
       let geometryWidths = textState.overflow ? null : [];
       switch (geometryType) {
-        case GeometryType.POINT:
+        case 'Point':
-        case GeometryType.MULTI_POINT:
+        case 'MultiPoint':
           flatCoordinates =
             /** @type {import("../../geom/MultiPoint.js").default} */ (
               geometry
             ).getFlatCoordinates();
           break;
-        case GeometryType.LINE_STRING:
+        case 'LineString':
           flatCoordinates =
             /** @type {import("../../geom/LineString.js").default} */ (
               geometry
             ).getFlatMidpoint();
           break;
-        case GeometryType.CIRCLE:
+        case 'Circle':
           flatCoordinates =
             /** @type {import("../../geom/Circle.js").default} */ (
               geometry
             ).getCenter();
           break;
-        case GeometryType.MULTI_LINE_STRING:
+        case 'MultiLineString':
           flatCoordinates =
             /** @type {import("../../geom/MultiLineString.js").default} */ (
               geometry
             ).getFlatMidpoints();
           stride = 2;
           break;
-        case GeometryType.POLYGON:
+        case 'Polygon':
           flatCoordinates =
             /** @type {import("../../geom/Polygon.js").default} */ (
               geometry
@@ -276,7 +275,7 @@ class CanvasTextBuilder extends CanvasBuilder {
           }
           stride = 3;
           break;
-        case GeometryType.MULTI_POLYGON:
+        case 'MultiPolygon':
           const interiorPoints =
             /** @type {import("../../geom/MultiPolygon.js").default} */ (
               geometry

src/ol/render/canvas/hitdetect.js

@@ -3,7 +3,6 @@
  */
 
 import CanvasImmediateRenderer from './Immediate.js';
-import GeometryType from '../../geom/GeometryType.js';
 import IconAnchorUnits from '../../style/IconAnchorUnits.js';
 import {Icon} from '../../style.js';
 import {clamp} from '../../math.js';
@@ -121,10 +120,10 @@ export function createHitDetectionImageData(
       if (!byGeometryType) {
         byGeometryType = {};
         featuresByZIndex[zIndex] = byGeometryType;
-        byGeometryType[GeometryType.POLYGON] = [];
+        byGeometryType['Polygon'] = [];
-        byGeometryType[GeometryType.CIRCLE] = [];
+        byGeometryType['Circle'] = [];
-        byGeometryType[GeometryType.LINE_STRING] = [];
+        byGeometryType['LineString'] = [];
-        byGeometryType[GeometryType.POINT] = [];
+        byGeometryType['Point'] = [];
       }
       byGeometryType[geometry.getType().replace('Multi', '')].push(
         geometry,

src/ol/renderer/Composite.js

@@ -5,7 +5,6 @@ import MapRenderer from './Map.js';
 import ObjectEventType from '../ObjectEventType.js';
 import RenderEvent from '../render/Event.js';
 import RenderEventType from '../render/EventType.js';
-import SourceState from '../source/State.js';
 import {CLASS_UNSELECTABLE} from '../css.js';
 import {checkedFonts} from '../render/canvas.js';
 import {inView} from '../layer/Layer.js';
@@ -115,8 +114,7 @@ class CompositeMapRenderer extends MapRenderer {
       const sourceState = layer.getSourceState();
       if (
         !inView(layerState, viewState) ||
-        (sourceState != SourceState.READY &&
+        (sourceState != 'ready' && sourceState != 'undefined')
-          sourceState != SourceState.UNDEFINED)
       ) {
         layer.unrender();
         continue;

src/ol/renderer/Layer.js

@@ -4,7 +4,6 @@
 import EventType from '../events/EventType.js';
 import ImageState from '../ImageState.js';
 import Observable from '../Observable.js';
-import SourceState from '../source/State.js';
 import {abstract} from '../util.js';
 
 /**
@@ -196,11 +195,7 @@ class LayerRenderer extends Observable {
    */
   renderIfReadyAndVisible() {
     const layer = this.getLayer();
-    if (
+    if (layer && layer.getVisible() && 'ready') {
-      layer &&
-      layer.getVisible() &&
-      layer.getSourceState() == SourceState.READY
-    ) {
       layer.changed();
     }
   }

src/ol/renderer/canvas/ImageLayer.js

@@ -168,18 +168,15 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
     const viewState = frameState.viewState;
     const viewCenter = viewState.center;
     const viewResolution = viewState.resolution;
-    const size = frameState.size;
     const scale =
       (pixelRatio * imageResolution) / (viewResolution * imagePixelRatio);
 
-    let width = Math.round(size[0] * pixelRatio);
+    const extent = frameState.extent;
-    let height = Math.round(size[1] * pixelRatio);
+    const resolution = viewState.resolution;
     const rotation = viewState.rotation;
-    if (rotation) {
+    // desired dimensions of the canvas in pixels
-      const size = Math.round(Math.sqrt(width * width + height * height));
+    const width = Math.round((getWidth(extent) / resolution) * pixelRatio);
-      width = size;
+    const height = Math.round((getHeight(extent) / resolution) * pixelRatio);
-      height = size;
-    }
 
     // set forward and inverse pixel transforms
     composeTransform(
@@ -196,12 +193,7 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
 
     const canvasTransform = toTransformString(this.pixelTransform);
 
-    this.useContainer(
+    this.useContainer(target, canvasTransform, this.getBackground(frameState));
-      target,
-      canvasTransform,
-      layerState.opacity,
-      this.getBackground(frameState)
-    );
 
     const context = this.context;
     const canvas = context.canvas;
@@ -260,17 +252,7 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
         previousAlpha = context.globalAlpha;
         context.globalAlpha = opacity;
       }
-      context.drawImage(
+      context.drawImage(img, 0, 0, +img.width, +img.height, dx, dy, dw, dh);
-        img,
-        0,
-        0,
-        +img.width,
-        +img.height,
-        Math.round(dx),
-        Math.round(dy),
-        Math.round(dw),
-        Math.round(dh)
-      );
       if (opacity !== 1) {
         context.globalAlpha = previousAlpha;
       }

src/ol/renderer/canvas/Layer.js

@@ -20,6 +20,11 @@ import {
 import {createCanvasContext2D} from '../../dom.js';
 import {equals} from '../../array.js';
 
+/**
+ * @type {Array<HTMLCanvasElement>}
+ */
+export const canvasPool = [];
+
 /**
  * @type {CanvasRenderingContext2D}
  */
@@ -143,17 +148,14 @@ class CanvasLayerRenderer extends LayerRenderer {
    * Get a rendering container from an existing target, if compatible.
    * @param {HTMLElement} target Potential render target.
    * @param {string} transform CSS Transform.
-   * @param {number} opacity Opacity.
    * @param {string} [opt_backgroundColor] Background color.
    */
-  useContainer(target, transform, opacity, opt_backgroundColor) {
+  useContainer(target, transform, opt_backgroundColor) {
     const layerClassName = this.getLayer().getClassName();
     let container, context;
     if (
       target &&
       target.className === layerClassName &&
-      target.style.opacity === '' &&
-      opacity === 1 &&
       (!opt_backgroundColor ||
         (target &&
           target.style.backgroundColor &&

src/ol/renderer/canvas/TileLayer.js

@@ -18,11 +18,13 @@ import {
   containsCoordinate,
   createEmpty,
   equals,
+  getHeight,
   getIntersection,
+  getRotatedViewport,
   getTopLeft,
+  getWidth,
   intersects,
 } from '../../extent.js';
-import {cssOpacity} from '../../css.js';
 import {fromUserExtent} from '../../proj.js';
 import {getUid} from '../../util.js';
 import {numberSafeCompareFunction} from '../../array.js';
@@ -263,6 +265,12 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
     const tileResolution = tileGrid.getResolution(z);
 
     let extent = frameState.extent;
+    const resolution = frameState.viewState.resolution;
+    const tilePixelRatio = tileSource.getTilePixelRatio(pixelRatio);
+    // desired dimensions of the canvas in pixels
+    const width = Math.round((getWidth(extent) / resolution) * pixelRatio);
+    const height = Math.round((getHeight(extent) / resolution) * pixelRatio);
+
     const layerExtent =
       layerState.extent && fromUserExtent(layerState.extent, projection);
     if (layerExtent) {
@@ -272,18 +280,6 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
       );
     }
 
-    const tilePixelRatio = tileSource.getTilePixelRatio(pixelRatio);
-
-    // desired dimensions of the canvas in pixels
-    let width = Math.round(frameState.size[0] * tilePixelRatio);
-    let height = Math.round(frameState.size[1] * tilePixelRatio);
-
-    if (rotation) {
-      const size = Math.round(Math.sqrt(width * width + height * height));
-      width = size;
-      height = size;
-    }
-
     const dx = (tileResolution * width) / 2 / tilePixelRatio;
     const dy = (tileResolution * height) / 2 / tilePixelRatio;
     const canvasExtent = [
@@ -310,14 +306,33 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
     const tmpExtent = this.tmpExtent;
     const tmpTileRange = this.tmpTileRange_;
     this.newTiles_ = false;
+    const viewport = rotation
+      ? getRotatedViewport(
+          viewState.center,
+          resolution,
+          rotation,
+          frameState.size
+        )
+      : undefined;
     for (let x = tileRange.minX; x <= tileRange.maxX; ++x) {
       for (let y = tileRange.minY; y <= tileRange.maxY; ++y) {
+        if (
+          rotation &&
+          !tileGrid.tileCoordIntersectsViewport([z, x, y], viewport)
+        ) {
+          continue;
+        }
         const tile = this.getTile(z, x, y, frameState);
         if (this.isDrawableTile(tile)) {
           const uid = getUid(this);
           if (tile.getState() == TileState.LOADED) {
             tilesToDrawByZ[z][tile.tileCoord.toString()] = tile;
-            const inTransition = tile.inTransition(uid);
+            let inTransition = tile.inTransition(uid);
+            if (inTransition && layerState.opacity !== 1) {
+              // Skipping transition when layer is not fully opaque avoids visual artifacts.
+              tile.endTransition(uid);
+              inTransition = false;
+            }
             if (
               !this.newTiles_ &&
               (inTransition || this.renderedTiles.indexOf(tile) === -1)
@@ -352,15 +367,16 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
       }
     }
 
-    const canvasScale = tileResolution / viewResolution;
+    const canvasScale =
+      ((tileResolution / viewResolution) * pixelRatio) / tilePixelRatio;
 
     // set forward and inverse pixel transforms
     composeTransform(
       this.pixelTransform,
       frameState.size[0] / 2,
       frameState.size[1] / 2,
-      1 / tilePixelRatio,
+      1 / pixelRatio,
-      1 / tilePixelRatio,
+      1 / pixelRatio,
       rotation,
       -width / 2,
       -height / 2
@@ -368,12 +384,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
 
     const canvasTransform = toTransformString(this.pixelTransform);
 
-    this.useContainer(
+    this.useContainer(target, canvasTransform, this.getBackground(frameState));
-      target,
-      canvasTransform,
-      layerState.opacity,
-      this.getBackground(frameState)
-    );
     const context = this.context;
     const canvas = context.canvas;
 
@@ -559,11 +570,6 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
     if (canvasTransform !== canvas.style.transform) {
       canvas.style.transform = canvasTransform;
     }
-    const opacity = cssOpacity(layerState.opacity);
-    const container = this.container;
-    if (opacity !== container.style.opacity) {
-      container.style.opacity = opacity;
-    }
 
     return this.container;
   }
@@ -584,7 +590,10 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
       return;
     }
     const uid = getUid(this);
-    const alpha = transition ? tile.getAlpha(uid, frameState.time) : 1;
+    const layerState = frameState.layerStatesArray[frameState.layerIndex];
+    const alpha =
+      layerState.opacity *
+      (transition ? tile.getAlpha(uid, frameState.time) : 1);
     const alphaChanged = alpha !== this.context.globalAlpha;
     if (alphaChanged) {
       this.context.save();
@@ -605,7 +614,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
     if (alphaChanged) {
       this.context.restore();
     }
-    if (alpha !== 1) {
+    if (alpha !== layerState.opacity) {
       frameState.animate = true;
     } else if (transition) {
       tile.endTransition(uid);
@@ -711,6 +720,15 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
     const wantedTiles = frameState.wantedTiles[tileSourceKey];
     const tileQueue = frameState.tileQueue;
     const minZoom = tileGrid.getMinZoom();
+    const rotation = frameState.viewState.rotation;
+    const viewport = rotation
+      ? getRotatedViewport(
+          frameState.viewState.center,
+          frameState.viewState.resolution,
+          rotation,
+          frameState.size
+        )
+      : undefined;
     let tileCount = 0;
     let tile, tileRange, tileResolution, x, y, z;
     for (z = minZoom; z <= currentZ; ++z) {
@@ -718,6 +736,12 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
       tileResolution = tileGrid.getResolution(z);
       for (x = tileRange.minX; x <= tileRange.maxX; ++x) {
         for (y = tileRange.minY; y <= tileRange.maxY; ++y) {
+          if (
+            rotation &&
+            !tileGrid.tileCoordIntersectsViewport([z, x, y], viewport)
+          ) {
+            continue;
+          }
           if (currentZ - z <= preload) {
             ++tileCount;
             tile = tileSource.getTile(z, x, y, pixelRatio, projection);

src/ol/renderer/canvas/VectorImageLayer.js

@@ -105,8 +105,11 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
       !hints[ViewHint.INTERACTING] &&
       !isEmpty(renderedExtent)
     ) {
-      vectorRenderer.useContainer(null, null, 1);
+      vectorRenderer.useContainer(null, null);
       const context = vectorRenderer.context;
+      const layerState = frameState.layerStatesArray[frameState.layerIndex];
+      context.globalAlpha = layerState.opacity;
+      const imageLayerState = assign({}, layerState, {opacity: 1});
       const imageFrameState =
         /** @type {import("../../PluggableMap.js").FrameState} */ (
           assign({}, frameState, {
@@ -118,6 +121,8 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
                 rotation: 0,
               })
             ),
+            layerStatesArray: [imageLayerState],
+            layerIndex: 0,
           })
         );
       let emptyImage = true;

src/ol/renderer/canvas/VectorLayer.js

@@ -2,7 +2,7 @@
  * @module ol/renderer/canvas/VectorLayer
  */
 import CanvasBuilderGroup from '../../render/canvas/BuilderGroup.js';
-import CanvasLayerRenderer from './Layer.js';
+import CanvasLayerRenderer, {canvasPool} from './Layer.js';
 import ExecutorGroup from '../../render/canvas/ExecutorGroup.js';
 import ViewHint from '../../ViewHint.js';
 import {
@@ -24,7 +24,7 @@ import {
   intersects as intersectsExtent,
   wrapX as wrapExtentX,
 } from '../../extent.js';
-import {cssOpacity} from '../../css.js';
+import {createCanvasContext2D, releaseCanvas} from '../../dom.js';
 import {
   defaultOrder as defaultRenderOrder,
   getTolerance as getRenderTolerance,
@@ -142,6 +142,18 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
      * @type {boolean}
      */
     this.clipping = true;
+
+    /**
+     * @private
+     * @type {CanvasRenderingContext2D}
+     */
+    this.compositionContext_ = null;
+
+    /**
+     * @private
+     * @type {number}
+     */
+    this.opacity_ = 1;
   }
 
   /**
@@ -163,7 +175,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     const snapToPixel = !(
       viewHints[ViewHint.ANIMATING] || viewHints[ViewHint.INTERACTING]
     );
-    const context = this.context;
+    const context = this.compositionContext_;
     const width = Math.round(frameState.size[0] * pixelRatio);
     const height = Math.round(frameState.size[1] * pixelRatio);
 
@@ -197,17 +209,44 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     } while (++world < endWorld);
   }
 
+  setupCompositionContext_() {
+    if (this.opacity_ !== 1) {
+      const compositionContext = createCanvasContext2D(
+        this.context.canvas.width,
+        this.context.canvas.height,
+        canvasPool
+      );
+      this.compositionContext_ = compositionContext;
+    } else {
+      this.compositionContext_ = this.context;
+    }
+  }
+
+  releaseCompositionContext_() {
+    if (this.opacity_ !== 1) {
+      const alpha = this.context.globalAlpha;
+      this.context.globalAlpha = this.opacity_;
+      this.context.drawImage(this.compositionContext_.canvas, 0, 0);
+      this.context.globalAlpha = alpha;
+      releaseCanvas(this.compositionContext_);
+      canvasPool.push(this.compositionContext_.canvas);
+      this.compositionContext_ = null;
+    }
+  }
+
   /**
    * Render declutter items for this layer
    * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
    */
   renderDeclutter(frameState) {
     if (this.declutterExecutorGroup) {
+      this.setupCompositionContext_();
       this.renderWorlds(
         this.declutterExecutorGroup,
         frameState,
         frameState.declutterTree
       );
+      this.releaseCompositionContext_();
     }
   }
 
@@ -227,12 +266,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
 
     const canvasTransform = transformToString(this.pixelTransform);
 
-    this.useContainer(
+    this.useContainer(target, canvasTransform, this.getBackground(frameState));
-      target,
-      canvasTransform,
-      layerState.opacity,
-      this.getBackground(frameState)
-    );
     const context = this.context;
     const canvas = context.canvas;
 
@@ -263,6 +297,9 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     const viewState = frameState.viewState;
     const projection = viewState.projection;
 
+    this.opacity_ = layerState.opacity;
+    this.setupCompositionContext_();
+
     // clipped rendering if layer extent is set
     let clipped = false;
     let render = true;
@@ -271,7 +308,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
       render = intersectsExtent(layerExtent, frameState.extent);
       clipped = render && !containsExtent(layerExtent, frameState.extent);
       if (clipped) {
-        this.clipUnrotated(context, frameState, layerExtent);
+        this.clipUnrotated(this.compositionContext_, frameState, layerExtent);
       }
     }
 
@@ -280,17 +317,13 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     }
 
     if (clipped) {
-      context.restore();
+      this.compositionContext_.restore();
     }
 
+    this.releaseCompositionContext_();
+
     this.postRender(context, frameState);
 
-    const opacity = cssOpacity(layerState.opacity);
-    const container = this.container;
-    if (opacity !== container.style.opacity) {
-      container.style.opacity = opacity;
-    }
-
     if (this.renderedRotation_ !== viewState.rotation) {
       this.renderedRotation_ = viewState.rotation;
       this.hitDetectionImageData_ = null;

src/ol/renderer/canvas/VectorTileLayer.js

@@ -4,7 +4,6 @@
 import CanvasBuilderGroup from '../../render/canvas/BuilderGroup.js';
 import CanvasExecutorGroup from '../../render/canvas/ExecutorGroup.js';
 import CanvasTileLayerRenderer from './TileLayer.js';
-import ReplayType from '../../render/canvas/BuilderType.js';
 import TileState from '../../TileState.js';
 import VectorTileRenderType from '../../layer/VectorTileRenderType.js';
 import ViewHint from '../../ViewHint.js';
@@ -40,33 +39,20 @@ import {toSize} from '../../size.js';
 import {wrapX} from '../../coordinate.js';
 
 /**
- * @type {!Object<string, Array<import("../../render/canvas/BuilderType.js").default>>}
+ * @type {!Object<string, Array<import("../../render/canvas.js").BuilderType>>}
  */
 const IMAGE_REPLAYS = {
-  'image': [
+  'image': ['Polygon', 'Circle', 'LineString', 'Image', 'Text'],
-    ReplayType.POLYGON,
+  'hybrid': ['Polygon', 'LineString'],
-    ReplayType.CIRCLE,
-    ReplayType.LINE_STRING,
-    ReplayType.IMAGE,
-    ReplayType.TEXT,
-  ],
-  'hybrid': [ReplayType.POLYGON, ReplayType.LINE_STRING],
   'vector': [],
 };
 
 /**
- * @type {!Object<string, Array<import("../../render/canvas/BuilderType.js").default>>}
+ * @type {!Object<string, Array<import("../../render/canvas.js").BuilderType>>}
  */
 const VECTOR_REPLAYS = {
-  'hybrid': [ReplayType.IMAGE, ReplayType.TEXT, ReplayType.DEFAULT],
+  'hybrid': ['Image', 'Text', 'Default'],
-  'vector': [
+  'vector': ['Polygon', 'Circle', 'LineString', 'Image', 'Text', 'Default'],
-    ReplayType.POLYGON,
-    ReplayType.CIRCLE,
-    ReplayType.LINE_STRING,
-    ReplayType.IMAGE,
-    ReplayType.TEXT,
-    ReplayType.DEFAULT,
-  ],
 };
 
 /**

src/ol/renderer/vector.js

@@ -1,8 +1,6 @@
 /**
  * @module ol/renderer/vector
  */
-import BuilderType from '../render/canvas/BuilderType.js';
-import GeometryType from '../geom/GeometryType.js';
 import ImageState from '../ImageState.js';
 import {getUid} from '../util.js';
 
@@ -24,7 +22,7 @@ const SIMPLIFY_TOLERANCE = 0.5;
 
 /**
  * @const
- * @type {Object<import("../geom/GeometryType.js").default,
+ * @type {Object<import("../geom/Geometry.js").Type,
  *                function(import("../render/canvas/BuilderGroup.js").default, import("../geom/Geometry.js").default,
  *                         import("../style/Style.js").default, Object): void>}
  */
@@ -84,10 +82,7 @@ function renderCircleGeometry(
   const fillStyle = style.getFill();
   const strokeStyle = style.getStroke();
   if (fillStyle || strokeStyle) {
-    const circleReplay = builderGroup.getBuilder(
+    const circleReplay = builderGroup.getBuilder(style.getZIndex(), 'Circle');
-      style.getZIndex(),
-      BuilderType.CIRCLE
-    );
     circleReplay.setFillStrokeStyle(fillStyle, strokeStyle);
     circleReplay.drawCircle(geometry, feature);
   }
@@ -95,7 +90,7 @@ function renderCircleGeometry(
   if (textStyle && textStyle.getText()) {
     const textReplay = (opt_declutterBuilderGroup || builderGroup).getBuilder(
       style.getZIndex(),
-      BuilderType.TEXT
+      'Text'
     );
     textReplay.setTextStyle(textStyle);
     textReplay.drawText(geometry, feature);
@@ -193,7 +188,7 @@ function renderFeatureInternal(
  * @param {import("../Feature.js").FeatureLike} feature Feature.
  */
 function renderGeometry(replayGroup, geometry, style, feature) {
-  if (geometry.getType() == GeometryType.GEOMETRY_COLLECTION) {
+  if (geometry.getType() == 'GeometryCollection') {
     const geometries =
       /** @type {import("../geom/GeometryCollection.js").default} */ (
         geometry
@@ -203,7 +198,7 @@ function renderGeometry(replayGroup, geometry, style, feature) {
     }
     return;
   }
-  const replay = replayGroup.getBuilder(style.getZIndex(), BuilderType.DEFAULT);
+  const replay = replayGroup.getBuilder(style.getZIndex(), 'Default');
   replay.drawCustom(
     /** @type {import("../geom/SimpleGeometry.js").default} */ (geometry),
     feature,
@@ -258,7 +253,7 @@ function renderLineStringGeometry(
   if (strokeStyle) {
     const lineStringReplay = builderGroup.getBuilder(
       style.getZIndex(),
-      BuilderType.LINE_STRING
+      'LineString'
     );
     lineStringReplay.setFillStrokeStyle(null, strokeStyle);
     lineStringReplay.drawLineString(geometry, feature);
@@ -267,7 +262,7 @@ function renderLineStringGeometry(
   if (textStyle && textStyle.getText()) {
     const textReplay = (opt_declutterBuilderGroup || builderGroup).getBuilder(
       style.getZIndex(),
-      BuilderType.TEXT
+      'Text'
     );
     textReplay.setTextStyle(textStyle);
     textReplay.drawText(geometry, feature);
@@ -292,7 +287,7 @@ function renderMultiLineStringGeometry(
   if (strokeStyle) {
     const lineStringReplay = builderGroup.getBuilder(
       style.getZIndex(),
-      BuilderType.LINE_STRING
+      'LineString'
     );
     lineStringReplay.setFillStrokeStyle(null, strokeStyle);
     lineStringReplay.drawMultiLineString(geometry, feature);
@@ -301,7 +296,7 @@ function renderMultiLineStringGeometry(
   if (textStyle && textStyle.getText()) {
     const textReplay = (opt_declutterBuilderGroup || builderGroup).getBuilder(
       style.getZIndex(),
-      BuilderType.TEXT
+      'Text'
     );
     textReplay.setTextStyle(textStyle);
     textReplay.drawText(geometry, feature);
@@ -325,10 +320,7 @@ function renderMultiPolygonGeometry(
   const fillStyle = style.getFill();
   const strokeStyle = style.getStroke();
   if (strokeStyle || fillStyle) {
-    const polygonReplay = builderGroup.getBuilder(
+    const polygonReplay = builderGroup.getBuilder(style.getZIndex(), 'Polygon');
-      style.getZIndex(),
-      BuilderType.POLYGON
-    );
     polygonReplay.setFillStrokeStyle(fillStyle, strokeStyle);
     polygonReplay.drawMultiPolygon(geometry, feature);
   }
@@ -336,7 +328,7 @@ function renderMultiPolygonGeometry(
   if (textStyle && textStyle.getText()) {
     const textReplay = (opt_declutterBuilderGroup || builderGroup).getBuilder(
       style.getZIndex(),
-      BuilderType.TEXT
+      'Text'
     );
     textReplay.setTextStyle(textStyle);
     textReplay.drawText(geometry, feature);
@@ -374,7 +366,7 @@ function renderPointGeometry(
           // draw in non-declutter group:
           const imageReplay = builderGroup.getBuilder(
             style.getZIndex(),
-            BuilderType.IMAGE
+            'Image'
           );
           imageReplay.setImageStyle(imageStyle, declutterImageWithText);
           imageReplay.drawPoint(geometry, feature);
@@ -385,7 +377,7 @@ function renderPointGeometry(
     }
     const imageReplay = imageBuilderGroup.getBuilder(
       style.getZIndex(),
-      BuilderType.IMAGE
+      'Image'
     );
     imageReplay.setImageStyle(imageStyle, declutterImageWithText);
     imageReplay.drawPoint(geometry, feature);
@@ -395,10 +387,7 @@ function renderPointGeometry(
     if (opt_declutterBuilderGroup) {
       textBuilderGroup = opt_declutterBuilderGroup;
     }
-    const textReplay = textBuilderGroup.getBuilder(
+    const textReplay = textBuilderGroup.getBuilder(style.getZIndex(), 'Text');
-      style.getZIndex(),
-      BuilderType.TEXT
-    );
     textReplay.setTextStyle(textStyle, declutterImageWithText);
     textReplay.drawText(geometry, feature);
   }
@@ -435,7 +424,7 @@ function renderMultiPointGeometry(
           // draw in non-declutter group:
           const imageReplay = builderGroup.getBuilder(
             style.getZIndex(),
-            BuilderType.IMAGE
+            'Image'
           );
           imageReplay.setImageStyle(imageStyle, declutterImageWithText);
           imageReplay.drawMultiPoint(geometry, feature);
@@ -446,7 +435,7 @@ function renderMultiPointGeometry(
     }
     const imageReplay = imageBuilderGroup.getBuilder(
       style.getZIndex(),
-      BuilderType.IMAGE
+      'Image'
     );
     imageReplay.setImageStyle(imageStyle, declutterImageWithText);
     imageReplay.drawMultiPoint(geometry, feature);
@@ -456,10 +445,7 @@ function renderMultiPointGeometry(
     if (opt_declutterBuilderGroup) {
       textBuilderGroup = opt_declutterBuilderGroup;
     }
-    const textReplay = textBuilderGroup.getBuilder(
+    const textReplay = textBuilderGroup.getBuilder(style.getZIndex(), 'Text');
-      style.getZIndex(),
-      BuilderType.TEXT
-    );
     textReplay.setTextStyle(textStyle, declutterImageWithText);
     textReplay.drawText(geometry, feature);
   }
@@ -482,10 +468,7 @@ function renderPolygonGeometry(
   const fillStyle = style.getFill();
   const strokeStyle = style.getStroke();
   if (fillStyle || strokeStyle) {
-    const polygonReplay = builderGroup.getBuilder(
+    const polygonReplay = builderGroup.getBuilder(style.getZIndex(), 'Polygon');
-      style.getZIndex(),
-      BuilderType.POLYGON
-    );
     polygonReplay.setFillStrokeStyle(fillStyle, strokeStyle);
     polygonReplay.drawPolygon(geometry, feature);
   }
@@ -493,7 +476,7 @@ function renderPolygonGeometry(
   if (textStyle && textStyle.getText()) {
     const textReplay = (opt_declutterBuilderGroup || builderGroup).getBuilder(
       style.getZIndex(),
-      BuilderType.TEXT
+      'Text'
     );
     textReplay.setTextStyle(textStyle);
     textReplay.drawText(geometry, feature);

src/ol/renderer/webgl/PointsLayer.js

@@ -2,7 +2,6 @@
  * @module ol/renderer/webgl/PointsLayer
  */
 import BaseVector from '../../layer/BaseVector.js';
-import GeometryType from '../../geom/GeometryType.js';
 import VectorEventType from '../../source/VectorEventType.js';
 import ViewHint from '../../ViewHint.js';
 import WebGLArrayBuffer from '../../webgl/Buffer.js';
@@ -599,7 +598,7 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
       geometry = /** @type {import("../../geom").Point} */ (
         featureCache.geometry
       );
-      if (!geometry || geometry.getType() !== GeometryType.POINT) {
+      if (!geometry || geometry.getType() !== 'Point') {
         continue;
       }
 

src/ol/renderer/webgl/TileLayer.js

@@ -2,7 +2,6 @@
  * @module ol/renderer/webgl/TileLayer
  */
 import LRUCache from '../../structs/LRUCache.js';
-import State from '../../source/State.js';
 import TileRange from '../../TileRange.js';
 import TileState from '../../TileState.js';
 import TileTexture from '../../webgl/TileTexture.js';
@@ -309,7 +308,7 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
     if (isEmpty(getRenderExtent(frameState, frameState.extent))) {
       return false;
     }
-    return source.getState() === State.READY;
+    return source.getState() === 'ready';
   }
 
   /**
@@ -726,7 +725,7 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
     let i, source, tileGrid;
     for (i = sources.length - 1; i >= 0; --i) {
       source = sources[i];
-      if (source.getState() === State.READY) {
+      if (source.getState() === 'ready') {
         tileGrid = source.getTileGridForProjection(viewState.projection);
         if (source.getWrapX()) {
           break;

src/ol/reproj.js

@@ -19,6 +19,11 @@ import {solveLinearSystem} from './math.js';
 
 let brokenDiagonalRendering_;
 
+/**
+ * @type {Array<HTMLCanvasElement>}
+ */
+export const canvasPool = [];
+
 /**
  * This draws a small triangle into a canvas by setting the triangle as the clip region
  * and then drawing a (too large) rectangle
@@ -217,7 +222,8 @@ export function render(
 ) {
   const context = createCanvasContext2D(
     Math.round(pixelRatio * width),
-    Math.round(pixelRatio * height)
+    Math.round(pixelRatio * height),
+    canvasPool
   );
 
   if (!opt_interpolate) {

src/ol/reproj/Tile.js

@@ -9,11 +9,13 @@ import TileState from '../TileState.js';
 import Triangulation from './Triangulation.js';
 import {
   calculateSourceExtentResolution,
+  canvasPool,
   render as renderReprojected,
 } from '../reproj.js';
 import {clamp} from '../math.js';
 import {getArea, getIntersection} from '../extent.js';
 import {listen, unlistenByKey} from '../events.js';
+import {releaseCanvas} from '../dom.js';
 
 /**
  * @typedef {function(number, number, number, number) : import("../Tile.js").default} FunctionType
@@ -349,6 +351,18 @@ class ReprojTile extends Tile {
     this.sourcesListenerKeys_.forEach(unlistenByKey);
     this.sourcesListenerKeys_ = null;
   }
+
+  /**
+   * Remove from the cache due to expiry
+   */
+  release() {
+    if (this.canvas_) {
+      releaseCanvas(this.canvas_.getContext('2d'));
+      canvasPool.push(this.canvas_);
+      this.canvas_ = null;
+    }
+    super.release();
+  }
 }
 
 export default ReprojTile;

src/ol/source/BingMaps.js

@@ -2,7 +2,6 @@
  * @module ol/source/BingMaps
  */
 
-import SourceState from './State.js';
 import TileImage from './TileImage.js';
 import {applyTransform, intersects} from '../extent.js';
 import {createFromTileUrlFunctions} from '../tileurlfunction.js';
@@ -135,7 +134,7 @@ class BingMaps extends TileImage {
       opaque: true,
       projection: getProjection('EPSG:3857'),
       reprojectionErrorThreshold: options.reprojectionErrorThreshold,
-      state: SourceState.LOADING,
+      state: 'loading',
       tileLoadFunction: options.tileLoadFunction,
       tilePixelRatio: hidpi ? 2 : 1,
       wrapX: options.wrapX !== undefined ? options.wrapX : true,
@@ -220,7 +219,7 @@ class BingMaps extends TileImage {
       response.resourceSets.length != 1 ||
       response.resourceSets[0].resources.length != 1
     ) {
-      this.setState(SourceState.ERROR);
+      this.setState('error');
       return;
     }
 
@@ -329,7 +328,7 @@ class BingMaps extends TileImage {
       );
     }
 
-    this.setState(SourceState.READY);
+    this.setState('ready');
   }
 }
 

src/ol/source/CartoDB.js

@@ -2,7 +2,6 @@
  * @module ol/source/CartoDB
  */
 
-import SourceState from './State.js';
 import XYZ from './XYZ.js';
 import {assign} from '../obj.js';
 
@@ -165,14 +164,14 @@ class CartoDB extends XYZ {
           JSON.parse(client.responseText)
         );
       } catch (err) {
-        this.setState(SourceState.ERROR);
+        this.setState('error');
         return;
       }
       this.applyTemplate_(response);
       this.templateCache_[paramHash] = response;
-      this.setState(SourceState.READY);
+      this.setState('ready');
     } else {
-      this.setState(SourceState.ERROR);
+      this.setState('error');
     }
   }
 
@@ -181,7 +180,7 @@ class CartoDB extends XYZ {
    * @param {Event} event Event.
    */
   handleInitError_(event) {
-    this.setState(SourceState.ERROR);
+    this.setState('error');
   }
 
   /**

src/ol/source/Cluster.js

@@ -4,7 +4,6 @@
 
 import EventType from '../events/EventType.js';
 import Feature from '../Feature.js';
-import GeometryType from '../geom/GeometryType.js';
 import Point from '../geom/Point.js';
 import VectorSource from './Vector.js';
 import {add as addCoordinate, scale as scaleCoordinate} from '../coordinate.js';
@@ -116,7 +115,7 @@ class Cluster extends VectorSource {
       options.geometryFunction ||
       function (feature) {
         const geometry = /** @type {Point} */ (feature.getGeometry());
-        assert(geometry.getType() == GeometryType.POINT, 10); // The default `geometryFunction` can only handle `Point` geometries
+        assert(geometry.getType() == 'Point', 10); // The default `geometryFunction` can only handle `Point` geometries
         return geometry;
       };
 

src/ol/source/DataTile.js

@@ -36,7 +36,7 @@ import {toSize} from '../size.js';
  * @property {import("../proj.js").ProjectionLike} [projection='EPSG:3857'] Tile projection.
  * @property {import("../tilegrid/TileGrid.js").default} [tileGrid] Tile grid.
  * @property {boolean} [opaque=false] Whether the layer is opaque.
- * @property {import("./State.js").default} [state] The source state.
+ * @property {import("./Source.js").State} [state] The source state.
  * @property {number} [tilePixelRatio] Deprecated.  To have tiles scaled, pass a `tileSize` representing
  * the source tile size and a `tileGrid` with the desired rendered tile size.
  * @property {boolean} [wrapX=false] Render tiles beyond the antimeridian.

src/ol/source/GeoTIFF.js

@@ -2,7 +2,6 @@
  * @module ol/source/GeoTIFF
  */
 import DataTile from './DataTile.js';
-import State from './State.js';
 import TileGrid from '../tilegrid/TileGrid.js';
 import {
   Pool,
@@ -335,7 +334,7 @@ class GeoTIFFSource extends DataTile {
    */
   constructor(options) {
     super({
-      state: State.LOADING,
+      state: 'loading',
       tileGrid: null,
       projection: null,
       opaque: options.opaque,
@@ -428,7 +427,7 @@ class GeoTIFFSource extends DataTile {
       .catch(function (error) {
         console.error(error); // eslint-disable-line no-console
         self.error_ = error;
-        self.setState(State.ERROR);
+        self.setState('error');
       });
   }
 
@@ -650,7 +649,7 @@ class GeoTIFFSource extends DataTile {
     this.setTileSizes(commonSourceTileSizes);
 
     this.setLoader(this.loadTile_.bind(this));
-    this.setState(State.READY);
+    this.setState('ready');
     this.viewResolver({
       projection: this.projection,
       resolutions: resolutions,

src/ol/source/IIIF.js

@@ -32,7 +32,7 @@ import {toSize} from '../size.js';
  * @property {import("../size.js").Size} size Size of the image [width, height].
  * @property {Array<import("../size.js").Size>} [sizes] Supported scaled image sizes.
  * Content of the IIIF info.json 'sizes' property, but as array of Size objects.
- * @property {import("./State.js").default} [state] Source state.
+ * @property {import("./Source.js").State} [state] Source state.
  * @property {Array<string>} [supports=[]] Supported IIIF region and size calculation
  * features.
  * @property {number} [tilePixelRatio] Tile pixel ratio.

src/ol/source/Image.js

@@ -80,7 +80,7 @@ export class ImageSourceEvent extends Event {
  * linear interpolation is used when resampling.  Set to false to use the nearest neighbor instead.
  * @property {import("../proj.js").ProjectionLike} [projection] Projection.
  * @property {Array<number>} [resolutions] Resolutions.
- * @property {import("./State.js").default} [state] State.
+ * @property {import("./Source.js").State} [state] State.
  */
 
 /**

src/ol/source/ImageCanvas.js

@@ -44,7 +44,7 @@ import {
  * width and height of the map viewport, and so on. Must be `1` or higher.
  * @property {Array<number>} [resolutions] Resolutions.
  * If specified, new canvases will be created for these resolutions
- * @property {import("./State.js").default} [state] Source state.
+ * @property {import("./Source.js").State} [state] Source state.
  */
 
 /**

src/ol/source/ImageWMS.js

@@ -2,12 +2,10 @@
  * @module ol/source/ImageWMS
  */
 
-import {DEFAULT_WMS_VERSION} from './common.js';
-
 import EventType from '../events/EventType.js';
 import ImageSource, {defaultImageLoadFunction} from './Image.js';
 import ImageWrapper from '../Image.js';
-import WMSServerType from './WMSServerType.js';
+import {DEFAULT_VERSION} from './wms.js';
 import {appendParams} from '../uri.js';
 import {assert} from '../asserts.js';
 import {assign} from '../obj.js';
@@ -43,8 +41,9 @@ const GETFEATUREINFO_IMAGE_SIZE = [101, 101];
  * See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail.
  * @property {boolean} [hidpi=true] Use the `ol/Map#pixelRatio` value when requesting
  * the image from the remote server.
- * @property {import("./WMSServerType.js").default|string} [serverType] The type of
+ * @property {import("./wms.js").ServerType} [serverType] The type of
- * the remote WMS server: `mapserver`, `geoserver` or `qgis`. Only needed if `hidpi` is `true`.
+ * the remote WMS server: `mapserver`, `geoserver`, `carmentaserver`, or `qgis`.
+ * Only needed if `hidpi` is `true`.
  * @property {import("../Image.js").LoadFunction} [imageLoadFunction] Optional function to load an image given a URL.
  * @property {boolean} [imageSmoothing=true] Deprecated.  Use the `interpolate` option instead.
  * @property {boolean} [interpolate=true] Use interpolated values when resampling.  By default,
@@ -126,12 +125,9 @@ class ImageWMS extends ImageSource {
 
     /**
      * @private
-     * @type {import("./WMSServerType.js").default|undefined}
+     * @type {import("./wms.js").ServerType}
      */
-    this.serverType_ =
+    this.serverType_ = options.serverType;
-      /** @type {import("./WMSServerType.js").default|undefined} */ (
-        options.serverType
-      );
 
     /**
      * @private
@@ -204,7 +200,7 @@ class ImageWMS extends ImageSource {
 
     const baseParams = {
       'SERVICE': 'WMS',
-      'VERSION': DEFAULT_WMS_VERSION,
+      'VERSION': DEFAULT_VERSION,
       'REQUEST': 'GetFeatureInfo',
       'FORMAT': 'image/png',
       'TRANSPARENT': true,
@@ -247,7 +243,7 @@ class ImageWMS extends ImageSource {
 
     const baseParams = {
       'SERVICE': 'WMS',
-      'VERSION': DEFAULT_WMS_VERSION,
+      'VERSION': DEFAULT_VERSION,
       'REQUEST': 'GetLegendGraphic',
       'FORMAT': 'image/png',
     };
@@ -337,7 +333,7 @@ class ImageWMS extends ImageSource {
 
     const params = {
       'SERVICE': 'WMS',
-      'VERSION': DEFAULT_WMS_VERSION,
+      'VERSION': DEFAULT_VERSION,
       'REQUEST': 'GetMap',
       'FORMAT': 'image/png',
       'TRANSPARENT': true,
@@ -409,7 +405,7 @@ class ImageWMS extends ImageSource {
 
     if (pixelRatio != 1) {
       switch (this.serverType_) {
-        case WMSServerType.GEOSERVER:
+        case 'geoserver':
           const dpi = (90 * pixelRatio + 0.5) | 0;
           if ('FORMAT_OPTIONS' in params) {
             params['FORMAT_OPTIONS'] += ';dpi:' + dpi;
@@ -417,11 +413,11 @@ class ImageWMS extends ImageSource {
             params['FORMAT_OPTIONS'] = 'dpi:' + dpi;
           }
           break;
-        case WMSServerType.MAPSERVER:
+        case 'mapserver':
           params['MAP_RESOLUTION'] = 90 * pixelRatio;
           break;
-        case WMSServerType.CARMENTA_SERVER:
+        case 'carmentaserver':
-        case WMSServerType.QGIS:
+        case 'qgis':
           params['DPI'] = 90 * pixelRatio;
           break;
         default: // Unknown `serverType` configured
@@ -494,7 +490,7 @@ class ImageWMS extends ImageSource {
    * @private
    */
   updateV13_() {
-    const version = this.params_['VERSION'] || DEFAULT_WMS_VERSION;
+    const version = this.params_['VERSION'] || DEFAULT_VERSION;
     this.v13_ = compareVersions(version, '1.3') >= 0;
   }
 }

src/ol/source/OGCMapTile.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/source/OGCMapTile
  */
-import SourceState from './State.js';
 import TileImage from './TileImage.js';
 import {getTileSetInfo} from './ogcTileUtil.js';
 
@@ -60,7 +59,7 @@ class OGCMapTile extends TileImage {
       interpolate: interpolate,
       projection: options.projection,
       reprojectionErrorThreshold: options.reprojectionErrorThreshold,
-      state: SourceState.LOADING,
+      state: 'loading',
       tileLoadFunction: options.tileLoadFunction,
       wrapX: options.wrapX !== undefined ? options.wrapX : true,
       transition: options.transition,
@@ -85,7 +84,7 @@ class OGCMapTile extends TileImage {
   handleTileSetInfo_(tileSetInfo) {
     this.tileGrid = tileSetInfo.grid;
     this.setTileUrlFunction(tileSetInfo.urlFunction, tileSetInfo.urlTemplate);
-    this.setState(SourceState.READY);
+    this.setState('ready');
   }
 
   /**
@@ -94,7 +93,7 @@ class OGCMapTile extends TileImage {
    */
   handleError_(error) {
     console.error(error); // eslint-disable-line no-console
-    this.setState(SourceState.ERROR);
+    this.setState('error');
   }
 }
 

src/ol/source/OGCVectorTile.js

@@ -2,7 +2,6 @@
  * @module ol/source/OGCVectorTile
  */
 
-import SourceState from './State.js';
 import VectorTile from './VectorTile.js';
 import {getTileSetInfo} from './ogcTileUtil.js';
 
@@ -61,7 +60,7 @@ class OGCVectorTile extends VectorTile {
       transition: options.transition,
       wrapX: options.wrapX,
       zDirection: options.zDirection,
-      state: SourceState.LOADING,
+      state: 'loading',
     });
 
     const sourceInfo = {
@@ -84,7 +83,7 @@ class OGCVectorTile extends VectorTile {
   handleTileSetInfo_(tileSetInfo) {
     this.tileGrid = tileSetInfo.grid;
     this.setTileUrlFunction(tileSetInfo.urlFunction, tileSetInfo.urlTemplate);
-    this.setState(SourceState.READY);
+    this.setState('ready');
   }
 
   /**
@@ -93,7 +92,7 @@ class OGCVectorTile extends VectorTile {
    */
   handleError_(error) {
     console.error(error); // eslint-disable-line no-console
-    this.setState(SourceState.ERROR);
+    this.setState('error');
   }
 }
 

src/ol/source/Raster.js

@@ -8,7 +8,6 @@ import ImageCanvas from '../ImageCanvas.js';
 import ImageLayer from '../layer/Image.js';
 import ImageSource from './Image.js';
 import Source from './Source.js';
-import SourceState from './State.js';
 import TileLayer from '../layer/Tile.js';
 import TileQueue from '../TileQueue.js';
 import TileSource from './Tile.js';
@@ -743,7 +742,7 @@ class RasterSource extends ImageSource {
     let source;
     for (let i = 0, ii = this.layers_.length; i < ii; ++i) {
       source = this.layers_[i].getSource();
-      if (source.getState() !== SourceState.READY) {
+      if (source.getState() !== 'ready') {
         ready = false;
         break;
       }

src/ol/source/Source.js

@@ -2,10 +2,14 @@
  * @module ol/source/Source
  */
 import BaseObject from '../Object.js';
-import SourceState from './State.js';
 import {abstract} from '../util.js';
 import {get as getProjection} from '../proj.js';
 
+/**
+ * @typedef {'undefined' | 'loading' | 'ready' | 'error'} State
+ * State of the source, one of 'undefined', 'loading', 'ready' or 'error'.
+ */
+
 /**
  * A function that takes a {@link module:ol/PluggableMap~FrameState} and returns a string or
  * an array of strings representing source attributions.
@@ -29,7 +33,7 @@ import {get as getProjection} from '../proj.js';
  * @property {AttributionLike} [attributions] Attributions.
  * @property {boolean} [attributionsCollapsible=true] Attributions are collapsible.
  * @property {import("../proj.js").ProjectionLike} [projection] Projection. Default is the view projection.
- * @property {import("./State.js").default} [state='ready'] State.
+ * @property {import("./Source.js").State} [state='ready'] State.
  * @property {boolean} [wrapX=false] WrapX.
  * @property {boolean} [interpolate=false] Use interpolated values when resampling.  By default,
  * the nearest neighbor is used when resampling.
@@ -82,10 +86,9 @@ class Source extends BaseObject {
 
     /**
      * @private
-     * @type {import("./State.js").default}
+     * @type {import("./Source.js").State}
      */
-    this.state_ =
+    this.state_ = options.state !== undefined ? options.state : 'ready';
-      options.state !== undefined ? options.state : SourceState.READY;
 
     /**
      * @private
@@ -164,8 +167,8 @@ class Source extends BaseObject {
   }
 
   /**
-   * Get the state of the source, see {@link module:ol/source/State~State} for possible states.
+   * Get the state of the source, see {@link import("./Source.js").State} for possible states.
-   * @return {import("./State.js").default} State.
+   * @return {import("./Source.js").State} State.
    * @api
    */
   getState() {
@@ -208,7 +211,7 @@ class Source extends BaseObject {
 
   /**
    * Set the state of the source.
-   * @param {import("./State.js").default} state State.
+   * @param {import("./Source.js").State} state State.
    */
   setState(state) {
     this.state_ = state;

src/ol/source/State.js

@@ -1,14 +0,0 @@
-/**
- * @module ol/source/State
- */
-
-/**
- * @enum {string}
- * State of the source, one of 'undefined', 'loading', 'ready' or 'error'.
- */
-export default {
-  UNDEFINED: 'undefined',
-  LOADING: 'loading',
-  READY: 'ready',
-  ERROR: 'error',
-};

src/ol/source/Tile.js

@@ -32,7 +32,7 @@ import {scale as scaleSize, toSize} from '../size.js';
  * @property {boolean} [opaque=false] Whether the layer is opaque.
  * @property {number} [tilePixelRatio] TilePixelRatio.
  * @property {import("../proj.js").ProjectionLike} [projection] Projection.
- * @property {import("./State.js").default} [state] State.
+ * @property {import("./Source.js").State} [state] State.
  * @property {import("../tilegrid/TileGrid.js").default} [tileGrid] TileGrid.
  * @property {boolean} [wrapX=false] WrapX.
  * @property {number} [transition] Transition.

src/ol/source/TileImage.js

@@ -28,7 +28,7 @@ import {getUid} from '../util.js';
  * @property {import("../proj.js").ProjectionLike} [projection] Projection. Default is the view projection.
  * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels).
  * Higher values can increase reprojection performance, but decrease precision.
- * @property {import("./State.js").default} [state] Source state.
+ * @property {import("./Source.js").State} [state] Source state.
  * @property {typeof import("../ImageTile.js").default} [tileClass] Class used to instantiate image tiles.
  * Default is {@link module:ol/ImageTile~ImageTile}.
  * @property {import("../tilegrid/TileGrid.js").default} [tileGrid] Tile grid.

src/ol/source/TileJSON.js

@@ -7,7 +7,6 @@
  * See https://mapbox.com/developers/api/.
  */
 
-import SourceState from './State.js';
 import TileImage from './TileImage.js';
 import {applyTransform, intersects} from '../extent.js';
 import {assert} from '../asserts.js';
@@ -89,7 +88,7 @@ class TileJSON extends TileImage {
       interpolate: interpolate,
       projection: getProjection('EPSG:3857'),
       reprojectionErrorThreshold: options.reprojectionErrorThreshold,
-      state: SourceState.LOADING,
+      state: 'loading',
       tileLoadFunction: options.tileLoadFunction,
       wrapX: options.wrapX !== undefined ? options.wrapX : true,
       transition: options.transition,
@@ -206,14 +205,14 @@ class TileJSON extends TileImage {
       });
     }
     this.tileJSON_ = tileJSON;
-    this.setState(SourceState.READY);
+    this.setState('ready');
   }
 
   /**
    * @protected
    */
   handleTileJSONError() {
-    this.setState(SourceState.ERROR);
+    this.setState('error');
   }
 }
 

src/ol/source/TileWMS.js

@@ -2,10 +2,8 @@
  * @module ol/source/TileWMS
  */
 
-import {DEFAULT_WMS_VERSION} from './common.js';
-
 import TileImage from './TileImage.js';
-import WMSServerType from './WMSServerType.js';
+import {DEFAULT_VERSION} from './wms.js';
 import {appendParams} from '../uri.js';
 import {assert} from '../asserts.js';
 import {assign} from '../obj.js';
@@ -52,10 +50,10 @@ import {hash as tileCoordHash} from '../tilecoord.js';
  * tilesize and extent supported by the server.
  * If this is not defined, a default grid will be used: if there is a projection
  * extent, the grid will be based on that; if not, a grid based on a global
- * extent with origin at 0,0 will be used..
+ * extent with origin at 0,0 will be used.
- * @property {import("./WMSServerType.js").default|string} [serverType]
+ * @property {import("./wms.js").ServerType} [serverType] The type of
- * The type of the remote WMS server. Currently only used when `hidpi` is
+ * the remote WMS server: `mapserver`, `geoserver`, `carmentaserver`, or `qgis`.
- * `true`.
+ * Only needed if `hidpi` is `true`.
  * @property {import("../Tile.js").LoadFunction} [tileLoadFunction] Optional function to load a tile given a URL. The default is
  * ```js
  * function(imageTile, src) {
@@ -137,12 +135,9 @@ class TileWMS extends TileImage {
 
     /**
      * @private
-     * @type {import("./WMSServerType.js").default|undefined}
+     * @type {import("./wms.js").ServerType}
      */
-    this.serverType_ =
+    this.serverType_ = options.serverType;
-      /** @type {import("./WMSServerType.js").default|undefined} */ (
-        options.serverType
-      );
 
     /**
      * @private
@@ -217,7 +212,7 @@ class TileWMS extends TileImage {
 
     const baseParams = {
       'SERVICE': 'WMS',
-      'VERSION': DEFAULT_WMS_VERSION,
+      'VERSION': DEFAULT_VERSION,
       'REQUEST': 'GetFeatureInfo',
       'FORMAT': 'image/png',
       'TRANSPARENT': true,
@@ -262,7 +257,7 @@ class TileWMS extends TileImage {
 
     const baseParams = {
       'SERVICE': 'WMS',
-      'VERSION': DEFAULT_WMS_VERSION,
+      'VERSION': DEFAULT_VERSION,
       'REQUEST': 'GetLegendGraphic',
       'FORMAT': 'image/png',
     };
@@ -340,7 +335,7 @@ class TileWMS extends TileImage {
 
     if (pixelRatio != 1) {
       switch (this.serverType_) {
-        case WMSServerType.GEOSERVER:
+        case 'geoserver':
           const dpi = (90 * pixelRatio + 0.5) | 0;
           if ('FORMAT_OPTIONS' in params) {
             params['FORMAT_OPTIONS'] += ';dpi:' + dpi;
@@ -348,11 +343,11 @@ class TileWMS extends TileImage {
             params['FORMAT_OPTIONS'] = 'dpi:' + dpi;
           }
           break;
-        case WMSServerType.MAPSERVER:
+        case 'mapserver':
           params['MAP_RESOLUTION'] = 90 * pixelRatio;
           break;
-        case WMSServerType.CARMENTA_SERVER:
+        case 'carmentaserver':
-        case WMSServerType.QGIS:
+        case 'qgis':
           params['DPI'] = 90 * pixelRatio;
           break;
         default: // Unknown `serverType` configured
@@ -421,7 +416,7 @@ class TileWMS extends TileImage {
    * @private
    */
   updateV13_() {
-    const version = this.params_['VERSION'] || DEFAULT_WMS_VERSION;
+    const version = this.params_['VERSION'] || DEFAULT_VERSION;
     this.v13_ = compareVersions(version, '1.3') >= 0;
   }
 
@@ -462,7 +457,7 @@ class TileWMS extends TileImage {
 
     const baseParams = {
       'SERVICE': 'WMS',
-      'VERSION': DEFAULT_WMS_VERSION,
+      'VERSION': DEFAULT_VERSION,
       'REQUEST': 'GetMap',
       'FORMAT': 'image/png',
       'TRANSPARENT': true,

src/ol/source/UTFGrid.js

@@ -3,7 +3,6 @@
  */
 
 import EventType from '../events/EventType.js';
-import SourceState from './State.js';
 import Tile from '../Tile.js';
 import TileSource from './Tile.js';
 import TileState from '../TileState.js';
@@ -285,7 +284,7 @@ class UTFGrid extends TileSource {
   constructor(options) {
     super({
       projection: getProjection('EPSG:3857'),
-      state: SourceState.LOADING,
+      state: 'loading',
       zDirection: options.zDirection,
     });
 
@@ -420,7 +419,7 @@ class UTFGrid extends TileSource {
    * @protected
    */
   handleTileJSONError() {
-    this.setState(SourceState.ERROR);
+    this.setState('error');
   }
 
   /**
@@ -455,7 +454,7 @@ class UTFGrid extends TileSource {
 
     const grids = tileJSON['grids'];
     if (!grids) {
-      this.setState(SourceState.ERROR);
+      this.setState('error');
       return;
     }
 
@@ -471,7 +470,7 @@ class UTFGrid extends TileSource {
       });
     }
 
-    this.setState(SourceState.READY);
+    this.setState('ready');
   }
 
   /**

src/ol/source/UrlTile.js

@@ -15,7 +15,7 @@ import {getUid} from '../util.js';
  * @property {number} [cacheSize] Cache size.
  * @property {boolean} [opaque=false] Whether the layer is opaque.
  * @property {import("../proj.js").ProjectionLike} [projection] Projection.
- * @property {import("./State.js").default} [state] State.
+ * @property {import("./Source.js").State} [state] State.
  * @property {import("../tilegrid/TileGrid.js").default} [tileGrid] TileGrid.
  * @property {import("../Tile.js").LoadFunction} tileLoadFunction TileLoadFunction.
  * @property {number} [tilePixelRatio] TilePixelRatio.

src/ol/source/Vector.js

@@ -9,7 +9,6 @@ import EventType from '../events/EventType.js';
 import ObjectEventType from '../ObjectEventType.js';
 import RBush from '../structs/RBush.js';
 import Source from './Source.js';
-import SourceState from './State.js';
 import VectorEventType from './VectorEventType.js';
 import {TRUE, VOID} from '../functions.js';
 import {all as allStrategy} from '../loadingstrategy.js';
@@ -183,7 +182,7 @@ class VectorSource extends Source {
       attributions: options.attributions,
       interpolate: true,
       projection: undefined,
-      state: SourceState.READY,
+      state: 'ready',
       wrapX: options.wrapX !== undefined ? options.wrapX : true,
     });
 

src/ol/source/VectorTile.js

@@ -35,7 +35,7 @@ import {toSize} from '../size.js';
  * boundaries or TopoJSON sources) allows the renderer to optimise fill and
  * stroke operations.
  * @property {import("../proj.js").ProjectionLike} [projection='EPSG:3857'] Projection of the tile grid.
- * @property {import("./State.js").default} [state] Source state.
+ * @property {import("./Source.js").State} [state] Source state.
  * @property {typeof import("../VectorTile.js").default} [tileClass] Class used to instantiate image tiles.
  * Default is {@link module:ol/VectorTile~VectorTile}.
  * @property {number} [maxZoom=22] Optional max zoom level. Not used if `tileGrid` is provided.

src/ol/source/WMSServerType.js

@@ -1,32 +0,0 @@
-/**
- * @module ol/source/WMSServerType
- */
-
-/**
- * Available server types: `'carmentaserver'`, `'geoserver'`, `'mapserver'`,
- *     `'qgis'`. These are servers that have vendor parameters beyond the WMS
- *     specification that OpenLayers can make use of.
- * @enum {string}
- */
-export default {
-  /**
-   * HiDPI support for [Carmenta Server](https://www.carmenta.com/en/products/carmenta-server)
-   * @api
-   */
-  CARMENTA_SERVER: 'carmentaserver',
-  /**
-   * HiDPI support for [GeoServer](https://geoserver.org/)
-   * @api
-   */
-  GEOSERVER: 'geoserver',
-  /**
-   * HiDPI support for [MapServer](https://mapserver.org/)
-   * @api
-   */
-  MAPSERVER: 'mapserver',
-  /**
-   * HiDPI support for [QGIS](https://qgis.org/)
-   * @api
-   */
-  QGIS: 'qgis',
-};

src/ol/source/WMTS.js

@@ -3,7 +3,6 @@
  */
 
 import TileImage from './TileImage.js';
-import WMTSRequestEncoding from './WMTSRequestEncoding.js';
 import {appendParams} from '../uri.js';
 import {assign} from '../obj.js';
 import {containsExtent} from '../extent.js';
@@ -12,6 +11,11 @@ import {createFromTileUrlFunctions, expandUrl} from '../tileurlfunction.js';
 import {equivalent, get as getProjection, transformExtent} from '../proj.js';
 import {find, findIndex, includes} from '../array.js';
 
+/**
+ * Request encoding. One of 'KVP', 'REST'.
+ * @typedef {'KVP' | 'REST'} RequestEncoding
+ */
+
 /**
  * @typedef {Object} Options
  * @property {import("./Source.js").AttributionLike} [attributions] Attributions.
@@ -27,7 +31,7 @@ import {find, findIndex, includes} from '../array.js';
  * @property {import("../proj.js").ProjectionLike} [projection] Projection. Default is the view projection.
  * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels).
  * Higher values can increase reprojection performance, but decrease precision.
- * @property {import("./WMTSRequestEncoding.js").default|string} [requestEncoding='KVP'] Request encoding.
+ * @property {RequestEncoding} [requestEncoding='KVP'] Request encoding.
  * @property {string} layer Layer name as advertised in the WMTS capabilities.
  * @property {string} style Style name as advertised in the WMTS capabilities.
  * @property {typeof import("../ImageTile.js").default} [tileClass]  Class used to instantiate image tiles. Default is {@link module:ol/ImageTile~ImageTile}.
@@ -80,11 +84,7 @@ class WMTS extends TileImage {
     // TODO: add support for TileMatrixLimits
 
     const requestEncoding =
-      options.requestEncoding !== undefined
+      options.requestEncoding !== undefined ? options.requestEncoding : 'KVP';
-        ? /** @type {import("./WMTSRequestEncoding.js").default} */ (
-            options.requestEncoding
-          )
-        : WMTSRequestEncoding.KVP;
 
     // FIXME: should we create a default tileGrid?
     // we could issue a getCapabilities xhr to retrieve missing configuration
@@ -155,7 +155,7 @@ class WMTS extends TileImage {
 
     /**
      * @private
-     * @type {import("./WMTSRequestEncoding.js").default}
+     * @type {RequestEncoding}
      */
     this.requestEncoding_ = requestEncoding;
 
@@ -224,7 +224,7 @@ class WMTS extends TileImage {
 
   /**
    * Return the request encoding, either "KVP" or "REST".
-   * @return {import("./WMTSRequestEncoding.js").default} Request encoding.
+   * @return {RequestEncoding} Request encoding.
    * @api
    */
   getRequestEncoding() {
@@ -287,7 +287,7 @@ class WMTS extends TileImage {
       'tilematrixset': this.matrixSet_,
     };
 
-    if (requestEncoding == WMTSRequestEncoding.KVP) {
+    if (requestEncoding == 'KVP') {
       assign(context, {
         'Service': 'WMTS',
         'Request': 'GetTile',
@@ -301,7 +301,7 @@ class WMTS extends TileImage {
     // special template params
 
     template =
-      requestEncoding == WMTSRequestEncoding.KVP
+      requestEncoding == 'KVP'
         ? appendParams(template, context)
         : template.replace(/\{(\w+?)\}/g, function (m, p) {
             return p.toLowerCase() in context ? context[p.toLowerCase()] : m;
@@ -330,7 +330,7 @@ class WMTS extends TileImage {
           };
           assign(localContext, dimensions);
           let url = template;
-          if (requestEncoding == WMTSRequestEncoding.KVP) {
+          if (requestEncoding == 'KVP') {
             url = appendParams(url, localContext);
           } else {
             url = url.replace(/\{(\w+?)\}/g, function (m, p) {
@@ -565,21 +565,21 @@ export function optionsFromCapabilities(wmtsCap, config) {
           // requestEncoding not provided, use the first encoding from the list
           requestEncoding = encodings[0];
         }
-        if (requestEncoding === WMTSRequestEncoding.KVP) {
+        if (requestEncoding === 'KVP') {
-          if (includes(encodings, WMTSRequestEncoding.KVP)) {
+          if (includes(encodings, 'KVP')) {
             urls.push(/** @type {string} */ (gets[i]['href']));
           }
         } else {
           break;
         }
       } else if (gets[i]['href']) {
-        requestEncoding = WMTSRequestEncoding.KVP;
+        requestEncoding = 'KVP';
         urls.push(/** @type {string} */ (gets[i]['href']));
       }
     }
   }
   if (urls.length === 0) {
-    requestEncoding = WMTSRequestEncoding.REST;
+    requestEncoding = 'REST';
     l['ResourceURL'].forEach(function (element) {
       if (element['resourceType'] === 'tile') {
         format = element['format'];

src/ol/source/WMTSRequestEncoding.js

@@ -1,12 +0,0 @@
-/**
- * @module ol/source/WMTSRequestEncoding
- */
-
-/**
- * Request encoding. One of 'KVP', 'REST'.
- * @enum {string}
- */
-export default {
-  KVP: 'KVP', // see spec §8
-  REST: 'REST', // see spec §10
-};

src/ol/source/wms.js

@@ -0,0 +1,19 @@
+/**
+ * @module ol/source/wms
+ */
+
+/**
+ * Default WMS version.
+ * @type {string}
+ */
+export const DEFAULT_VERSION = '1.3.0';
+
+/**
+ * @api
+ * @typedef {'carmentaserver' | 'geoserver' | 'mapserver' | 'qgis'} ServerType
+ * Set the server type to use implementation-specific parameters beyond the WMS specification.
+ *  - `'carmentaserver'`: HiDPI support for [Carmenta Server](https://www.carmenta.com/en/products/carmenta-server)
+ *  - `'geoserver'`: HiDPI support for [GeoServer](https://geoserver.org/)
+ *  - `'mapserver'`: HiDPI support for [MapServer](https://mapserver.org/)
+ *  - `'qgis'`: HiDPI support for [QGIS](https://qgis.org/)
+ */

src/ol/sphere.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/sphere
  */
-import GeometryType from './geom/GeometryType.js';
 import {toDegrees, toRadians} from './math.js';
 
 /**
@@ -78,26 +77,26 @@ export function getLength(geometry, opt_options) {
   const radius = options.radius || DEFAULT_RADIUS;
   const projection = options.projection || 'EPSG:3857';
   const type = geometry.getType();
-  if (type !== GeometryType.GEOMETRY_COLLECTION) {
+  if (type !== 'GeometryCollection') {
     geometry = geometry.clone().transform(projection, 'EPSG:4326');
   }
   let length = 0;
   let coordinates, coords, i, ii, j, jj;
   switch (type) {
-    case GeometryType.POINT:
+    case 'Point':
-    case GeometryType.MULTI_POINT: {
+    case 'MultiPoint': {
       break;
     }
-    case GeometryType.LINE_STRING:
+    case 'LineString':
-    case GeometryType.LINEAR_RING: {
+    case 'LinearRing': {
       coordinates = /** @type {import("./geom/SimpleGeometry.js").default} */ (
         geometry
       ).getCoordinates();
       length = getLengthInternal(coordinates, radius);
       break;
     }
-    case GeometryType.MULTI_LINE_STRING:
+    case 'MultiLineString':
-    case GeometryType.POLYGON: {
+    case 'Polygon': {
       coordinates = /** @type {import("./geom/SimpleGeometry.js").default} */ (
         geometry
       ).getCoordinates();
@@ -106,7 +105,7 @@ export function getLength(geometry, opt_options) {
       }
       break;
     }
-    case GeometryType.MULTI_POLYGON: {
+    case 'MultiPolygon': {
       coordinates = /** @type {import("./geom/SimpleGeometry.js").default} */ (
         geometry
       ).getCoordinates();
@@ -118,7 +117,7 @@ export function getLength(geometry, opt_options) {
       }
       break;
     }
-    case GeometryType.GEOMETRY_COLLECTION: {
+    case 'GeometryCollection': {
       const geometries =
         /** @type {import("./geom/GeometryCollection.js").default} */ (
           geometry
@@ -181,20 +180,20 @@ export function getArea(geometry, opt_options) {
   const radius = options.radius || DEFAULT_RADIUS;
   const projection = options.projection || 'EPSG:3857';
   const type = geometry.getType();
-  if (type !== GeometryType.GEOMETRY_COLLECTION) {
+  if (type !== 'GeometryCollection') {
     geometry = geometry.clone().transform(projection, 'EPSG:4326');
   }
   let area = 0;
   let coordinates, coords, i, ii, j, jj;
   switch (type) {
-    case GeometryType.POINT:
+    case 'Point':
-    case GeometryType.MULTI_POINT:
+    case 'MultiPoint':
-    case GeometryType.LINE_STRING:
+    case 'LineString':
-    case GeometryType.MULTI_LINE_STRING:
+    case 'MultiLineString':
-    case GeometryType.LINEAR_RING: {
+    case 'LinearRing': {
       break;
     }
-    case GeometryType.POLYGON: {
+    case 'Polygon': {
       coordinates = /** @type {import("./geom/Polygon.js").default} */ (
         geometry
       ).getCoordinates();
@@ -204,7 +203,7 @@ export function getArea(geometry, opt_options) {
       }
       break;
     }
-    case GeometryType.MULTI_POLYGON: {
+    case 'MultiPolygon': {
       coordinates = /** @type {import("./geom/SimpleGeometry.js").default} */ (
         geometry
       ).getCoordinates();
@@ -217,7 +216,7 @@ export function getArea(geometry, opt_options) {
       }
       break;
     }
-    case GeometryType.GEOMETRY_COLLECTION: {
+    case 'GeometryCollection': {
       const geometries =
         /** @type {import("./geom/GeometryCollection.js").default} */ (
           geometry

src/ol/style/Style.js

@@ -4,7 +4,6 @@
 
 import CircleStyle from './Circle.js';
 import Fill from './Fill.js';
-import GeometryType from '../geom/GeometryType.js';
 import Stroke from './Stroke.js';
 import {assert} from '../asserts.js';
 
@@ -89,23 +88,22 @@ import {assert} from '../asserts.js';
  *
  * A separate editing style has the following defaults:
  * ```js
- *  import GeometryType from 'ol/geom/GeometryType';
  *  import {Circle, Fill, Stroke, Style} from 'ol/style';
  *
  *  const styles = {};
  *  const white = [255, 255, 255, 1];
  *  const blue = [0, 153, 255, 1];
  *  const width = 3;
- *  styles[GeometryType.POLYGON] = [
+ *  styles['Polygon'] = [
  *    new Style({
  *      fill: new Fill({
  *        color: [255, 255, 255, 0.5],
  *      }),
  *    }),
  *  ];
- *  styles[GeometryType.MULTI_POLYGON] = styles[GeometryType.POLYGON];
+ *  styles['MultiPolygon'] =
- *
+ *      styles['Polygon'];
- *  styles[GeometryType.LINE_STRING] = [
+ *  styles['LineString'] = [
  *    new Style({
  *      stroke: new Stroke({
  *        color: white,
@@ -119,13 +117,13 @@ import {assert} from '../asserts.js';
  *      }),
  *    }),
  *  ];
- *  styles[GeometryType.MULTI_LINE_STRING] = styles[GeometryType.LINE_STRING];
+ *  styles['MultiLineString'] = styles['LineString'];
  *
- *  styles[GeometryType.CIRCLE] = styles[GeometryType.POLYGON].concat(
+ *  styles['Circle'] = styles['Polygon'].concat(
- *    styles[GeometryType.LINE_STRING]
+ *    styles['LineString']
  *  );
  *
- *  styles[GeometryType.POINT] = [
+ *  styles['Point'] = [
  *    new Style({
  *      image: new Circle({
  *        radius: width * 2,
@@ -140,11 +138,13 @@ import {assert} from '../asserts.js';
  *      zIndex: Infinity,
  *    }),
  *  ];
- *  styles[GeometryType.MULTI_POINT] = styles[GeometryType.POINT];
+ *  styles['MultiPoint'] =
- *
+ *      styles['Point'];
- *  styles[GeometryType.GEOMETRY_COLLECTION] = styles[
+ *  styles['GeometryCollection'] =
- *    GeometryType.POLYGON
+ *      styles['Polygon'].concat(
- *  ].concat(styles[GeometryType.LINE_STRING], styles[GeometryType.POINT]);
+ *          styles['LineString'],
+ *          styles['Point']
+ *      );
  * ```
  *
  * @api
@@ -494,24 +494,24 @@ export function createDefaultStyle(feature, resolution) {
 
 /**
  * Default styles for editing features.
- * @return {Object<import("../geom/GeometryType.js").default, Array<Style>>} Styles
+ * @return {Object<import("../geom/Geometry.js").Type, Array<Style>>} Styles
  */
 export function createEditingStyle() {
-  /** @type {Object<import("../geom/GeometryType.js").default, Array<Style>>} */
+  /** @type {Object<import("../geom/Geometry.js").Type, Array<Style>>} */
   const styles = {};
   const white = [255, 255, 255, 1];
   const blue = [0, 153, 255, 1];
   const width = 3;
-  styles[GeometryType.POLYGON] = [
+  styles['Polygon'] = [
     new Style({
       fill: new Fill({
         color: [255, 255, 255, 0.5],
       }),
     }),
   ];
-  styles[GeometryType.MULTI_POLYGON] = styles[GeometryType.POLYGON];
+  styles['MultiPolygon'] = styles['Polygon'];
 
-  styles[GeometryType.LINE_STRING] = [
+  styles['LineString'] = [
     new Style({
       stroke: new Stroke({
         color: white,
@@ -525,13 +525,11 @@ export function createEditingStyle() {
       }),
     }),
   ];
-  styles[GeometryType.MULTI_LINE_STRING] = styles[GeometryType.LINE_STRING];
+  styles['MultiLineString'] = styles['LineString'];
 
-  styles[GeometryType.CIRCLE] = styles[GeometryType.POLYGON].concat(
+  styles['Circle'] = styles['Polygon'].concat(styles['LineString']);
-    styles[GeometryType.LINE_STRING]
-  );
 
-  styles[GeometryType.POINT] = [
+  styles['Point'] = [
     new Style({
       image: new CircleStyle({
         radius: width * 2,
@@ -546,11 +544,12 @@ export function createEditingStyle() {
       zIndex: Infinity,
     }),
   ];
-  styles[GeometryType.MULTI_POINT] = styles[GeometryType.POINT];
+  styles['MultiPoint'] = styles['Point'];
 
-  styles[GeometryType.GEOMETRY_COLLECTION] = styles[
+  styles['GeometryCollection'] = styles['Polygon'].concat(
-    GeometryType.POLYGON
+    styles['LineString'],
-  ].concat(styles[GeometryType.LINE_STRING], styles[GeometryType.POINT]);
+    styles['Point']
+  );
 
   return styles;
 }

src/ol/tilegrid.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/tilegrid
  */
-import Corner from './extent/Corner.js';
 import TileGrid from './tilegrid/TileGrid.js';
 import Units from './proj/Units.js';
 import {DEFAULT_MAX_ZOOM, DEFAULT_TILE_SIZE} from './tilegrid/common.js';
@@ -57,11 +56,11 @@ export function wrapX(tileGrid, tileCoord, projection) {
  *     DEFAULT_MAX_ZOOM).
  * @param {number|import("./size.js").Size} [opt_tileSize] Tile size (default uses
  *     DEFAULT_TILE_SIZE).
- * @param {import("./extent/Corner.js").default} [opt_corner] Extent corner (default is `'top-left'`).
+ * @param {import("./extent.js").Corner} [opt_corner] Extent corner (default is `'top-left'`).
  * @return {!TileGrid} TileGrid instance.
  */
 export function createForExtent(extent, opt_maxZoom, opt_tileSize, opt_corner) {
-  const corner = opt_corner !== undefined ? opt_corner : Corner.TOP_LEFT;
+  const corner = opt_corner !== undefined ? opt_corner : 'top-left';
 
   const resolutions = resolutionsFromExtent(extent, opt_maxZoom, opt_tileSize);
 
@@ -153,7 +152,7 @@ function resolutionsFromExtent(
  *     DEFAULT_MAX_ZOOM).
  * @param {number|import("./size.js").Size} [opt_tileSize] Tile size (default uses
  *     DEFAULT_TILE_SIZE).
- * @param {import("./extent/Corner.js").default} [opt_corner] Extent corner (default is `'top-left'`).
+ * @param {import("./extent.js").Corner} [opt_corner] Extent corner (default is `'top-left'`).
  * @return {!TileGrid} TileGrid instance.
  */
 export function createForProjection(

src/ol/tilegrid/TileGrid.js

@@ -9,6 +9,7 @@ import {assert} from '../asserts.js';
 import {ceil, clamp, floor} from '../math.js';
 import {createOrUpdate, getTopLeft} from '../extent.js';
 import {createOrUpdate as createOrUpdateTileCoord} from '../tilecoord.js';
+import {intersectsLinearRing} from '../geom/flat/intersectsextent.js';
 import {isSorted, linearFindNearest} from '../array.js';
 import {toSize} from '../size.js';
 
@@ -656,6 +657,22 @@ class TileGrid {
     return clamp(z, this.minZoom, this.maxZoom);
   }
 
+  /**
+   * The tile with the provided tile coordinate intersects the given viewport.
+   * @param {import('../tilecoord.js').TileCoord} tileCoord Tile coordinate.
+   * @param {Array<number>} viewport Viewport as returned from {@link module:ol/extent.getRotatedViewport}.
+   * @return {boolean} The tile with the provided tile coordinate intersects the given viewport.
+   */
+  tileCoordIntersectsViewport(tileCoord, viewport) {
+    return intersectsLinearRing(
+      viewport,
+      0,
+      viewport.length,
+      2,
+      this.getTileCoordExtent(tileCoord)
+    );
+  }
+
   /**
    * @param {!import("../extent.js").Extent} extent Extent for this tile grid.
    * @private

test/browser/spec/ol/interaction/draw.test.js

@@ -5,7 +5,6 @@ import Draw, {
 } from '../../../../../src/ol/interaction/Draw.js';
 import Feature from '../../../../../src/ol/Feature.js';
 import GeometryLayout from '../../../../../src/ol/geom/GeometryLayout.js';
-import GeometryType from '../../../../../src/ol/geom/GeometryType.js';
 import Interaction from '../../../../../src/ol/interaction/Interaction.js';
 import LineString from '../../../../../src/ol/geom/LineString.js';
 import Map from '../../../../../src/ol/Map.js';
@@ -648,7 +647,7 @@ describe('ol.interaction.Draw', function () {
         simulateEvent('pointerdown', x, y);
         simulateEvent('pointerup', x, y);
       }
-      if (amount > 1 && type !== GeometryType.CIRCLE) {
+      if (amount > 1 && type !== 'Circle') {
         const [x, y] = testCoordinates[amount - 1];
         simulateEvent('pointerdown', x, y);
         simulateEvent('pointerup', x, y);
@@ -664,25 +663,25 @@ describe('ol.interaction.Draw', function () {
       expect(source.getFeatures()).to.have.length(1);
     }
     it('calls finishCondition:true for POINT type', function () {
-      testFinishConditionTrue(GeometryType.POINT, 1);
+      testFinishConditionTrue('Point', 1);
     });
     it('calls finishCondition:true for MULTI_POINT type', function () {
-      testFinishConditionTrue(GeometryType.MULTI_POINT, 1);
+      testFinishConditionTrue('MultiPoint', 1);
     });
     it('calls finishCondition:true for LINE_STRING type', function () {
-      testFinishConditionTrue(GeometryType.LINE_STRING, 2);
+      testFinishConditionTrue('LineString', 2);
     });
     it('calls finishCondition:true for MULTI_LINE_STRING type', function () {
-      testFinishConditionTrue(GeometryType.MULTI_LINE_STRING, 2);
+      testFinishConditionTrue('MultiLineString', 2);
     });
     it('calls finishCondition:true for CIRCLE type', function () {
-      testFinishConditionTrue(GeometryType.CIRCLE, 2);
+      testFinishConditionTrue('Circle', 2);
     });
     it('calls finishCondition:true for POLYGON type', function () {
-      testFinishConditionTrue(GeometryType.POLYGON, 3);
+      testFinishConditionTrue('Polygon', 3);
     });
     it('calls finishCondition:true for MULTI_POLYGON type', function () {
-      testFinishConditionTrue(GeometryType.MULTI_POLYGON, 3);
+      testFinishConditionTrue('MultiPolygon', 3);
     });
 
     function testFinishConditionFalse(type, amount) {
@@ -694,25 +693,25 @@ describe('ol.interaction.Draw', function () {
       expect(source.getFeatures()).to.have.length(0);
     }
     it('calls finishCondition:false for POINT type', function () {
-      testFinishConditionFalse(GeometryType.POINT, 1);
+      testFinishConditionFalse('Point', 1);
     });
     it('calls finishCondition:false for MULTI_POINT type', function () {
-      testFinishConditionFalse(GeometryType.MULTI_POINT, 1);
+      testFinishConditionFalse('MultiPoint', 1);
     });
     it('calls finishCondition:false for LINE_STRING type', function () {
-      testFinishConditionFalse(GeometryType.LINE_STRING, 2);
+      testFinishConditionFalse('LineString', 2);
     });
     it('calls finishCondition:false for MULTI_LINE_STRING type', function () {
-      testFinishConditionFalse(GeometryType.MULTI_LINE_STRING, 2);
+      testFinishConditionFalse('MultiLineString', 2);
     });
     it('calls finishCondition:false for CIRCLE type', function () {
-      testFinishConditionFalse(GeometryType.CIRCLE, 2);
+      testFinishConditionFalse('Circle', 2);
     });
     it('calls finishCondition:false for POLYGON type', function () {
-      testFinishConditionFalse(GeometryType.POLYGON, 3);
+      testFinishConditionFalse('Polygon', 3);
     });
     it('calls finishCondition:false for MULTI_POLYGON type', function () {
-      testFinishConditionFalse(GeometryType.MULTI_POLYGON, 3);
+      testFinishConditionFalse('MultiPolygon', 3);
     });
   });
 
@@ -1969,14 +1968,14 @@ describe('ol.interaction.Draw', function () {
     }
 
     function drawPoint(geometryLayout) {
-      createDrawInteraction(GeometryType.POINT, geometryLayout);
+      createDrawInteraction('Point', geometryLayout);
       simulateEvent('pointermove', 10, 20);
       simulateEvent('pointerdown', 10, 20);
       simulateEvent('pointerup', 10, 20);
     }
 
     function drawLineString(geometryLayout) {
-      createDrawInteraction(GeometryType.LINE_STRING, geometryLayout);
+      createDrawInteraction('LineString', geometryLayout);
       // first point
       simulateEvent('pointermove', 10, 20);
       simulateEvent('pointerdown', 10, 20);
@@ -1993,7 +1992,7 @@ describe('ol.interaction.Draw', function () {
     }
 
     function drawPolygon(geometryLayout) {
-      createDrawInteraction(GeometryType.POLYGON, geometryLayout);
+      createDrawInteraction('Polygon', geometryLayout);
       // first point
       simulateEvent('pointermove', 10, 20);
       simulateEvent('pointerdown', 10, 20);
@@ -2015,7 +2014,7 @@ describe('ol.interaction.Draw', function () {
     }
 
     function drawCircle(geometryLayout) {
-      createDrawInteraction(GeometryType.CIRCLE, geometryLayout);
+      createDrawInteraction('Circle', geometryLayout);
       // first point
       simulateEvent('pointermove', 10, 20);
       simulateEvent('pointerdown', 10, 20);

test/browser/spec/ol/source/GeoTIFF.test.js

@@ -1,5 +1,4 @@
 import GeoTIFFSource from '../../../../../src/ol/source/GeoTIFF.js';
-import State from '../../../../../src/ol/source/State.js';
 import TileState from '../../../../../src/ol/TileState.js';
 
 describe('ol/source/GeoTIFF', function () {
@@ -115,9 +114,9 @@ describe('ol/source/GeoTIFF', function () {
     });
 
     it('manages load states', function (done) {
-      expect(source.getState()).to.be(State.LOADING);
+      expect(source.getState()).to.be('loading');
       source.on('change', () => {
-        expect(source.getState()).to.be(State.READY);
+        expect(source.getState()).to.be('ready');
         done();
       });
     });

test/node/ol/css.test.js

@@ -1,13 +1,7 @@
 import expect from '../expect.js';
-import {cssOpacity, getFontParameters} from '../../../src/ol/css.js';
+import {getFontParameters} from '../../../src/ol/css.js';
 
 describe('ol.css', function () {
-  describe('cssOpacity()', function () {
-    it('converts number to string, 1 to ""', function () {
-      expect(cssOpacity(0.5)).to.eql('0.5');
-      expect(cssOpacity(1)).to.eql('');
-    });
-  });
   describe('getFontParameters()', function () {
     const cases = [
       {