ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Register layer renderers with the map renderer

Browse Source
This commit is contained in:
Tim Schaub
2018-04-14 10:31:10 -06:00
parent 91f2101cab
commit c5f81d8bbe
11 changed files with 53 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
examples/icon-sprite-webgl.js
View File

@@ -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({

3
examples/layer-clipping-webgl.js
View File

@@ -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: {

3
examples/side-by-side.html
View File

@@ -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>

13
examples/side-by-side.js
View File

@@ -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 Map({
const map2 = new WebGLMap({
target: 'webglMap',
renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
layers: [layer],
view: view
});
} else {
const info = document.getElementById('no-webgl');
/**
* display error message
*/
info.style.display = '';
}

3
examples/symbol-atlas-webgl.js
View File

@@ -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({

18
src/ol/Map.js
View File

@@ -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;

11
src/ol/PluginType.js
View File

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

17
src/ol/WebGLMap.js
View File

@@ -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;

71
src/ol/plugins.js
View File

@@ -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]);
}
}

34
src/ol/renderer/Map.js
View File

@@ -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) {
const plugin = layerRendererPlugins[i];
if (plugin['handles'](layer)) {
renderer = plugin['create'](this, layer);
for (let i = 0, ii = this.layerRendererConstructors_.length; i < ii; ++i) {
const candidate = this.layerRendererConstructors_[i];
if (candidate['handles'](layer)) {
renderer = candidate['create'](this, layer);
break;
}
}

3
src/ol/renderer/canvas/ImageLayer.js
View File

@@ -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)) {