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

Allow source to be set after layer construction

Browse Source
This commit is contained in:
Tim Schaub
2014-10-23 09:24:03 -06:00
parent c06774acb5
commit d712b2ba54
12 changed files with 157 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
examples/lazy-source.html Normal file
View File

@@ -0,0 +1,73 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Lazy Source</title>
<style>
button.code {
font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
font-size: 12px;
padding: 5px;
margin: 0 5px;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">Lazy source example</h4>
<p id="shortdesc">Example of setting a layer source after construction.</p>
<div id="docs">
<p>
Typically, the source for a layer is provided to the layer constructor.
If you need to set a layer source after construction, this can be
done with the <code>layer.setSource()</code> method.
</p>
<p>
The layer in the map above is constructed with no source. Use the
links below to set/unset the layer source. A layer is not rendered
until its source is set.
</p>
<p>
<button id="set-source" class="code">layer.setSource(source)</button>
<button id="unset-source" class="code">layer.setSource(null)</button>
</p>
<p>See the <a href="lazy-source.js" target="_blank">lazy-source.js source</a> for details on how this is done.</p>
</div>
<div id="tags">source</div>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=lazy-source" type="text/javascript"></script>
</body>
</html>

26
examples/lazy-source.js Normal file
View File

@@ -0,0 +1,26 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.layer.Tile');
goog.require('ol.source.MapQuest');
var source = new ol.source.MapQuest({layer: 'sat'});
var layer = new ol.layer.Tile();
var map = new ol.Map({
layers: [layer],
renderer: exampleNS.getRendererFromQueryString(),
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
document.getElementById('set-source').onclick = function() {
layer.setSource(source);
};
document.getElementById('unset-source').onclick = function() {
layer.setSource(null);
};

16
externs/olx.js
View File

@@ -2508,7 +2508,7 @@ olx.layer.BaseOptions.prototype.maxResolution;
* hue: (number|undefined), * hue: (number|undefined),
* opacity: (number|undefined), * opacity: (number|undefined),
* saturation: (number|undefined), * saturation: (number|undefined),
* source: ol.source.Source, * source: (ol.source.Source|undefined),
* visible: (boolean|undefined), * visible: (boolean|undefined),
* extent: (ol.Extent|undefined), * extent: (ol.Extent|undefined),
* minResolution: (number|undefined), * minResolution: (number|undefined),
@@ -2559,8 +2559,10 @@ olx.layer.LayerOptions.prototype.saturation;
/** /**
* Source for this layer. * Source for this layer. If not provided to the constructor, the source can
* @type {ol.source.Source} * be set by calling {@link ol.layer.Layer#setSource layer.setSource(source)}
* after construction.
* @type {ol.source.Source|undefined}
* @api stable * @api stable
*/ */
olx.layer.LayerOptions.prototype.source; olx.layer.LayerOptions.prototype.source;
@@ -2710,7 +2712,7 @@ olx.layer.GroupOptions.prototype.layers;
* maxResolution: (number|undefined), * maxResolution: (number|undefined),
* opacity: (number|undefined), * opacity: (number|undefined),
* saturation: (number|undefined), * saturation: (number|undefined),
* source: ol.source.Vector, * source: (ol.source.Vector|undefined),
* visible: (boolean|undefined)}} * visible: (boolean|undefined)}}
* @api * @api
*/ */
@@ -2847,7 +2849,7 @@ olx.layer.HeatmapOptions.prototype.visible;
* hue: (number|undefined), * hue: (number|undefined),
* opacity: (number|undefined), * opacity: (number|undefined),
* saturation: (number|undefined), * saturation: (number|undefined),
* source: ol.source.Image, * source: (ol.source.Image|undefined),
* visible: (boolean|undefined), * visible: (boolean|undefined),
* extent: (ol.Extent|undefined), * extent: (ol.Extent|undefined),
* minResolution: (number|undefined), * minResolution: (number|undefined),
@@ -2945,7 +2947,7 @@ olx.layer.ImageOptions.prototype.maxResolution;
* opacity: (number|undefined), * opacity: (number|undefined),
* preload: (number|undefined), * preload: (number|undefined),
* saturation: (number|undefined), * saturation: (number|undefined),
* source: ol.source.Tile, * source: (ol.source.Tile|undefined),
* visible: (boolean|undefined), * visible: (boolean|undefined),
* extent: (ol.Extent|undefined), * extent: (ol.Extent|undefined),
* minResolution: (number|undefined), * minResolution: (number|undefined),
@@ -3063,7 +3065,7 @@ olx.layer.TileOptions.prototype.useInterimTilesOnError;
* maxResolution: (number|undefined), * maxResolution: (number|undefined),
* opacity: (number|undefined), * opacity: (number|undefined),
* saturation: (number|undefined), * saturation: (number|undefined),
* source: ol.source.Vector, * source: (ol.source.Vector|undefined),
* style: (ol.style.Style|Array.<ol.style.Style>|ol.style.StyleFunction|undefined), * style: (ol.style.Style|Array.<ol.style.Style>|ol.style.StyleFunction|undefined),
* visible: (boolean|undefined)}} * visible: (boolean|undefined)}}
* @api * @api

