Register layer renderers with the map renderer

examples/icon-sprite-webgl.js

@@ -1,5 +1,5 @@
 import Feature from '../src/ol/Feature.js';
-import Map from '../src/ol/Map.js';
+import Map from '../src/ol/WebGLMap.js';
 import View from '../src/ol/View.js';
 import Point from '../src/ol/geom/Point.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
@@ -80,7 +80,6 @@ const vector = new VectorLayer({
 });
 
 const map = new Map({
-  renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
   layers: [vector],
   target: document.getElementById('map'),
   view: new View({

examples/layer-clipping-webgl.js

@@ -1,4 +1,4 @@
-import Map from '../src/ol/Map.js';
+import Map from '../src/ol/WebGLMap.js';
 import View from '../src/ol/View.js';
 import {defaults as defaultControls} from '../src/ol/control.js';
 import {WEBGL} from '../src/ol/has.js';
@@ -19,7 +19,6 @@ if (!WEBGL) {
 
   const map = new Map({
     layers: [osm],
-    renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
     target: 'map',
     controls: defaultControls({
       attributionOptions: {

examples/side-by-side.html

@@ -13,7 +13,4 @@ tags: "side-by-side, canvas, webgl"
 <div class="half">
   <h4>WebGL</h4>
   <div id="webglMap" class="map"></div>
-  <div id="no-webgl" class="alert alert-danger" style="display: none">
-    This map requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
-  </div>
 </div>

examples/side-by-side.js

@@ -1,6 +1,6 @@
 import Map from '../src/ol/Map.js';
+import WebGLMap from '../src/ol/WebGLMap.js';
 import View from '../src/ol/View.js';
-import {WEBGL} from '../src/ol/has.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 
@@ -19,17 +19,8 @@ const map1 = new Map({
   view: view
 });
 
-if (WEBGL) {
+const map2 = new WebGLMap({
-  const map2 = new Map({
+  target: 'webglMap',
-    target: 'webglMap',
+  layers: [layer],
-    renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
+  view: view
-    layers: [layer],
+});
-    view: view
-  });
-} else {
-  const info = document.getElementById('no-webgl');
-  /**
-   * display error message
-   */
-  info.style.display = '';
-}

examples/symbol-atlas-webgl.js

@@ -1,5 +1,5 @@
 import Feature from '../src/ol/Feature.js';
-import Map from '../src/ol/Map.js';
+import Map from '../src/ol/WebGLMap.js';
 import View from '../src/ol/View.js';
 import Point from '../src/ol/geom/Point.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
@@ -107,7 +107,6 @@ const vector = new VectorLayer({
 });
 
 const map = new Map({
-  renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
   layers: [vector],
   target: document.getElementById('map'),
   view: new View({

src/ol/Map.js

@@ -3,24 +3,15 @@
  */
 import {inherits} from './index.js';
 import PluggableMap from './PluggableMap.js';
-import PluginType from './PluginType.js';
 import {defaults as defaultControls} from './control.js';
 import {defaults as defaultInteractions} from './interaction.js';
 import {assign} from './obj.js';
-import {registerMultiple} from './plugins.js';
 import CanvasImageLayerRenderer from './renderer/canvas/ImageLayer.js';
 import CanvasMapRenderer from './renderer/canvas/Map.js';
 import CanvasTileLayerRenderer from './renderer/canvas/TileLayer.js';
 import CanvasVectorLayerRenderer from './renderer/canvas/VectorLayer.js';
 import CanvasVectorTileLayerRenderer from './renderer/canvas/VectorTileLayer.js';
 
-registerMultiple(PluginType.LAYER_RENDERER, [
-  CanvasImageLayerRenderer,
-  CanvasTileLayerRenderer,
-  CanvasVectorLayerRenderer,
-  CanvasVectorTileLayerRenderer
-]);
-
 /**
  * @classdesc
  * The map is the core component of OpenLayers. For a map to render, a view,
@@ -90,7 +81,14 @@ const Map = function(options) {
 inherits(Map, PluggableMap);
 
 Map.prototype.createRenderer = function() {
-  return new CanvasMapRenderer(this);
+  const renderer = new CanvasMapRenderer(this);
+  renderer.registerLayerRenderers([
+    CanvasImageLayerRenderer,
+    CanvasTileLayerRenderer,
+    CanvasVectorLayerRenderer,
+    CanvasVectorTileLayerRenderer
+  ]);
+  return renderer;
 };
 
 export default Map;

src/ol/PluginType.js

@@ -1,11 +0,0 @@
-/**
- * @module ol/PluginType
- */
-
-/**
- * A plugin type used when registering a plugin.
- * @enum {string}
- */
-export default {
-  LAYER_RENDERER: 'LAYER_RENDERER'
-};

src/ol/WebGLMap.js

@@ -3,24 +3,15 @@
  */
 import {inherits} from './index.js';
 import PluggableMap from './PluggableMap.js';
-import PluginType from './PluginType.js';
 import {defaults as defaultControls} from './control.js';
 import {defaults as defaultInteractions} from './interaction.js';
 import {assign} from './obj.js';
-import {registerMultiple} from './plugins.js';
 import WebGLImageLayerRenderer from './renderer/webgl/ImageLayer.js';
 import WebGLMapRenderer from './renderer/webgl/Map.js';
 import WebGLTileLayerRenderer from './renderer/webgl/TileLayer.js';
 import WebGLVectorLayerRenderer from './renderer/webgl/VectorLayer.js';
 
 
-registerMultiple(PluginType.LAYER_RENDERER, [
-  WebGLImageLayerRenderer,
-  WebGLTileLayerRenderer,
-  WebGLVectorLayerRenderer
-]);
-
-
 /**
  * @classdesc
  * The WebGLMap uses WebGL for rendering map layers.  This renderer has limited
@@ -91,7 +82,13 @@ inherits(WebGLMap, PluggableMap);
 
 
 WebGLMap.prototype.createRenderer = function() {
-  return new WebGLMapRenderer(this);
+  const renderer = new WebGLMapRenderer(this);
+  renderer.registerLayerRenderers([
+    WebGLImageLayerRenderer,
+    WebGLTileLayerRenderer,
+    WebGLVectorLayerRenderer
+  ]);
+  return renderer;
 };
 
 export default WebGLMap;

src/ol/plugins.js

@@ -1,71 +0,0 @@
-/**
- * @module ol/plugins
- */
-import PluginType from './PluginType.js';
-
-
-/**
- * @typedef {Object} MapRendererPlugin
- * @property {function(module:ol/renderer/Type):boolean} handles Determine if
- * this renderer handles the provided layer.
- * @property {function(Element, module:ol/PluggableMap~PluggableMap):module:ol/renderer/Map~Map} create
- * Create the map renderer.
- */
-
-
-/**
- * @typedef {Object} LayerRendererPlugin
- * @property {function(module:ol/renderer/Type, module:ol/layer/Layer~Layer):boolean} handles
- * Determine if this renderer handles the provided layer.
- * @property {function(module:ol/renderer/Map~Map, module:ol/layer/Layer~Layer):module:ol/renderer/Layer~Layer} create
- * Create a layer renderer.
- */
-
-
-/**
- * The registry of layer renderer plugins.
- * @type {Array<olx.LayerRendererPlugin>}
- * @private
- */
-const layerRendererPlugins = [];
-
-
-/**
- * Get all registered layer renderer plugins.
- * @return {Array<olx.LayerRendererPlugin>} The registered layer renderer plugins.
- */
-export function getLayerRendererPlugins() {
-  return layerRendererPlugins;
-}
-
-
-/**
- * Register a plugin.
- * @param {module:ol/PluginType~PluginType} type The plugin type.
- * @param {*} plugin The plugin.
- */
-export function register(type, plugin) {
-  let plugins;
-  switch (type) {
-    case PluginType.LAYER_RENDERER: {
-      plugins = layerRendererPlugins;
-      plugins.push(/** @type {olx.LayerRendererPlugin} */ (plugin));
-      break;
-    }
-    default: {
-      throw new Error('Unsupported plugin type: ' + type);
-    }
-  }
-}
-
-
-/**
- * Register multiple plugins.
- * @param {module:ol/PluginType~PluginType} type The plugin type.
- * @param {Array} plugins The plugins.
- */
-export function registerMultiple(type, plugins) {
-  for (let i = 0, ii = plugins.length; i < ii; ++i) {
-    register(type, plugins[i]);
-  }
-}

src/ol/renderer/Map.js

@@ -8,7 +8,6 @@ import EventType from '../events/EventType.js';
 import {getWidth} from '../extent.js';
 import {TRUE, UNDEFINED} from '../functions.js';
 import {visibleAtResolution} from '../layer/Layer.js';
-import {getLayerRendererPlugins} from '../plugins.js';
 import {iconImageCache} from '../style.js';
 import {compose as composeTransform, invert as invertTransform, setFromArray as transformSetFromArray} from '../transform.js';
 
@@ -40,11 +39,35 @@ const MapRenderer = function(map) {
    */
   this.layerRendererListeners_ = {};
 
+  /**
+   * @private
+   * @type {Array.<module:ol/renderer/Layer~LayerRenderer}
+   */
+  this.layerRendererConstructors_ = [];
+
 };
 
 inherits(MapRenderer, Disposable);
 
 
+/**
+ * Register layer renderer constructors.
+ * @param {Array.<module:ol/renderer/Layer~LayerRenderer>} constructors Layer renderers.
+ */
+MapRenderer.prototype.registerLayerRenderers = function(constructors) {
+  this.layerRendererConstructors_.push.apply(this.layerRendererConstructors_, constructors);
+};
+
+
+/**
+ * Get the registered layer renderer constructors.
+ * @return {Array.<module:ol/renderer/Layer~LayerRenderer>} Registered layer renderers.
+ */
+MapRenderer.prototype.getLayerRendererConstructors = function() {
+  return this.layerRendererConstructors_;
+};
+
+
 /**
  * @param {module:ol/PluggableMap~FrameState} frameState FrameState.
  * @protected
@@ -202,12 +225,11 @@ MapRenderer.prototype.getLayerRenderer = function(layer) {
   if (layerKey in this.layerRenderers_) {
     return this.layerRenderers_[layerKey];
   } else {
-    const layerRendererPlugins = getLayerRendererPlugins();
     let renderer;
-    for (let i = 0, ii = layerRendererPlugins.length; i < ii; ++i) {
+    for (let i = 0, ii = this.layerRendererConstructors_.length; i < ii; ++i) {
-      const plugin = layerRendererPlugins[i];
+      const candidate = this.layerRendererConstructors_[i];
-      if (plugin['handles'](layer)) {
+      if (candidate['handles'](layer)) {
-        renderer = plugin['create'](this, layer);
+        renderer = candidate['create'](this, layer);
         break;
       }
     }

src/ol/renderer/canvas/ImageLayer.js

@@ -10,7 +10,6 @@ import {equals} from '../../array.js';
 import {getHeight, getIntersection, getWidth, isEmpty} from '../../extent.js';
 import VectorRenderType from '../../layer/VectorRenderType.js';
 import {assign} from '../../obj.js';
-import {getLayerRendererPlugins} from '../../plugins.js';
 import IntermediateCanvasRenderer from '../canvas/IntermediateCanvas.js';
 import {create as createTransform, compose as composeTransform} from '../../transform.js';
 
@@ -73,7 +72,7 @@ CanvasImageLayerRenderer['handles'] = function(layer) {
 CanvasImageLayerRenderer['create'] = function(mapRenderer, layer) {
   const renderer = new CanvasImageLayerRenderer(/** @type {module:ol/layer/Image~ImageLayer} */ (layer));
   if (layer.getType() === LayerType.VECTOR) {
-    const candidates = getLayerRendererPlugins();
+    const candidates = mapRenderer.getLayerRendererConstructors();
     for (let i = 0, ii = candidates.length; i < ii; ++i) {
       const candidate = /** @type {Object.<string, Function>} */ (candidates[i]);
       if (candidate !== CanvasImageLayerRenderer && candidate['handles'](layer)) {