Skip to content

Commit

Permalink
Merge pull request #6855 from tschaub/pluggable
Browse files Browse the repository at this point in the history
Pluggable renderers
  • Loading branch information
tschaub committed Aug 15, 2017
2 parents 9bdd643 + 1674fcc commit 81acbc0
Show file tree
Hide file tree
Showing 51 changed files with 2,103 additions and 1,624 deletions.
2 changes: 1 addition & 1 deletion doc/tutorials/closure.md
Expand Up @@ -124,7 +124,7 @@ goog.require('ol.source.OSM');


/**
* @type {ol.Map}
* @type {ol.PluggableMap}
*/
app.map = new ol.Map({
target: 'map',
Expand Down
2 changes: 1 addition & 1 deletion examples/icon-sprite-webgl.js
Expand Up @@ -80,7 +80,7 @@ var vector = new ol.layer.Vector({
});

var map = new ol.Map({
renderer: /** @type {ol.renderer.Type} */ ('webgl'),
renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
layers: [vector],
target: document.getElementById('map'),
view: new ol.View({
Expand Down
2 changes: 1 addition & 1 deletion examples/layer-clipping-webgl.js
Expand Up @@ -19,7 +19,7 @@ if (!ol.has.WEBGL) {

var map = new ol.Map({
layers: [osm],
renderer: /** @type {ol.renderer.Type} */ ('webgl'),
renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
Expand Down
2 changes: 1 addition & 1 deletion examples/side-by-side.js
Expand Up @@ -22,7 +22,7 @@ var map1 = new ol.Map({
if (ol.has.WEBGL) {
var map2 = new ol.Map({
target: 'webglMap',
renderer: /** @type {ol.renderer.Type} */ ('webgl'),
renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
layers: [layer],
view: view
});
Expand Down
2 changes: 1 addition & 1 deletion examples/symbol-atlas-webgl.js
Expand Up @@ -107,7 +107,7 @@ var vector = new ol.layer.Vector({
});

var map = new ol.Map({
renderer: /** @type {ol.renderer.Type} */ ('webgl'),
renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
layers: [vector],
target: document.getElementById('map'),
view: new ol.View({
Expand Down
2 changes: 1 addition & 1 deletion examples/zoomslider.js
Expand Up @@ -9,7 +9,7 @@ goog.require('ol.source.OSM');
* Helper method for map-creation.
*
* @param {string} divId The id of the div for the map.
* @return {ol.Map} The ol.Map instance.
* @return {ol.PluggableMap} The ol.Map instance.
*/
var createMap = function(divId) {
var source, layer, map, zoomslider;
Expand Down
4 changes: 2 additions & 2 deletions externs/oli.js
Expand Up @@ -181,7 +181,7 @@ oli.MapEvent = function() {};


/**
* @type {ol.Map}
* @type {ol.PluggableMap}
*/
oli.MapEvent.prototype.map;

Expand Down Expand Up @@ -229,7 +229,7 @@ oli.control.Control = function() {};


/**
* @param {ol.Map} map Map.
* @param {ol.PluggableMap} map Map.
* @return {undefined} Undefined.
*/
oli.control.Control.prototype.setMap = function(map) {};
Expand Down
66 changes: 56 additions & 10 deletions externs/olx.js
Expand Up @@ -109,7 +109,7 @@ olx.LogoOptions.prototype.src;


/**
* @typedef {{map: (ol.Map|undefined),
* @typedef {{map: (ol.PluggableMap|undefined),
* maxLines: (number|undefined),
* strokeStyle: (ol.style.Stroke|undefined),
* targetSize: (number|undefined),
Expand All @@ -126,7 +126,7 @@ olx.GraticuleOptions;

/**
* Reference to an `ol.Map` object.
* @type {ol.Map|undefined}
* @type {ol.PluggableMap|undefined}
* @api
*/
olx.GraticuleOptions.prototype.map;
Expand Down Expand Up @@ -4011,7 +4011,7 @@ olx.layer.HeatmapOptions.prototype.zIndex;

/**
* @typedef {{opacity: (number|undefined),
* map: (ol.Map|undefined),
* map: (ol.PluggableMap|undefined),
* source: (ol.source.Image|undefined),
* visible: (boolean|undefined),
* extent: (ol.Extent|undefined),
Expand Down Expand Up @@ -4043,7 +4043,7 @@ olx.layer.ImageOptions.prototype.source;
* layers collection, and the layer will be rendered on top. This is useful for
* temporary layers. The standard way to add a layer to a map and have it
* managed by the map is to use {@link ol.Map#addLayer}.
* @type {ol.Map|undefined}
* @type {ol.PluggableMap|undefined}
* @api
*/
olx.layer.ImageOptions.prototype.map;
Expand Down Expand Up @@ -4095,7 +4095,7 @@ olx.layer.ImageOptions.prototype.zIndex;
* @typedef {{opacity: (number|undefined),
* preload: (number|undefined),
* source: (ol.source.Tile|undefined),
* map: (ol.Map|undefined),
* map: (ol.PluggableMap|undefined),
* visible: (boolean|undefined),
* extent: (ol.Extent|undefined),
* minResolution: (number|undefined),
Expand Down Expand Up @@ -4136,7 +4136,7 @@ olx.layer.TileOptions.prototype.source;
* layers collection, and the layer will be rendered on top. This is useful for
* temporary layers. The standard way to add a layer to a map and have it
* managed by the map is to use {@link ol.Map#addLayer}.
* @type {ol.Map|undefined}
* @type {ol.PluggableMap|undefined}
* @api
*/
olx.layer.TileOptions.prototype.map;
Expand Down Expand Up @@ -4199,7 +4199,7 @@ olx.layer.TileOptions.prototype.zIndex;
* opacity: (number|undefined),
* renderBuffer: (number|undefined),
* source: (ol.source.Vector|undefined),
* map: (ol.Map|undefined),
* map: (ol.PluggableMap|undefined),
* style: (ol.style.Style|Array.<ol.style.Style>|ol.StyleFunction|undefined),
* updateWhileAnimating: (boolean|undefined),
* updateWhileInteracting: (boolean|undefined),
Expand All @@ -4224,7 +4224,7 @@ olx.layer.VectorOptions.prototype.renderOrder;
* layers collection, and the layer will be rendered on top. This is useful for
* temporary layers. The standard way to add a layer to a map and have it
* managed by the map is to use {@link ol.Map#addLayer}.
* @type {ol.Map|undefined}
* @type {ol.PluggableMap|undefined}
* @api
*/
olx.layer.VectorOptions.prototype.map;
Expand Down Expand Up @@ -4330,7 +4330,7 @@ olx.layer.VectorOptions.prototype.zIndex;

/**
* @typedef {{extent: (ol.Extent|undefined),
* map: (ol.Map|undefined),
* map: (ol.PluggableMap|undefined),
* minResolution: (number|undefined),
* maxResolution: (number|undefined),
* opacity: (number|undefined),
Expand Down Expand Up @@ -4392,7 +4392,7 @@ olx.layer.VectorTileOptions.prototype.renderOrder;
* layers collection, and the layer will be rendered on top. This is useful for
* temporary layers. The standard way to add a layer to a map and have it
* managed by the map is to use {@link ol.Map#addLayer}.
* @type {ol.Map|undefined}
* @type {ol.PluggableMap|undefined}
* @api
*/
olx.layer.VectorTileOptions.prototype.map;
Expand Down Expand Up @@ -8290,3 +8290,49 @@ olx.style.AtlasManagerOptions.prototype.maxSize;
* @api
*/
olx.style.AtlasManagerOptions.prototype.space;


/**
* @typedef {{handles: function(ol.renderer.Type):boolean,
* create: function(Element, ol.PluggableMap):ol.renderer.Map}}
*/
olx.MapRendererPlugin;


/**
* Determine if this renderer handles the provided layer.
* @type {function(ol.renderer.Type):boolean}
* @api
*/
olx.MapRendererPlugin.prototype.handles;


/**
* Create the map renderer.
* @type {function(Element, ol.PluggableMap):ol.renderer.Map}
* @api
*/
olx.MapRendererPlugin.prototype.create;


/**
* @typedef {{handles: function(ol.renderer.Type, ol.layer.Layer):boolean,
* create: function(ol.renderer.Map, ol.layer.Layer):ol.renderer.Layer}}
*/
olx.LayerRendererPlugin;


/**
* Determine if this renderer handles the provided layer.
* @type {function(ol.renderer.Type, ol.layer.Layer):boolean}
* @api
*/
olx.LayerRendererPlugin.prototype.handles;


/**
* Create a layer renderer.
* @type {function(ol.renderer.Map, ol.layer.Layer):ol.renderer.Layer}
* @api
*/
olx.LayerRendererPlugin.prototype.create;
4 changes: 2 additions & 2 deletions externs/readme.md
Expand Up @@ -53,7 +53,7 @@ For custom subclasses in applications, which can be created using `ol.inherits`,
oli.control.Control = function() {};

/**
* @param {ol.Map} map Map.
* @param {ol.PluggableMap} map Map.
* @return {undefined} Undefined.
*/
oli.control.Control.prototype.setMap = function(map) {};
Expand All @@ -74,7 +74,7 @@ ol.control.Control = function(options) {

/**
* Application subclasses may override this.
* @param {ol.Map} map Map.
* @param {ol.PluggableMap} map Map.
* @api
*/
ol.control.Control.prototype.setMap = function(map) {
Expand Down
86 changes: 86 additions & 0 deletions src/ol/canvasmap.js
@@ -0,0 +1,86 @@
goog.provide('ol.CanvasMap');

goog.require('ol');
goog.require('ol.PluggableMap');
goog.require('ol.PluginType');
goog.require('ol.control');
goog.require('ol.interaction');
goog.require('ol.obj');
goog.require('ol.plugins');
goog.require('ol.renderer.canvas.ImageLayer');
goog.require('ol.renderer.canvas.Map');
goog.require('ol.renderer.canvas.TileLayer');
goog.require('ol.renderer.canvas.VectorLayer');
goog.require('ol.renderer.canvas.VectorTileLayer');


ol.plugins.register(ol.PluginType.MAP_RENDERER, ol.renderer.canvas.Map);
ol.plugins.registerMultiple(ol.PluginType.LAYER_RENDERER, [
ol.renderer.canvas.ImageLayer,
ol.renderer.canvas.TileLayer,
ol.renderer.canvas.VectorLayer,
ol.renderer.canvas.VectorTileLayer
]);


/**
* @classdesc
* The map is the core component of OpenLayers. For a map to render, a view,
* one or more layers, and a target container are needed:
*
* var map = new ol.CanvasMap({
* view: new ol.View({
* center: [0, 0],
* zoom: 1
* }),
* layers: [
* new ol.layer.Tile({
* source: new ol.source.OSM()
* })
* ],
* target: 'map'
* });
*
* The above snippet creates a map using a {@link ol.layer.Tile} to display
* {@link ol.source.OSM} OSM data and render it to a DOM element with the
* id `map`.
*
* The constructor places a viewport container (with CSS class name
* `ol-viewport`) in the target element (see `getViewport()`), and then two
* further elements within the viewport: one with CSS class name
* `ol-overlaycontainer-stopevent` for controls and some overlays, and one with
* CSS class name `ol-overlaycontainer` for other overlays (see the `stopEvent`
* option of {@link ol.Overlay} for the difference). The map itself is placed in
* a further element within the viewport.
*
* Layers are stored as a `ol.Collection` in layerGroups. A top-level group is
* provided by the library. This is what is accessed by `getLayerGroup` and
* `setLayerGroup`. Layers entered in the options are added to this group, and
* `addLayer` and `removeLayer` change the layer collection in the group.
* `getLayers` is a convenience function for `getLayerGroup().getLayers()`.
* Note that `ol.layer.Group` is a subclass of `ol.layer.Base`, so layers
* entered in the options or added with `addLayer` can be groups, which can
* contain further groups, and so on.
*
* @constructor
* @extends {ol.PluggableMap}
* @param {olx.MapOptions} options Map options.
* @fires ol.MapBrowserEvent
* @fires ol.MapEvent
* @fires ol.render.Event#postcompose
* @fires ol.render.Event#precompose
* @api
*/
ol.CanvasMap = function(options) {
options = ol.obj.assign({}, options);
delete options.renderer;
if (!options.controls) {
options.controls = ol.control.defaults();
}
if (!options.interactions) {
options.interactions = ol.interaction.defaults();
}

ol.PluggableMap.call(this, options);
};
ol.inherits(ol.CanvasMap, ol.PluggableMap);
6 changes: 3 additions & 3 deletions src/ol/control/control.js
Expand Up @@ -54,7 +54,7 @@ ol.control.Control = function(options) {

/**
* @private
* @type {ol.Map}
* @type {ol.PluggableMap}
*/
this.map_ = null;

Expand Down Expand Up @@ -88,7 +88,7 @@ ol.control.Control.prototype.disposeInternal = function() {

/**
* Get the map associated with this control.
* @return {ol.Map} Map.
* @return {ol.PluggableMap} Map.
* @api
*/
ol.control.Control.prototype.getMap = function() {
Expand All @@ -100,7 +100,7 @@ ol.control.Control.prototype.getMap = function() {
* Remove the control from its current map and attach it to the new map.
* Subclasses may set up event handlers to get notified about changes to
* the map here.
* @param {ol.Map} map Map.
* @param {ol.PluggableMap} map Map.
* @override
* @api
*/
Expand Down
8 changes: 4 additions & 4 deletions src/ol/control/overviewmap.js
Expand Up @@ -2,7 +2,7 @@ goog.provide('ol.control.OverviewMap');

goog.require('ol');
goog.require('ol.Collection');
goog.require('ol.Map');
goog.require('ol.PluggableMap');
goog.require('ol.MapEventType');
goog.require('ol.MapProperty');
goog.require('ol.Object');
Expand Down Expand Up @@ -97,10 +97,10 @@ ol.control.OverviewMap = function(opt_options) {
this.ovmapDiv_.className = 'ol-overviewmap-map';

/**
* @type {ol.Map}
* @type {ol.PluggableMap}
* @private
*/
this.ovmap_ = new ol.Map({
this.ovmap_ = new ol.PluggableMap({
controls: new ol.Collection(),
interactions: new ol.Collection(),
view: options.view
Expand Down Expand Up @@ -551,7 +551,7 @@ ol.control.OverviewMap.prototype.getCollapsed = function() {

/**
* Return the overview map.
* @return {ol.Map} Overview map.
* @return {ol.PluggableMap} Overview map.
* @api
*/
ol.control.OverviewMap.prototype.getOverviewMap = function() {
Expand Down

0 comments on commit 81acbc0

Please sign in to comment.