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

Merge pull request #2856 from tschaub/set-source

Browse Source 
Allow layer source to be set.
This commit is contained in:
Tim Schaub
2014-10-26 15:04:13 -06:00
parent aa6a5d52dd d712b2ba54
commit 2d415b6ce8
14 changed files with 309 additions and 21 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),
* opacity: (number|undefined),
* saturation: (number|undefined),
* source: ol.source.Source,
* source: (ol.source.Source|undefined),
* visible: (boolean|undefined),
* extent: (ol.Extent|undefined),
* minResolution: (number|undefined),
@@ -2559,8 +2559,10 @@ olx.layer.LayerOptions.prototype.saturation;
/**
* Source for this layer.
* @type {ol.source.Source}
* Source for this layer. If not provided to the constructor, the source can
* be set by calling {@link ol.layer.Layer#setSource layer.setSource(source)}
* after construction.
* @type {ol.source.Source|undefined}
* @api stable
*/
olx.layer.LayerOptions.prototype.source;
@@ -2710,7 +2712,7 @@ olx.layer.GroupOptions.prototype.layers;
* maxResolution: (number|undefined),
* opacity: (number|undefined),
* saturation: (number|undefined),
* source: ol.source.Vector,
* source: (ol.source.Vector|undefined),
* visible: (boolean|undefined)}}
* @api
*/
@@ -2847,7 +2849,7 @@ olx.layer.HeatmapOptions.prototype.visible;
* hue: (number|undefined),
* opacity: (number|undefined),
* saturation: (number|undefined),
* source: ol.source.Image,
* source: (ol.source.Image|undefined),
* visible: (boolean|undefined),
* extent: (ol.Extent|undefined),
* minResolution: (number|undefined),
@@ -2945,7 +2947,7 @@ olx.layer.ImageOptions.prototype.maxResolution;
* opacity: (number|undefined),
* preload: (number|undefined),
* saturation: (number|undefined),
* source: ol.source.Tile,
* source: (ol.source.Tile|undefined),
* visible: (boolean|undefined),
* extent: (ol.Extent|undefined),
* minResolution: (number|undefined),
@@ -3063,7 +3065,7 @@ olx.layer.TileOptions.prototype.useInterimTilesOnError;
* maxResolution: (number|undefined),
* opacity: (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),
* visible: (boolean|undefined)}}
* @api

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

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

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

@@ -15,10 +15,11 @@ goog.require('ol.layer.Layer');
* @constructor
* @extends {ol.layer.Layer}
* @fires ol.render.Event
* @param {olx.layer.ImageOptions} options Layer options.
* @param {olx.layer.ImageOptions=} opt_options Layer options.
* @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.inherits(ol.layer.Image, ol.layer.Layer);

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

