diff --git a/doc/tutorials/closure.md b/doc/tutorials/closure.md index 61b709249c..7e14aa7c8a 100644 --- a/doc/tutorials/closure.md +++ b/doc/tutorials/closure.md @@ -170,7 +170,6 @@ The minimum config file looks like this: ], "define": [ "ol.DEBUG=false", - "ol.ENABLE_DOM=false", "ol.ENABLE_WEBGL=false" ], "js": [ @@ -222,7 +221,6 @@ Here is a version of `config.json` with more compilation checks enabled: ], "define": [ "ol.DEBUG=false", - "ol.ENABLE_DOM=false", "ol.ENABLE_WEBGL=false" ], "js": [ diff --git a/doc/tutorials/custom-builds.md b/doc/tutorials/custom-builds.md index 66f7e2986c..4ffc771ac0 100644 --- a/doc/tutorials/custom-builds.md +++ b/doc/tutorials/custom-builds.md @@ -156,7 +156,6 @@ Setting some of these to `false` means that the portions of the code relating to You might have noticed that the build file you've just created is considerably smaller than the full build, but it can be reduced further. This is because all three renderers and all layer types are included by default. We only need one renderer, and only need the tile layer, so can exclude the others by setting these properties with `define`s. So add the following to the define section of the config above: ``` - "ol.ENABLE_DOM=false", "ol.ENABLE_WEBGL=false", "ol.ENABLE_PROJ4JS=false", "ol.ENABLE_IMAGE=false", @@ -207,7 +206,6 @@ Now let's try a more complicated example: [`heatmaps-earthquakes`](http://openla "externs/oli.js" ], "define": [ - "ol.ENABLE_DOM=false", "ol.ENABLE_WEBGL=false", "ol.ENABLE_PROJ4JS=false", "ol.ENABLE_IMAGE=false", diff --git a/externs/olx.js b/externs/olx.js index 62d4e6f2d7..23c3456564 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -272,11 +272,11 @@ olx.MapOptions.prototype.overlays; /** - * Renderer. By default, Canvas, DOM and WebGL renderers are tested for support + * Renderer. By default, Canvas and WebGL renderers are tested for support * in that order, and the first supported used. Specify a * {@link ol.RendererType} here to use a specific renderer. - * Note that at present the Canvas and DOM renderers fully support vector data, - * but WebGL can only render Point geometries. + * Note that the Canvas renderer fully supports vector data, but WebGL can only + * render Point geometries. * @type {ol.RendererType|Array.|string|undefined} * @api stable */ diff --git a/src/ol/has.js b/src/ol/has.js index 3f7d8124b1..51e0c08aad 100644 --- a/src/ol/has.js +++ b/src/ol/has.js @@ -98,14 +98,6 @@ ol.has.CANVAS = ol.ENABLE_CANVAS && ( ol.has.DEVICE_ORIENTATION = 'DeviceOrientationEvent' in olGlobal; -/** - * True if `ol.ENABLE_DOM` is set to `true` at compile time. - * @const - * @type {boolean} - */ -ol.has.DOM = ol.ENABLE_DOM; - - /** * Is HTML5 geolocation supported in the current browser? * @const diff --git a/src/ol/index.js b/src/ol/index.js index 47762a8714..697b11a25f 100644 --- a/src/ol/index.js +++ b/src/ol/index.js @@ -67,15 +67,6 @@ ol.DRAG_BOX_HYSTERESIS_PIXELS = 8; ol.ENABLE_CANVAS = true; -/** - * @define {boolean} Enable the DOM renderer (used as a fallback where Canvas is - * not available). Default is `true`. Setting this to false at compile time - * in advanced mode removes all code supporting the DOM renderer from the - * build. - */ -ol.ENABLE_DOM = true; - - /** * @define {boolean} Enable rendering of ol.layer.Image based layers. Default * is `true`. Setting this to false at compile time in advanced mode removes diff --git a/src/ol/map.js b/src/ol/map.js index 48e17709b2..1ab9981868 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -33,7 +33,6 @@ goog.require('ol.obj'); goog.require('ol.proj.common'); goog.require('ol.renderer.Map'); goog.require('ol.renderer.canvas.Map'); -goog.require('ol.renderer.dom.Map'); goog.require('ol.renderer.webgl.Map'); goog.require('ol.size'); goog.require('ol.structs.PriorityQueue'); @@ -81,8 +80,7 @@ ol.OL3_LOGO_URL = 'data:image/png;base64,' + */ ol.DEFAULT_RENDERER_TYPES = [ ol.RendererType.CANVAS, - ol.RendererType.WEBGL, - ol.RendererType.DOM + ol.RendererType.WEBGL ]; @@ -125,8 +123,7 @@ ol.MapProperty = { * `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, either DOM or Canvas, depending on the - * renderer. + * 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 @@ -1481,6 +1478,10 @@ ol.Map.createOptionsInternal = function(options) { } else { ol.asserts.assert(false, 46); // Incorrect format for `renderer` option } + if (rendererTypes.indexOf(/** @type {ol.RendererType} */ ('dom')) >= 0) { + goog.DEBUG && console.assert(false, 'The DOM render has been removed'); + rendererTypes = rendererTypes.concat(ol.DEFAULT_RENDERER_TYPES); + } } else { rendererTypes = ol.DEFAULT_RENDERER_TYPES; } @@ -1494,11 +1495,6 @@ ol.Map.createOptionsInternal = function(options) { rendererConstructor = ol.renderer.canvas.Map; break; } - } else if (ol.ENABLE_DOM && rendererType == ol.RendererType.DOM) { - if (ol.has.DOM) { - rendererConstructor = ol.renderer.dom.Map; - break; - } } else if (ol.ENABLE_WEBGL && rendererType == ol.RendererType.WEBGL) { if (ol.has.WEBGL) { rendererConstructor = ol.renderer.webgl.Map; diff --git a/src/ol/renderer/dom/imagelayer.js b/src/ol/renderer/dom/imagelayer.js deleted file mode 100644 index 60d5fcbad2..0000000000 --- a/src/ol/renderer/dom/imagelayer.js +++ /dev/null @@ -1,154 +0,0 @@ -goog.provide('ol.renderer.dom.ImageLayer'); - -goog.require('ol'); -goog.require('ol.View'); -goog.require('ol.array'); -goog.require('ol.dom'); -goog.require('ol.extent'); -goog.require('ol.proj'); -goog.require('ol.renderer.dom.Layer'); -goog.require('ol.transform'); - - -/** - * @constructor - * @extends {ol.renderer.dom.Layer} - * @param {ol.layer.Image} imageLayer Image layer. - */ -ol.renderer.dom.ImageLayer = function(imageLayer) { - var target = document.createElement('DIV'); - target.style.position = 'absolute'; - - ol.renderer.dom.Layer.call(this, imageLayer, target); - - /** - * The last rendered image. - * @private - * @type {?ol.ImageBase} - */ - this.image_ = null; - - /** - * @private - * @type {ol.Transform} - */ - this.transform_ = ol.transform.create(); - -}; -ol.inherits(ol.renderer.dom.ImageLayer, ol.renderer.dom.Layer); - - -/** - * @inheritDoc - */ -ol.renderer.dom.ImageLayer.prototype.forEachFeatureAtCoordinate = function(coordinate, frameState, callback, thisArg) { - var layer = this.getLayer(); - var source = layer.getSource(); - var resolution = frameState.viewState.resolution; - var rotation = frameState.viewState.rotation; - var skippedFeatureUids = frameState.skippedFeatureUids; - return source.forEachFeatureAtCoordinate( - coordinate, resolution, rotation, skippedFeatureUids, - /** - * @param {ol.Feature|ol.render.Feature} feature Feature. - * @return {?} Callback result. - */ - function(feature) { - return callback.call(thisArg, feature, layer); - }); -}; - - -/** - * @inheritDoc - */ -ol.renderer.dom.ImageLayer.prototype.clearFrame = function() { - ol.dom.removeChildren(this.target); - this.image_ = null; -}; - - -/** - * @inheritDoc - */ -ol.renderer.dom.ImageLayer.prototype.prepareFrame = function(frameState, layerState) { - - var viewState = frameState.viewState; - var viewCenter = viewState.center; - var viewResolution = viewState.resolution; - var viewRotation = viewState.rotation; - - var image = this.image_; - var imageLayer = /** @type {ol.layer.Image} */ (this.getLayer()); - var imageSource = imageLayer.getSource(); - - var hints = frameState.viewHints; - - var renderedExtent = frameState.extent; - if (layerState.extent !== undefined) { - renderedExtent = ol.extent.getIntersection( - renderedExtent, layerState.extent); - } - - if (!hints[ol.View.Hint.ANIMATING] && !hints[ol.View.Hint.INTERACTING] && - !ol.extent.isEmpty(renderedExtent)) { - var projection = viewState.projection; - if (!ol.ENABLE_RASTER_REPROJECTION) { - var sourceProjection = imageSource.getProjection(); - if (sourceProjection) { - ol.DEBUG && console.assert(ol.proj.equivalent(projection, sourceProjection), - 'projection and sourceProjection are equivalent'); - projection = sourceProjection; - } - } - var image_ = imageSource.getImage(renderedExtent, viewResolution, - frameState.pixelRatio, projection); - if (image_) { - var loaded = this.loadImage(image_); - if (loaded) { - image = image_; - } - } - } - - if (image) { - var imageExtent = image.getExtent(); - var imageResolution = image.getResolution(); - var transform = ol.transform.create(); - ol.transform.compose(transform, - frameState.size[0] / 2, frameState.size[1] / 2, - imageResolution / viewResolution, imageResolution / viewResolution, - viewRotation, - (imageExtent[0] - viewCenter[0]) / imageResolution, - (viewCenter[1] - imageExtent[3]) / imageResolution); - - if (image != this.image_) { - var imageElement = image.getImage(this); - // Bootstrap sets the style max-width: 100% for all images, which breaks - // prevents the image from being displayed in FireFox. Workaround by - // overriding the max-width style. - imageElement.style.maxWidth = 'none'; - imageElement.style.position = 'absolute'; - ol.dom.removeChildren(this.target); - this.target.appendChild(imageElement); - this.image_ = image; - } - this.setTransform_(transform); - this.updateAttributions(frameState.attributions, image.getAttributions()); - this.updateLogos(frameState, imageSource); - } - - return true; -}; - - -/** - * @param {ol.Transform} transform Transform. - * @private - */ -ol.renderer.dom.ImageLayer.prototype.setTransform_ = function(transform) { - if (!ol.array.equals(transform, this.transform_)) { - ol.dom.transformElement2D(this.target, transform, 6); - ol.transform.setFromArray(this.transform_, transform); - } -}; diff --git a/src/ol/renderer/dom/layer.js b/src/ol/renderer/dom/layer.js deleted file mode 100644 index 584cd00010..0000000000 --- a/src/ol/renderer/dom/layer.js +++ /dev/null @@ -1,54 +0,0 @@ -goog.provide('ol.renderer.dom.Layer'); - -goog.require('ol'); -goog.require('ol.renderer.Layer'); - - -/** - * @constructor - * @extends {ol.renderer.Layer} - * @param {ol.layer.Layer} layer Layer. - * @param {!Element} target Target. - */ -ol.renderer.dom.Layer = function(layer, target) { - - ol.renderer.Layer.call(this, layer); - - /** - * @type {!Element} - * @protected - */ - this.target = target; - -}; -ol.inherits(ol.renderer.dom.Layer, ol.renderer.Layer); - - -/** - * Clear rendered elements. - */ -ol.renderer.dom.Layer.prototype.clearFrame = ol.nullFunction; - - -/** - * @param {olx.FrameState} frameState Frame state. - * @param {ol.LayerState} layerState Layer state. - */ -ol.renderer.dom.Layer.prototype.composeFrame = ol.nullFunction; - - -/** - * @return {!Element} Target. - */ -ol.renderer.dom.Layer.prototype.getTarget = function() { - return this.target; -}; - - -/** - * @abstract - * @param {olx.FrameState} frameState Frame state. - * @param {ol.LayerState} layerState Layer state. - * @return {boolean} whether composeFrame should be called. - */ -ol.renderer.dom.Layer.prototype.prepareFrame = function(frameState, layerState) {}; diff --git a/src/ol/renderer/dom/map.js b/src/ol/renderer/dom/map.js deleted file mode 100644 index 2305dde773..0000000000 --- a/src/ol/renderer/dom/map.js +++ /dev/null @@ -1,211 +0,0 @@ -goog.provide('ol.renderer.dom.Map'); - -goog.require('ol.events'); -goog.require('ol.events.Event'); -goog.require('ol.events.EventType'); -goog.require('ol.transform'); -goog.require('ol'); -goog.require('ol.RendererType'); -goog.require('ol.array'); -goog.require('ol.css'); -goog.require('ol.dom'); -goog.require('ol.layer.Image'); -goog.require('ol.layer.Layer'); -goog.require('ol.layer.Tile'); -goog.require('ol.layer.Vector'); -goog.require('ol.render.Event'); -goog.require('ol.render.EventType'); -goog.require('ol.render.canvas.Immediate'); -goog.require('ol.renderer.Map'); -goog.require('ol.renderer.dom.ImageLayer'); -goog.require('ol.renderer.dom.TileLayer'); -goog.require('ol.renderer.dom.VectorLayer'); -goog.require('ol.source.State'); - - -/** - * @constructor - * @extends {ol.renderer.Map} - * @param {Element} container Container. - * @param {ol.Map} map Map. - */ -ol.renderer.dom.Map = function(container, map) { - - ol.renderer.Map.call(this, container, map); - - /** - * @private - * @type {CanvasRenderingContext2D} - */ - this.context_ = ol.dom.createCanvasContext2D(); - var canvas = this.context_.canvas; - canvas.style.position = 'absolute'; - canvas.style.width = '100%'; - canvas.style.height = '100%'; - canvas.className = ol.css.CLASS_UNSELECTABLE; - container.insertBefore(canvas, container.childNodes[0] || null); - - /** - * @private - * @type {ol.Transform} - */ - this.transform_ = ol.transform.create(); - - /** - * @type {!Element} - * @private - */ - this.layersPane_ = document.createElement('DIV'); - this.layersPane_.className = ol.css.CLASS_UNSELECTABLE; - var style = this.layersPane_.style; - style.position = 'absolute'; - style.width = '100%'; - style.height = '100%'; - - // prevent the img context menu on mobile devices - ol.events.listen(this.layersPane_, ol.events.EventType.TOUCHSTART, - ol.events.Event.preventDefault); - - container.insertBefore(this.layersPane_, container.childNodes[0] || null); - - /** - * @private - * @type {boolean} - */ - this.renderedVisible_ = true; - -}; -ol.inherits(ol.renderer.dom.Map, ol.renderer.Map); - - -/** - * @inheritDoc - */ -ol.renderer.dom.Map.prototype.disposeInternal = function() { - ol.dom.removeNode(this.layersPane_); - ol.renderer.Map.prototype.disposeInternal.call(this); -}; - - -/** - * @inheritDoc - */ -ol.renderer.dom.Map.prototype.createLayerRenderer = function(layer) { - var layerRenderer; - if (ol.ENABLE_IMAGE && layer instanceof ol.layer.Image) { - layerRenderer = new ol.renderer.dom.ImageLayer(layer); - } else if (ol.ENABLE_TILE && layer instanceof ol.layer.Tile) { - layerRenderer = new ol.renderer.dom.TileLayer(layer); - } else if (ol.ENABLE_VECTOR && layer instanceof ol.layer.Vector) { - layerRenderer = new ol.renderer.dom.VectorLayer(layer); - } else { - ol.DEBUG && console.assert(false, 'unexpected layer configuration'); - return null; - } - return layerRenderer; -}; - - -/** - * @param {ol.render.EventType} type Event type. - * @param {olx.FrameState} frameState Frame state. - * @private - */ -ol.renderer.dom.Map.prototype.dispatchComposeEvent_ = function(type, frameState) { - var map = this.getMap(); - if (map.hasListener(type)) { - var extent = frameState.extent; - var pixelRatio = frameState.pixelRatio; - var viewState = frameState.viewState; - var rotation = viewState.rotation; - var context = this.context_; - var canvas = context.canvas; - - var transform = ol.transform.compose(this.transform_, - canvas.width / 2, canvas.height / 2, - pixelRatio / viewState.resolution, -pixelRatio / viewState.resolution, - -rotation, - -viewState.center[0], -viewState.center[1]); - - var vectorContext = new ol.render.canvas.Immediate(context, pixelRatio, - extent, transform, rotation); - var composeEvent = new ol.render.Event(type, vectorContext, - frameState, context, null); - map.dispatchEvent(composeEvent); - } -}; - - -/** - * @inheritDoc - */ -ol.renderer.dom.Map.prototype.getType = function() { - return ol.RendererType.DOM; -}; - - -/** - * @inheritDoc - */ -ol.renderer.dom.Map.prototype.renderFrame = function(frameState) { - - if (!frameState) { - if (this.renderedVisible_) { - this.layersPane_.style.display = 'none'; - this.renderedVisible_ = false; - } - return; - } - - var map = this.getMap(); - if (map.hasListener(ol.render.EventType.PRECOMPOSE) || - map.hasListener(ol.render.EventType.POSTCOMPOSE)) { - var canvas = this.context_.canvas; - var pixelRatio = frameState.pixelRatio; - canvas.width = frameState.size[0] * pixelRatio; - canvas.height = frameState.size[1] * pixelRatio; - } - - this.dispatchComposeEvent_(ol.render.EventType.PRECOMPOSE, frameState); - - var layerStatesArray = frameState.layerStatesArray; - ol.array.stableSort(layerStatesArray, ol.renderer.Map.sortByZIndex); - - var viewResolution = frameState.viewState.resolution; - var i, ii, layer, layerRenderer, layerState; - for (i = 0, ii = layerStatesArray.length; i < ii; ++i) { - layerState = layerStatesArray[i]; - layer = layerState.layer; - layerRenderer = /** @type {ol.renderer.dom.Layer} */ ( - this.getLayerRenderer(layer)); - this.layersPane_.insertBefore(layerRenderer.getTarget(), this.layersPane_.childNodes[i] || null); - if (ol.layer.Layer.visibleAtResolution(layerState, viewResolution) && - layerState.sourceState == ol.source.State.READY) { - if (layerRenderer.prepareFrame(frameState, layerState)) { - layerRenderer.composeFrame(frameState, layerState); - } - } else { - layerRenderer.clearFrame(); - } - } - - var layerStates = frameState.layerStates; - var layerKey; - for (layerKey in this.getLayerRenderers()) { - if (!(layerKey in layerStates)) { - layerRenderer = /** @type {ol.renderer.dom.Layer} */ (this.getLayerRendererByKey(layerKey)); - ol.dom.removeNode(layerRenderer.getTarget()); - } - } - - if (!this.renderedVisible_) { - this.layersPane_.style.display = ''; - this.renderedVisible_ = true; - } - - this.calculateMatrices2D(frameState); - this.scheduleRemoveUnusedLayerRenderers(frameState); - this.scheduleExpireIconCache(frameState); - - this.dispatchComposeEvent_(ol.render.EventType.POSTCOMPOSE, frameState); -}; diff --git a/src/ol/renderer/dom/tilelayer.js b/src/ol/renderer/dom/tilelayer.js deleted file mode 100644 index 53bcf57d1d..0000000000 --- a/src/ol/renderer/dom/tilelayer.js +++ /dev/null @@ -1,440 +0,0 @@ -// FIXME probably need to reset TileLayerZ if offsets get too large -// FIXME when zooming out, preserve higher Z divs to avoid white flash - -goog.provide('ol.renderer.dom.TileLayer'); - -goog.require('ol'); -goog.require('ol.Tile'); -goog.require('ol.TileRange'); -goog.require('ol.View'); -goog.require('ol.array'); -goog.require('ol.dom'); -goog.require('ol.extent'); -goog.require('ol.renderer.dom.Layer'); -goog.require('ol.size'); -goog.require('ol.transform'); - - -/** - * @constructor - * @extends {ol.renderer.dom.Layer} - * @param {ol.layer.Tile} tileLayer Tile layer. - */ -ol.renderer.dom.TileLayer = function(tileLayer) { - - var target = document.createElement('DIV'); - target.style.position = 'absolute'; - - ol.renderer.dom.Layer.call(this, tileLayer, target); - - /** - * @private - * @type {boolean} - */ - this.renderedVisible_ = true; - - /** - * @private - * @type {number} - */ - this.renderedOpacity_ = 1; - - /** - * @private - * @type {number} - */ - this.renderedRevision_ = 0; - - /** - * @private - * @type {!Object.} - */ - this.tileLayerZs_ = {}; - -}; -ol.inherits(ol.renderer.dom.TileLayer, ol.renderer.dom.Layer); - - -/** - * @inheritDoc - */ -ol.renderer.dom.TileLayer.prototype.clearFrame = function() { - ol.dom.removeChildren(this.target); - this.renderedRevision_ = 0; -}; - - -/** - * @inheritDoc - */ -ol.renderer.dom.TileLayer.prototype.prepareFrame = function(frameState, layerState) { - - if (!layerState.visible) { - if (this.renderedVisible_) { - this.target.style.display = 'none'; - this.renderedVisible_ = false; - } - return true; - } - - var pixelRatio = frameState.pixelRatio; - var viewState = frameState.viewState; - var projection = viewState.projection; - - var tileLayer = /** @type {ol.layer.Tile} */ (this.getLayer()); - var tileSource = tileLayer.getSource(); - var tileGrid = tileSource.getTileGridForProjection(projection); - var tileGutter = pixelRatio * tileSource.getGutter(projection); - var z = tileGrid.getZForResolution(viewState.resolution); - var tileResolution = tileGrid.getResolution(z); - var center = viewState.center; - var extent; - if (tileResolution == viewState.resolution) { - center = this.snapCenterToPixel(center, tileResolution, frameState.size); - extent = ol.extent.getForViewAndSize( - center, tileResolution, viewState.rotation, frameState.size); - } else { - extent = frameState.extent; - } - - if (layerState.extent !== undefined) { - extent = ol.extent.getIntersection(extent, layerState.extent); - } - - var tileRange = tileGrid.getTileRangeForExtentAndResolution( - extent, tileResolution); - - /** @type {Object.>} */ - var tilesToDrawByZ = {}; - tilesToDrawByZ[z] = {}; - - var findLoadedTiles = this.createLoadedTileFinder( - tileSource, projection, tilesToDrawByZ); - - var useInterimTilesOnError = tileLayer.getUseInterimTilesOnError(); - - var tmpExtent = ol.extent.createEmpty(); - var tmpTileRange = new ol.TileRange(0, 0, 0, 0); - var childTileRange, drawable, fullyLoaded, tile, tileState, x, y; - for (x = tileRange.minX; x <= tileRange.maxX; ++x) { - for (y = tileRange.minY; y <= tileRange.maxY; ++y) { - tile = tileSource.getTile(z, x, y, pixelRatio, projection); - tileState = tile.getState(); - drawable = tileState == ol.Tile.State.LOADED || - tileState == ol.Tile.State.EMPTY || - tileState == ol.Tile.State.ERROR && !useInterimTilesOnError; - if (!drawable && tile.interimTile) { - tile = tile.interimTile; - } - tileState = tile.getState(); - if (tileState == ol.Tile.State.LOADED) { - tilesToDrawByZ[z][tile.tileCoord.toString()] = tile; - continue; - } else if (tileState == ol.Tile.State.EMPTY || - (tileState == ol.Tile.State.ERROR && - !useInterimTilesOnError)) { - continue; - } - fullyLoaded = tileGrid.forEachTileCoordParentTileRange( - tile.tileCoord, findLoadedTiles, null, tmpTileRange, tmpExtent); - if (!fullyLoaded) { - childTileRange = tileGrid.getTileCoordChildTileRange( - tile.tileCoord, tmpTileRange, tmpExtent); - if (childTileRange) { - findLoadedTiles(z + 1, childTileRange); - } - } - - } - - } - - // If the tile source revision changes, we destroy the existing DOM structure - // so that a new one will be created. It would be more efficient to modify - // the existing structure. - var tileLayerZ, tileLayerZKey; - if (this.renderedRevision_ != tileSource.getRevision()) { - for (tileLayerZKey in this.tileLayerZs_) { - tileLayerZ = this.tileLayerZs_[+tileLayerZKey]; - ol.dom.removeNode(tileLayerZ.target); - } - this.tileLayerZs_ = {}; - this.renderedRevision_ = tileSource.getRevision(); - } - - /** @type {Array.} */ - var zs = Object.keys(tilesToDrawByZ).map(Number); - zs.sort(ol.array.numberSafeCompareFunction); - - /** @type {Object.} */ - var newTileLayerZKeys = {}; - - var iz, iziz, tileCoordKey, tileCoordOrigin, tilesToDraw; - for (iz = 0, iziz = zs.length; iz < iziz; ++iz) { - tileLayerZKey = zs[iz]; - if (tileLayerZKey in this.tileLayerZs_) { - tileLayerZ = this.tileLayerZs_[tileLayerZKey]; - } else { - tileCoordOrigin = - tileGrid.getTileCoordForCoordAndZ(center, tileLayerZKey); - tileLayerZ = new ol.renderer.dom.TileLayerZ_(tileGrid, tileCoordOrigin); - newTileLayerZKeys[tileLayerZKey] = true; - this.tileLayerZs_[tileLayerZKey] = tileLayerZ; - } - tilesToDraw = tilesToDrawByZ[tileLayerZKey]; - for (tileCoordKey in tilesToDraw) { - tileLayerZ.addTile(tilesToDraw[tileCoordKey], tileGutter); - } - tileLayerZ.finalizeAddTiles(); - } - - /** @type {Array.} */ - var tileLayerZKeys = Object.keys(this.tileLayerZs_).map(Number); - tileLayerZKeys.sort(ol.array.numberSafeCompareFunction); - - var i, ii, j, origin, resolution; - var transform = ol.transform.create(); - for (i = 0, ii = tileLayerZKeys.length; i < ii; ++i) { - tileLayerZKey = tileLayerZKeys[i]; - tileLayerZ = this.tileLayerZs_[tileLayerZKey]; - if (!(tileLayerZKey in tilesToDrawByZ)) { - ol.dom.removeNode(tileLayerZ.target); - delete this.tileLayerZs_[tileLayerZKey]; - continue; - } - resolution = tileLayerZ.getResolution(); - origin = tileLayerZ.getOrigin(); - - ol.transform.compose(transform, - frameState.size[0] / 2, frameState.size[1] / 2, - resolution / viewState.resolution, resolution / viewState.resolution, - viewState.rotation, - (origin[0] - center[0]) / resolution, (center[1] - origin[1]) / resolution); - - tileLayerZ.setTransform(transform); - if (tileLayerZKey in newTileLayerZKeys) { - for (j = tileLayerZKey - 1; j >= 0; --j) { - if (j in this.tileLayerZs_) { - if (this.tileLayerZs_[j].target.parentNode) { - this.tileLayerZs_[j].target.parentNode.insertBefore(tileLayerZ.target, this.tileLayerZs_[j].target.nextSibling); - } - break; - } - } - if (j < 0) { - this.target.insertBefore(tileLayerZ.target, this.target.childNodes[0] || null); - } - } else { - if (!frameState.viewHints[ol.View.Hint.ANIMATING] && - !frameState.viewHints[ol.View.Hint.INTERACTING]) { - tileLayerZ.removeTilesOutsideExtent(extent, tmpTileRange); - } - } - } - - if (layerState.opacity != this.renderedOpacity_) { - this.target.style.opacity = layerState.opacity; - this.renderedOpacity_ = layerState.opacity; - } - - if (layerState.visible && !this.renderedVisible_) { - this.target.style.display = ''; - this.renderedVisible_ = true; - } - - this.updateUsedTiles(frameState.usedTiles, tileSource, z, tileRange); - this.manageTilePyramid(frameState, tileSource, tileGrid, pixelRatio, - projection, extent, z, tileLayer.getPreload()); - this.scheduleExpireCache(frameState, tileSource); - this.updateLogos(frameState, tileSource); - - return true; -}; - - -/** - * @constructor - * @private - * @param {ol.tilegrid.TileGrid} tileGrid Tile grid. - * @param {ol.TileCoord} tileCoordOrigin Tile coord origin. - */ -ol.renderer.dom.TileLayerZ_ = function(tileGrid, tileCoordOrigin) { - - /** - * @type {!Element} - */ - this.target = document.createElement('DIV'); - this.target.style.position = 'absolute'; - this.target.style.width = '100%'; - this.target.style.height = '100%'; - - /** - * @private - * @type {ol.tilegrid.TileGrid} - */ - this.tileGrid_ = tileGrid; - - /** - * @private - * @type {ol.TileCoord} - */ - this.tileCoordOrigin_ = tileCoordOrigin; - - /** - * @private - * @type {ol.Coordinate} - */ - this.origin_ = - ol.extent.getTopLeft(tileGrid.getTileCoordExtent(tileCoordOrigin)); - - /** - * @private - * @type {number} - */ - this.resolution_ = tileGrid.getResolution(tileCoordOrigin[0]); - - /** - * @private - * @type {Object.} - */ - this.tiles_ = {}; - - /** - * @private - * @type {DocumentFragment} - */ - this.documentFragment_ = null; - - /** - * @private - * @type {ol.Transform} - */ - this.transform_ = ol.transform.create(); - - /** - * @private - * @type {ol.Size} - */ - this.tmpSize_ = [0, 0]; - -}; - - -/** - * @param {ol.Tile} tile Tile. - * @param {number} tileGutter Tile gutter. - */ -ol.renderer.dom.TileLayerZ_.prototype.addTile = function(tile, tileGutter) { - var tileCoord = tile.tileCoord; - var tileCoordZ = tileCoord[0]; - var tileCoordX = tileCoord[1]; - var tileCoordY = tileCoord[2]; - ol.DEBUG && console.assert(tileCoordZ == this.tileCoordOrigin_[0], - 'tileCoordZ matches z of tileCoordOrigin'); - var tileCoordKey = tileCoord.toString(); - if (tileCoordKey in this.tiles_) { - return; - } - var tileSize = ol.size.toSize( - this.tileGrid_.getTileSize(tileCoordZ), this.tmpSize_); - var image = tile.getImage(this); - var imageStyle = image.style; - // Bootstrap sets the style max-width: 100% for all images, which - // prevents the tile from being displayed in FireFox. Workaround - // by overriding the max-width style. - imageStyle.maxWidth = 'none'; - var tileElement; - var tileElementStyle; - if (tileGutter > 0) { - tileElement = document.createElement('DIV'); - tileElementStyle = tileElement.style; - tileElementStyle.overflow = 'hidden'; - tileElementStyle.width = tileSize[0] + 'px'; - tileElementStyle.height = tileSize[1] + 'px'; - imageStyle.position = 'absolute'; - imageStyle.left = -tileGutter + 'px'; - imageStyle.top = -tileGutter + 'px'; - imageStyle.width = (tileSize[0] + 2 * tileGutter) + 'px'; - imageStyle.height = (tileSize[1] + 2 * tileGutter) + 'px'; - tileElement.appendChild(image); - } else { - imageStyle.width = tileSize[0] + 'px'; - imageStyle.height = tileSize[1] + 'px'; - tileElement = image; - tileElementStyle = imageStyle; - } - tileElementStyle.position = 'absolute'; - tileElementStyle.left = - ((tileCoordX - this.tileCoordOrigin_[1]) * tileSize[0]) + 'px'; - tileElementStyle.top = - ((this.tileCoordOrigin_[2] - tileCoordY) * tileSize[1]) + 'px'; - if (!this.documentFragment_) { - this.documentFragment_ = document.createDocumentFragment(); - } - this.documentFragment_.appendChild(tileElement); - this.tiles_[tileCoordKey] = tile; -}; - - -/** - * FIXME empty description for jsdoc - */ -ol.renderer.dom.TileLayerZ_.prototype.finalizeAddTiles = function() { - if (this.documentFragment_) { - this.target.appendChild(this.documentFragment_); - this.documentFragment_ = null; - } -}; - - -/** - * @return {ol.Coordinate} Origin. - */ -ol.renderer.dom.TileLayerZ_.prototype.getOrigin = function() { - return this.origin_; -}; - - -/** - * @return {number} Resolution. - */ -ol.renderer.dom.TileLayerZ_.prototype.getResolution = function() { - return this.resolution_; -}; - - -/** - * @param {ol.Extent} extent Extent. - * @param {ol.TileRange=} opt_tileRange Temporary ol.TileRange object. - */ -ol.renderer.dom.TileLayerZ_.prototype.removeTilesOutsideExtent = function(extent, opt_tileRange) { - var tileRange = this.tileGrid_.getTileRangeForExtentAndZ( - extent, this.tileCoordOrigin_[0], opt_tileRange); - /** @type {Array.} */ - var tilesToRemove = []; - var tile, tileCoordKey; - for (tileCoordKey in this.tiles_) { - tile = this.tiles_[tileCoordKey]; - if (!tileRange.contains(tile.tileCoord)) { - tilesToRemove.push(tile); - } - } - var i, ii; - for (i = 0, ii = tilesToRemove.length; i < ii; ++i) { - tile = tilesToRemove[i]; - tileCoordKey = tile.tileCoord.toString(); - ol.dom.removeNode(tile.getImage(this)); - delete this.tiles_[tileCoordKey]; - } -}; - - -/** - * @param {ol.Transform} transform Transform. - */ -ol.renderer.dom.TileLayerZ_.prototype.setTransform = function(transform) { - if (!ol.array.equals(transform, this.transform_)) { - ol.dom.transformElement2D(this.target, transform, 6); - ol.transform.setFromArray(this.transform_, transform); - } -}; diff --git a/src/ol/renderer/dom/vectorlayer.js b/src/ol/renderer/dom/vectorlayer.js deleted file mode 100644 index ef98e95b2c..0000000000 --- a/src/ol/renderer/dom/vectorlayer.js +++ /dev/null @@ -1,340 +0,0 @@ -goog.provide('ol.renderer.dom.VectorLayer'); - -goog.require('ol'); -goog.require('ol.View'); -goog.require('ol.dom'); -goog.require('ol.extent'); -goog.require('ol.render.Event'); -goog.require('ol.render.EventType'); -goog.require('ol.render.canvas.Immediate'); -goog.require('ol.render.canvas.ReplayGroup'); -goog.require('ol.renderer.dom.Layer'); -goog.require('ol.renderer.vector'); -goog.require('ol.transform'); - - -/** - * @constructor - * @extends {ol.renderer.dom.Layer} - * @param {ol.layer.Vector} vectorLayer Vector layer. - */ -ol.renderer.dom.VectorLayer = function(vectorLayer) { - - /** - * @private - * @type {CanvasRenderingContext2D} - */ - this.context_ = ol.dom.createCanvasContext2D(); - - var target = this.context_.canvas; - // Bootstrap sets the style max-width: 100% for all images, which breaks - // prevents the image from being displayed in FireFox. Workaround by - // overriding the max-width style. - target.style.maxWidth = 'none'; - target.style.position = 'absolute'; - - ol.renderer.dom.Layer.call(this, vectorLayer, target); - - /** - * @private - * @type {boolean} - */ - this.dirty_ = false; - - /** - * @private - * @type {number} - */ - this.renderedRevision_ = -1; - - /** - * @private - * @type {number} - */ - this.renderedResolution_ = NaN; - - /** - * @private - * @type {ol.Extent} - */ - this.renderedExtent_ = ol.extent.createEmpty(); - - /** - * @private - * @type {function(ol.Feature, ol.Feature): number|null} - */ - this.renderedRenderOrder_ = null; - - /** - * @private - * @type {ol.render.canvas.ReplayGroup} - */ - this.replayGroup_ = null; - - /** - * @private - * @type {ol.Transform} - */ - this.transform_ = ol.transform.create(); - - /** - * @private - * @type {ol.Transform} - */ - this.elementTransform_ = ol.transform.create(); - -}; -ol.inherits(ol.renderer.dom.VectorLayer, ol.renderer.dom.Layer); - - -/** - * @inheritDoc - */ -ol.renderer.dom.VectorLayer.prototype.clearFrame = function() { - // Clear the canvas - var canvas = this.context_.canvas; - canvas.width = canvas.width; - this.renderedRevision_ = 0; -}; - - -/** - * @inheritDoc - */ -ol.renderer.dom.VectorLayer.prototype.composeFrame = function(frameState, layerState) { - var viewState = frameState.viewState; - var viewCenter = viewState.center; - var viewRotation = viewState.rotation; - var viewResolution = viewState.resolution; - var pixelRatio = frameState.pixelRatio; - var viewWidth = frameState.size[0]; - var viewHeight = frameState.size[1]; - var imageWidth = viewWidth * pixelRatio; - var imageHeight = viewHeight * pixelRatio; - - var transform = ol.transform.compose(this.transform_, - pixelRatio * viewWidth / 2, pixelRatio * viewHeight / 2, - pixelRatio / viewResolution, -pixelRatio / viewResolution, - -viewRotation, - -viewCenter[0], -viewCenter[1]); - - var context = this.context_; - - // Clear the canvas and set the correct size - context.canvas.width = imageWidth; - context.canvas.height = imageHeight; - - var elementTransform = ol.transform.reset(this.elementTransform_); - ol.transform.scale(elementTransform, 1 / pixelRatio, 1 / pixelRatio); - ol.transform.translate(elementTransform, - -(imageWidth - viewWidth) / 2 * pixelRatio, - -(imageHeight - viewHeight) / 2 * pixelRatio); - ol.dom.transformElement2D(context.canvas, elementTransform, 6); - - this.dispatchEvent_(ol.render.EventType.PRECOMPOSE, frameState, transform); - - var replayGroup = this.replayGroup_; - - if (replayGroup && !replayGroup.isEmpty()) { - - context.globalAlpha = layerState.opacity; - replayGroup.replay(context, pixelRatio, transform, viewRotation, - layerState.managed ? frameState.skippedFeatureUids : {}); - - this.dispatchEvent_(ol.render.EventType.RENDER, frameState, transform); - } - - this.dispatchEvent_(ol.render.EventType.POSTCOMPOSE, frameState, transform); -}; - - -/** - * @param {ol.render.EventType} type Event type. - * @param {olx.FrameState} frameState Frame state. - * @param {ol.Transform} transform Transform. - * @private - */ -ol.renderer.dom.VectorLayer.prototype.dispatchEvent_ = function(type, frameState, transform) { - var context = this.context_; - var layer = this.getLayer(); - if (layer.hasListener(type)) { - var render = new ol.render.canvas.Immediate( - context, frameState.pixelRatio, frameState.extent, transform, - frameState.viewState.rotation); - var event = new ol.render.Event(type, render, frameState, context, null); - layer.dispatchEvent(event); - } -}; - - -/** - * @inheritDoc - */ -ol.renderer.dom.VectorLayer.prototype.forEachFeatureAtCoordinate = function(coordinate, frameState, callback, thisArg) { - if (!this.replayGroup_) { - return undefined; - } else { - var resolution = frameState.viewState.resolution; - var rotation = frameState.viewState.rotation; - var layer = this.getLayer(); - /** @type {Object.} */ - var features = {}; - return this.replayGroup_.forEachFeatureAtCoordinate(coordinate, resolution, - rotation, {}, - /** - * @param {ol.Feature|ol.render.Feature} feature Feature. - * @return {?} Callback result. - */ - function(feature) { - var key = ol.getUid(feature).toString(); - if (!(key in features)) { - features[key] = true; - return callback.call(thisArg, feature, layer); - } - }); - } -}; - - -/** - * Handle changes in image style state. - * @param {ol.events.Event} event Image style change event. - * @private - */ -ol.renderer.dom.VectorLayer.prototype.handleStyleImageChange_ = function(event) { - this.renderIfReadyAndVisible(); -}; - - -/** - * @inheritDoc - */ -ol.renderer.dom.VectorLayer.prototype.prepareFrame = function(frameState, layerState) { - - var vectorLayer = /** @type {ol.layer.Vector} */ (this.getLayer()); - var vectorSource = vectorLayer.getSource(); - - this.updateAttributions( - frameState.attributions, vectorSource.getAttributions()); - this.updateLogos(frameState, vectorSource); - - var animating = frameState.viewHints[ol.View.Hint.ANIMATING]; - var interacting = frameState.viewHints[ol.View.Hint.INTERACTING]; - var updateWhileAnimating = vectorLayer.getUpdateWhileAnimating(); - var updateWhileInteracting = vectorLayer.getUpdateWhileInteracting(); - - if (!this.dirty_ && (!updateWhileAnimating && animating) || - (!updateWhileInteracting && interacting)) { - return true; - } - - var frameStateExtent = frameState.extent; - var viewState = frameState.viewState; - var projection = viewState.projection; - var resolution = viewState.resolution; - var pixelRatio = frameState.pixelRatio; - var vectorLayerRevision = vectorLayer.getRevision(); - var vectorLayerRenderBuffer = vectorLayer.getRenderBuffer(); - var vectorLayerRenderOrder = vectorLayer.getRenderOrder(); - - if (vectorLayerRenderOrder === undefined) { - vectorLayerRenderOrder = ol.renderer.vector.defaultOrder; - } - - var extent = ol.extent.buffer(frameStateExtent, - vectorLayerRenderBuffer * resolution); - - if (!this.dirty_ && - this.renderedResolution_ == resolution && - this.renderedRevision_ == vectorLayerRevision && - this.renderedRenderOrder_ == vectorLayerRenderOrder && - ol.extent.containsExtent(this.renderedExtent_, extent)) { - return true; - } - - this.replayGroup_ = null; - - this.dirty_ = false; - - var replayGroup = - new ol.render.canvas.ReplayGroup( - ol.renderer.vector.getTolerance(resolution, pixelRatio), extent, - resolution, vectorSource.getOverlaps(), vectorLayer.getRenderBuffer()); - vectorSource.loadFeatures(extent, resolution, projection); - /** - * @param {ol.Feature} feature Feature. - * @this {ol.renderer.dom.VectorLayer} - */ - var renderFeature = function(feature) { - var styles; - var styleFunction = feature.getStyleFunction(); - if (styleFunction) { - styles = styleFunction.call(feature, resolution); - } else { - styleFunction = vectorLayer.getStyleFunction(); - if (styleFunction) { - styles = styleFunction(feature, resolution); - } - } - if (styles) { - var dirty = this.renderFeature( - feature, resolution, pixelRatio, styles, replayGroup); - this.dirty_ = this.dirty_ || dirty; - } - }; - if (vectorLayerRenderOrder) { - /** @type {Array.} */ - var features = []; - vectorSource.forEachFeatureInExtent(extent, - /** - * @param {ol.Feature} feature Feature. - */ - function(feature) { - features.push(feature); - }, this); - features.sort(vectorLayerRenderOrder); - features.forEach(renderFeature, this); - } else { - vectorSource.forEachFeatureInExtent(extent, renderFeature, this); - } - replayGroup.finish(); - - this.renderedResolution_ = resolution; - this.renderedRevision_ = vectorLayerRevision; - this.renderedRenderOrder_ = vectorLayerRenderOrder; - this.renderedExtent_ = extent; - this.replayGroup_ = replayGroup; - - return true; -}; - - -/** - * @param {ol.Feature} feature Feature. - * @param {number} resolution Resolution. - * @param {number} pixelRatio Pixel ratio. - * @param {(ol.style.Style|Array.)} styles The style or array of - * styles. - * @param {ol.render.canvas.ReplayGroup} replayGroup Replay group. - * @return {boolean} `true` if an image is loading. - */ -ol.renderer.dom.VectorLayer.prototype.renderFeature = function(feature, resolution, pixelRatio, styles, replayGroup) { - if (!styles) { - return false; - } - var loading = false; - if (Array.isArray(styles)) { - for (var i = 0, ii = styles.length; i < ii; ++i) { - loading = ol.renderer.vector.renderFeature( - replayGroup, feature, styles[i], - ol.renderer.vector.getSquaredTolerance(resolution, pixelRatio), - this.handleStyleImageChange_, this) || loading; - } - } else { - loading = ol.renderer.vector.renderFeature( - replayGroup, feature, styles, - ol.renderer.vector.getSquaredTolerance(resolution, pixelRatio), - this.handleStyleImageChange_, this) || loading; - } - return loading; -}; diff --git a/src/ol/renderer/map.js b/src/ol/renderer/map.js index 9563c983c6..2bce7f923c 100644 --- a/src/ol/renderer/map.js +++ b/src/ol/renderer/map.js @@ -13,12 +13,11 @@ goog.require('ol.transform'); /** - * Available renderers: `'canvas'`, `'dom'` or `'webgl'`. + * Available renderers: `'canvas'` or `'webgl'`. * @enum {string} */ ol.RendererType = { CANVAS: 'canvas', - DOM: 'dom', WEBGL: 'webgl' };