3
src/ol/control/attributioncontrol.js
View File

@@ -169,6 +169,9 @@ ol.control.Attribution.prototype.getSourceAttributions = function(frameState) {
var hiddenAttributions = {}; var hiddenAttributions = {};
for (i = 0, ii = layerStatesArray.length; i < ii; i++) { for (i = 0, ii = layerStatesArray.length; i < ii; i++) {
source = layerStatesArray[i].layer.getSource(); source = layerStatesArray[i].layer.getSource();
if (goog.isNull(source)) {
continue;
}
sourceKey = goog.getUid(source).toString(); sourceKey = goog.getUid(source).toString();
sourceAttributions = source.getAttributions(); sourceAttributions = source.getAttributions();
if (goog.isNull(sourceAttributions)) { if (goog.isNull(sourceAttributions)) {

5
src/ol/layer/imagelayer.js
View File

@@ -15,10 +15,11 @@ goog.require('ol.layer.Layer');
* @constructor * @constructor
* @extends {ol.layer.Layer} * @extends {ol.layer.Layer}
* @fires ol.render.Event * @fires ol.render.Event
* @param {olx.layer.ImageOptions} options Layer options. * @param {olx.layer.ImageOptions=} opt_options Layer options.
* @api stable * @api stable
*/ */
ol.layer.Image = function(options) { ol.layer.Image = function(opt_options) {
var options = goog.isDef(opt_options) ? opt_options : {};
goog.base(this, /** @type {olx.layer.LayerOptions} */ (options)); goog.base(this, /** @type {olx.layer.LayerOptions} */ (options));
}; };
goog.inherits(ol.layer.Image, ol.layer.Layer); goog.inherits(ol.layer.Image, ol.layer.Layer);

15
src/ol/layer/layer.js
View File

@@ -7,6 +7,7 @@ goog.require('goog.object');
goog.require('ol.Object'); goog.require('ol.Object');
goog.require('ol.layer.Base'); goog.require('ol.layer.Base');
goog.require('ol.layer.LayerProperty'); goog.require('ol.layer.LayerProperty');
goog.require('ol.source.State');
@@ -42,7 +43,8 @@ ol.layer.Layer = function(options) {
ol.Object.getChangeEventType(ol.layer.LayerProperty.SOURCE), ol.Object.getChangeEventType(ol.layer.LayerProperty.SOURCE),
this.handleSourcePropertyChange_, false, this); this.handleSourcePropertyChange_, false, this);
this.setSource(options.source); var source = goog.isDef(options.source) ? options.source : null;
this.setSource(source);
}; };
goog.inherits(ol.layer.Layer, ol.layer.Base); goog.inherits(ol.layer.Layer, ol.layer.Base);
@@ -83,7 +85,7 @@ ol.layer.Layer.prototype.getLayerStatesArray = function(opt_states) {
/** /**
* Get the layer source. * Get the layer source.
* @return {ol.source.Source} Source. * @return {ol.source.Source} The layer source (or `null` if not yet set).
* @observable * @observable
* @api stable * @api stable
*/ */
@@ -102,7 +104,14 @@ goog.exportProperty(
* @inheritDoc * @inheritDoc
*/ */
ol.layer.Layer.prototype.getSourceState = function() { ol.layer.Layer.prototype.getSourceState = function() {
return this.getSource().getState(); var source = this.getSource();
var state;
if (!goog.isNull(source)) {
state = source.getState();
} else {
state = ol.source.State.UNDEFINED;
}
return state;
}; };

5
src/ol/layer/tilelayer.js
View File

@@ -24,10 +24,11 @@ ol.layer.TileProperty = {
* @constructor * @constructor
* @extends {ol.layer.Layer} * @extends {ol.layer.Layer}
* @fires ol.render.Event * @fires ol.render.Event
* @param {olx.layer.TileOptions} options Tile layer options. * @param {olx.layer.TileOptions=} opt_options Tile layer options.
* @api stable * @api stable
*/ */
ol.layer.Tile = function(options) { ol.layer.Tile = function(opt_options) {
var options = goog.isDef(opt_options) ? opt_options : {};
goog.base(this, /** @type {olx.layer.LayerOptions} */ (options)); goog.base(this, /** @type {olx.layer.LayerOptions} */ (options));
}; };
goog.inherits(ol.layer.Tile, ol.layer.Layer); goog.inherits(ol.layer.Tile, ol.layer.Layer);

9
src/ol/renderer/dom/domimagelayerrenderer.js
View File

@@ -69,6 +69,15 @@ ol.renderer.dom.ImageLayer.prototype.forEachFeatureAtPixel =
}; };
/**
* @inheritDoc
*/
ol.renderer.dom.ImageLayer.prototype.clearFrame = function() {
goog.dom.removeChildren(this.target);
this.image_ = null;
};
/** /**
* @inheritDoc * @inheritDoc
*/ */

6
src/ol/renderer/dom/domlayerrenderer.js
View File

@@ -27,6 +27,12 @@ ol.renderer.dom.Layer = function(mapRenderer, layer, target) {
goog.inherits(ol.renderer.dom.Layer, ol.renderer.Layer); goog.inherits(ol.renderer.dom.Layer, ol.renderer.Layer);
/**
* Clear rendered elements.
*/
ol.renderer.dom.Layer.prototype.clearFrame = goog.nullFunction;
/** /**
* @param {olx.FrameState} frameState Frame state. * @param {olx.FrameState} frameState Frame state.
* @param {ol.layer.LayerState} layerState Layer state. * @param {ol.layer.LayerState} layerState Layer state.

2
src/ol/renderer/dom/dommaprenderer.js
View File

@@ -244,6 +244,8 @@ ol.renderer.dom.Map.prototype.renderFrame = function(frameState) {
if (layerRenderer.prepareFrame(frameState, layerState)) { if (layerRenderer.prepareFrame(frameState, layerState)) {
layerRenderer.composeFrame(frameState, layerState); layerRenderer.composeFrame(frameState, layerState);
} }
} else {
layerRenderer.clearFrame();
} }
} }

9
src/ol/renderer/dom/domtilelayerrenderer.js
View File

@@ -74,6 +74,15 @@ ol.renderer.dom.TileLayer = function(mapRenderer, tileLayer) {
goog.inherits(ol.renderer.dom.TileLayer, ol.renderer.dom.Layer); goog.inherits(ol.renderer.dom.TileLayer, ol.renderer.dom.Layer);
/**
* @inheritDoc
*/
ol.renderer.dom.TileLayer.prototype.clearFrame = function() {
goog.dom.removeChildren(this.target);
this.renderedRevision_ = 0;
};
/** /**
* @inheritDoc * @inheritDoc
*/ */

3
src/ol/source/source.js
View File

@@ -9,11 +9,12 @@ goog.require('ol.proj');
/** /**
* State of the source, one of 'loading', 'ready' or 'error'. * State of the source, one of 'undefined', 'loading', 'ready' or 'error'.
* @enum {string} * @enum {string}
* @api * @api
*/ */
ol.source.State = { ol.source.State = {
UNDEFINED: 'undefined',
LOADING: 'loading', LOADING: 'loading',
READY: 'ready', READY: 'ready',
ERROR: 'error' ERROR: 'error'