@@ -4,8 +4,10 @@ goog.require('goog.asserts');
goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('goog.object');
goog.require('ol.Object');
goog.require('ol.layer.Base');
goog.require('ol.source.Source');
goog.require('ol.layer.LayerProperty');
goog.require('ol.source.State');
@@ -33,13 +35,16 @@ ol.layer.Layer = function(options) {
/**
* @private
* @type {ol.source.Source}
* @type {goog.events.Key}
*/
this.source_ = options.source;
this.sourceChangeKey_ = null;
goog.events.listen(this.source_, goog.events.EventType.CHANGE,
this.handleSourceChange_, false, this);
goog.events.listen(this,
ol.Object.getChangeEventType(ol.layer.LayerProperty.SOURCE),
this.handleSourcePropertyChange_, false, this);
var source = goog.isDef(options.source) ? options.source : null;
this.setSource(source);
};
goog.inherits(ol.layer.Layer, ol.layer.Base);
@@ -79,19 +84,34 @@ ol.layer.Layer.prototype.getLayerStatesArray = function(opt_states) {
/**
* @return {ol.source.Source} Source.
* Get the layer source.
* @return {ol.source.Source} The layer source (or `null` if not yet set).
* @observable
* @api stable
*/
ol.layer.Layer.prototype.getSource = function() {
return this.source_;
var source = this.get(ol.layer.LayerProperty.SOURCE);
return goog.isDef(source) ?
/** @type {ol.source.Source} */ (source) : null;
};
goog.exportProperty(
ol.layer.Layer.prototype,
'getSource',
ol.layer.Layer.prototype.getSource);
/**
* @inheritDoc
*/
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;
};
@@ -101,3 +121,35 @@ ol.layer.Layer.prototype.getSourceState = function() {
ol.layer.Layer.prototype.handleSourceChange_ = function() {
this.changed();
};
/**
* @private
*/
ol.layer.Layer.prototype.handleSourcePropertyChange_ = function() {
if (!goog.isNull(this.sourceChangeKey_)) {
goog.events.unlistenByKey(this.sourceChangeKey_);
this.sourceChangeKey_ = null;
}
var source = this.getSource();
if (!goog.isNull(source)) {
this.sourceChangeKey_ = goog.events.listen(source,
goog.events.EventType.CHANGE, this.handleSourceChange_, false, this);
}
this.changed();
};
/**
* Set the layer source.
* @param {ol.source.Source} source The layer source.
* @observable
* @api stable
*/
ol.layer.Layer.prototype.setSource = function(source) {
this.set(ol.layer.LayerProperty.SOURCE, source);
};
goog.exportProperty(
ol.layer.Layer.prototype,
'setSource',
ol.layer.Layer.prototype.setSource);

3
src/ol/layer/layerbase.js
View File

@@ -21,7 +21,8 @@ ol.layer.LayerProperty = {
VISIBLE: 'visible',
EXTENT: 'extent',
MAX_RESOLUTION: 'maxResolution',
MIN_RESOLUTION: 'minResolution'
MIN_RESOLUTION: 'minResolution',
SOURCE: 'source'
};

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

@@ -24,10 +24,11 @@ ol.layer.TileProperty = {
* @constructor
* @extends {ol.layer.Layer}
* @fires ol.render.Event
* @param {olx.layer.TileOptions} options Tile layer options.
* @param {olx.layer.TileOptions=} opt_options Tile layer options.
* @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.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
*/

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);
/**
* Clear rendered elements.
*/
ol.renderer.dom.Layer.prototype.clearFrame = goog.nullFunction;
/**
* @param {olx.FrameState} frameState Frame 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)) {
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);
/**
* @inheritDoc
*/
ol.renderer.dom.TileLayer.prototype.clearFrame = function() {
goog.dom.removeChildren(this.target);
this.renderedRevision_ = 0;
};
/**
* @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}
* @api
*/
ol.source.State = {
UNDEFINED: 'undefined',
LOADING: 'loading',
READY: 'ready',
ERROR: 'error'

102
test/spec/ol/layer/layer.test.js
View File

@@ -243,6 +243,108 @@ describe('ol.layer.Layer', function() {
});
describe('#getSource', function() {
it('gets the layer source', function() {
var source = new ol.source.Source({projection: ol.proj.get('EPSG:4326')});
var layer = new ol.layer.Layer({source: source});
expect(layer.getSource()).to.be(source);
});
});
describe('#set("source", source)', function() {
var projection = ol.proj.get('EPSG:4326');
it('sets the layer source', function() {
var layer = new ol.layer.Layer({
source: new ol.source.Source({projection: projection})
});
var source = new ol.source.Source({projection: projection});
layer.set('source', source);
expect(layer.getSource()).to.be(source);
});
it('calls changed', function() {
var layer = new ol.layer.Layer({
source: new ol.source.Source({projection: projection})
});
sinon.spy(layer, 'changed');
var source = new ol.source.Source({projection: projection});
layer.set('source', source);
expect(layer.changed.calledOnce).to.be(true);
});
it('sets up event listeners', function() {
sinon.spy(ol.layer.Layer.prototype, 'handleSourceChange_');
var first = new ol.source.Source({projection: projection});
var layer = new ol.layer.Layer({source: first});
first.setState(ol.source.State.READY);
expect(layer.handleSourceChange_.calledOnce).to.be(true);
var second = new ol.source.Source({projection: projection});
layer.set('source', second);
expect(layer.handleSourceChange_.calledOnce).to.be(true);
second.setState(ol.source.State.READY);
expect(layer.handleSourceChange_.callCount).to.be(2);
// remove spy
ol.layer.Layer.prototype.handleSourceChange_.restore();
});
});
describe('#setSource()', function() {
var projection = ol.proj.get('EPSG:4326');
it('sets the layer source', function() {
var layer = new ol.layer.Layer({
source: new ol.source.Source({projection: projection})
});
var source = new ol.source.Source({projection: projection});
layer.setSource(source);
expect(layer.getSource()).to.be(source);
});
it('calls changed', function() {
var layer = new ol.layer.Layer({
source: new ol.source.Source({projection: projection})
});
sinon.spy(layer, 'changed');
var source = new ol.source.Source({projection: projection});
layer.setSource(source);
expect(layer.changed.calledOnce).to.be(true);
});
it('sets up event listeners', function() {
sinon.spy(ol.layer.Layer.prototype, 'handleSourceChange_');
var first = new ol.source.Source({projection: projection});
var layer = new ol.layer.Layer({source: first});
first.setState(ol.source.State.READY);
expect(layer.handleSourceChange_.calledOnce).to.be(true);
var second = new ol.source.Source({projection: projection});
layer.setSource(second);
expect(layer.handleSourceChange_.calledOnce).to.be(true);
second.setState(ol.source.State.READY);
expect(layer.handleSourceChange_.callCount).to.be(2);
// remove spy
ol.layer.Layer.prototype.handleSourceChange_.restore();
});
});
describe('#setBrightness', function() {
var layer;