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

Merge pull request #920 from tschaub/point-examples

Browse Source 
Cast to number when creating literals from symbolizers where literal properties must be numeric.
This commit is contained in:
Tim Schaub
2013-08-26 11:57:09 -07:00
parent ecba1d78c2 9755240cac
commit e8ddecc8b1
17 changed files with 11226 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10758
examples/data/kml/2012_Earthquakes_Mag5.kml Normal file
View File

File diff suppressed because it is too large Load Diff

81
examples/kml-earthquakes.html Normal file
View File

@@ -0,0 +1,81 @@
<!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>Earthquakes in KML</title>
<style>
#map {
position: relative;
}
#info {
position: absolute;
height: 1px;
width: 1px;
z-index: 100;
}
.tooltip.in {
opacity: 1;
filter: alpha(opacity=100);
}
.tooltip.top .tooltip-arrow {
border-top-color: white;
}
.tooltip-inner {
border: 2px solid white;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./">OpenLayers 3 Examples</a>
<ul class="nav pull-right">
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"><div id="info"></div></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">Earthquakes in KML</h4>
<p id="shortdesc">Demonstrates the use of a Shape symbolizer to render earthquake locations.</p>
<div id="docs">
<p>
This example parses a KML file and renders the features as a vector layer. The layer is given a <code>ol.style.Style</code> that renders earthquake locations with a size relative to their magnitude. The style uses a <code>ol.style.Shape</code> symbolizer where the <code>size</code> comes from the <code>magnitude</code> attribute on the features.
</p>
<p>See the <a href="kml-earthquakes.js" target="_blank">kml-earthquakes.js source</a> to see how this is done.</p>
</div>
<div id="tags">KML, vector, style</div>
</div>
</div>
</div>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="loader.js?id=kml-earthquakes" type="text/javascript"></script>
<script src="../resources/social-links.js" type="text/javascript"></script>
</body>
</html>

83
examples/kml-earthquakes.js Normal file
View File

@@ -0,0 +1,83 @@
goog.require('ol.Map');
goog.require('ol.RendererHint');
goog.require('ol.View2D');
goog.require('ol.expr');
goog.require('ol.layer.TileLayer');
goog.require('ol.layer.Vector');
goog.require('ol.parser.KML');
goog.require('ol.source.Stamen');
goog.require('ol.source.Vector');
goog.require('ol.style.Fill');
goog.require('ol.style.Shape');
goog.require('ol.style.Stroke');
goog.require('ol.style.Style');
var style = new ol.style.Style({
symbolizers: [
new ol.style.Shape({
size: ol.expr.parse('5 + 20 * (magnitude - 5)'),
fill: new ol.style.Fill({
color: '#ff9900',
opacity: 0.4
}),
stroke: new ol.style.Stroke({
color: '#ffcc00',
opacity: 0.2
})
})
]
});
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
parser: new ol.parser.KML({dimension: 2}),
url: 'data/kml/2012_Earthquakes_Mag5.kml'
}),
style: style
});
var raster = new ol.layer.TileLayer({
source: new ol.source.Stamen({
layer: 'toner'
})
});
var map = new ol.Map({
layers: [raster, vector],
renderer: ol.RendererHint.CANVAS,
target: 'map',
view: new ol.View2D({
center: [0, 0],
zoom: 2
})
});
var info = $('#info');
info.tooltip({
animation: false,
trigger: 'manual'
});
map.on(['click', 'mousemove'], function(evt) {
var pixel = evt.getPixel();
info.css({
left: pixel[0] + 'px',
top: (pixel[1] - 15) + 'px'
});
map.getFeatures({
pixel: pixel,
layers: [vector],
success: function(layerFeatures) {
var feature = layerFeatures[0][0];
if (feature) {
info.tooltip('hide')
.attr('data-original-title', feature.get('name'))
.tooltip('fixTitle')
.tooltip('show');
} else {
info.tooltip('hide');
}
}
});
});

17
src/ol/expr/expression.js
View File

@@ -95,6 +95,7 @@ ol.expr.lib = {};
* @enum {string}
*/
ol.expr.functions = {
CONCAT: 'concat',
EXTENT: 'extent',
FID: 'fid',
GEOMETRY_TYPE: 'geometryType',
@@ -108,6 +109,22 @@ ol.expr.functions = {
};
/**
* Concatenate strings. All provided arguments will be cast to string and
* concatenated.
* @param {...string} var_args Strings to concatenate.
* @return {string} All input arguments concatenated as strings.
* @this {ol.Feature}
*/
ol.expr.lib[ol.expr.functions.CONCAT] = function(var_args) {
var str = '';
for (var i = 0, ii = arguments.length; i < ii; ++i) {
str += String(arguments[i]);
}
return str;
};
/**
* Determine if a feature's extent intersects the provided extent.
* @param {number} minX Minimum x-coordinate value.

5
src/ol/expr/expressions.js
View File

@@ -483,11 +483,6 @@ ol.expr.Math.prototype.evaluate = function(opt_scope, opt_fns, opt_this) {
var result;
var rightVal = this.right_.evaluate(opt_scope, opt_fns, opt_this);
var leftVal = this.left_.evaluate(opt_scope, opt_fns, opt_this);
/**
* TODO: throw if rightVal, leftVal not numbers - this would require the use
* of a concat function for strings but it would let us serialize these as
* math functions where available elsewhere
*/
var op = this.operator_;
if (op === ol.expr.MathOp.ADD) {

12
src/ol/parser/ogc/filter_v1.js
View File

@@ -12,8 +12,6 @@ goog.require('ol.expr.Identifier');
goog.require('ol.expr.Literal');
goog.require('ol.expr.Logical');
goog.require('ol.expr.LogicalOp');
goog.require('ol.expr.Math');
goog.require('ol.expr.MathOp');
goog.require('ol.expr.Not');
goog.require('ol.expr.functions');
goog.require('ol.parser.XML');
@@ -64,13 +62,9 @@ ol.parser.ogc.Filter_v1 = function() {
if (num === 1) {
expr = expressions[0];
} else {
expr = new ol.expr.Literal('');
if (num > 1) {
var add = ol.expr.MathOp.ADD;
for (var i = 0; i < num; ++i) {
expr = new ol.expr.Math(add, expr, expressions[i]);
}
}
expr = new ol.expr.Call(
new ol.expr.Identifier(ol.expr.functions.CONCAT),
expressions);
}
return expr;
},

5
src/ol/style/fillsymbolizer.js
View File

@@ -64,9 +64,8 @@ ol.style.Fill.prototype.createLiteral = function(featureOrType) {
goog.asserts.assertString(
color, 'color must be a string');
var opacity = ol.expr.evaluateFeature(this.opacity_, feature);
goog.asserts.assertNumber(
opacity, 'color must be a number');
var opacity = Number(ol.expr.evaluateFeature(this.opacity_, feature));
goog.asserts.assert(!isNaN(opacity), 'opacity must be a number');
literal = new ol.style.PolygonLiteral({
fillColor: color,

14
src/ol/style/iconsymbolizer.js
View File

@@ -90,21 +90,21 @@ ol.style.Icon.prototype.createLiteral = function(featureOrType) {
var width;
if (!goog.isNull(this.width_)) {
width = ol.expr.evaluateFeature(this.width_, feature);
goog.asserts.assertNumber(width, 'width must be a number');
width = Number(ol.expr.evaluateFeature(this.width_, feature));
goog.asserts.assert(!isNaN(width), 'width must be a number');
}
var height;
if (!goog.isNull(this.height_)) {
height = ol.expr.evaluateFeature(this.height_, feature);
height = Number(ol.expr.evaluateFeature(this.height_, feature));
goog.asserts.assertNumber(height, 'height must be a number');
}
var opacity = ol.expr.evaluateFeature(this.opacity_, feature);
goog.asserts.assertNumber(opacity, 'opacity must be a number');
var opacity = Number(ol.expr.evaluateFeature(this.opacity_, feature));
goog.asserts.assert(!isNaN(opacity), 'opacity must be a number');
var rotation = ol.expr.evaluateFeature(this.rotation_, feature);
goog.asserts.assertNumber(rotation, 'rotation must be a number');
var rotation = Number(ol.expr.evaluateFeature(this.rotation_, feature));
goog.asserts.assert(!isNaN(rotation), 'rotation must be a number');
literal = new ol.style.IconLiteral({
url: url,

24
src/ol/style/shapesymbolizer.js
View File

@@ -73,17 +73,17 @@ ol.style.Shape.prototype.createLiteral = function(featureOrType) {
var literal = null;
if (type === ol.geom.GeometryType.POINT ||
type === ol.geom.GeometryType.MULTIPOINT) {
var size = ol.expr.evaluateFeature(this.size_, feature);
goog.asserts.assertNumber(size, 'size must be a number');
var size = Number(ol.expr.evaluateFeature(this.size_, feature));
goog.asserts.assert(!isNaN(size), 'size must be a number');
var fillColor, fillOpacity;
if (!goog.isNull(this.fill_)) {
fillColor = ol.expr.evaluateFeature(this.fill_.getColor(), feature);
goog.asserts.assertString(
fillColor, 'fillColor must be a string');
fillOpacity = ol.expr.evaluateFeature(this.fill_.getOpacity(), feature);
goog.asserts.assertNumber(
fillOpacity, 'fillOpacity must be a number');
fillOpacity = Number(ol.expr.evaluateFeature(
this.fill_.getOpacity(), feature));
goog.asserts.assert(!isNaN(fillOpacity), 'fillOpacity must be a number');
}
var strokeColor, strokeOpacity, strokeWidth;
@@ -91,13 +91,13 @@ ol.style.Shape.prototype.createLiteral = function(featureOrType) {
strokeColor = ol.expr.evaluateFeature(this.stroke_.getColor(), feature);
goog.asserts.assertString(
strokeColor, 'strokeColor must be a string');
strokeOpacity = ol.expr.evaluateFeature(this.stroke_.getOpacity(),
feature);
goog.asserts.assertNumber(
strokeOpacity, 'strokeOpacity must be a number');
strokeWidth = ol.expr.evaluateFeature(this.stroke_.getWidth(), feature);
goog.asserts.assertNumber(
strokeWidth, 'strokeWidth must be a number');
strokeOpacity = Number(ol.expr.evaluateFeature(
this.stroke_.getOpacity(), feature));
goog.asserts.assert(!isNaN(strokeOpacity),
'strokeOpacity must be a number');
strokeWidth = Number(ol.expr.evaluateFeature(
this.stroke_.getWidth(), feature));
goog.asserts.assert(!isNaN(strokeWidth), 'strokeWidth must be a number');
}
literal = new ol.style.ShapeLiteral({

12
src/ol/style/strokesymbolizer.js
View File

@@ -71,13 +71,13 @@ ol.style.Stroke.prototype.createLiteral = function(featureOrType) {
this.color_, feature);
goog.asserts.assertString(color, 'color must be a string');
var opacity = ol.expr.evaluateFeature(
this.opacity_, feature);
goog.asserts.assertNumber(opacity, 'opacity must be a number');
var opacity = Number(ol.expr.evaluateFeature(
this.opacity_, feature));
goog.asserts.assert(!isNaN(opacity), 'opacity must be a number');
var width = ol.expr.evaluateFeature(
this.width_, feature);
goog.asserts.assertNumber(width, 'width must be a number');
var width = Number(ol.expr.evaluateFeature(
this.width_, feature));
goog.asserts.assert(!isNaN(width), 'width must be a number');
var literal = null;
if (type === ol.geom.GeometryType.LINESTRING ||

8
src/ol/style/textsymbolizer.js
View File

@@ -84,14 +84,14 @@ ol.style.Text.prototype.createLiteral = function(featureOrType) {
var fontFamily = ol.expr.evaluateFeature(this.fontFamily_, feature);
goog.asserts.assertString(fontFamily, 'fontFamily must be a string');
var fontSize = ol.expr.evaluateFeature(this.fontSize_, feature);
goog.asserts.assertNumber(fontSize, 'fontSize must be a number');
var fontSize = Number(ol.expr.evaluateFeature(this.fontSize_, feature));
goog.asserts.assert(!isNaN(fontSize), 'fontSize must be a number');
var text = ol.expr.evaluateFeature(this.text_, feature);
goog.asserts.assertString(text, 'text must be a string');
var opacity = ol.expr.evaluateFeature(this.opacity_, feature);
goog.asserts.assertNumber(opacity, 'opacity must be a number');
var opacity = Number(ol.expr.evaluateFeature(this.opacity_, feature));
goog.asserts.assert(!isNaN(opacity), 'opacity must be a number');
return new ol.style.TextLiteral({
color: color,

46
test/spec/ol/expr/expression.test.js
View File

@@ -628,6 +628,52 @@ describe('ol.expr.lib', function() {
var parse = ol.expr.parse;
var evaluate = ol.expr.evaluateFeature;
describe('concat()', function() {
var feature = new ol.Feature({
str: 'bar',
num: 42,
bool: false,
nul: null
});
it('concatenates strings', function() {
expect(evaluate(parse('concat(str, "after")'), feature))
.to.be('barafter');
expect(evaluate(parse('concat("before", str)'), feature))
.to.be('beforebar');
expect(evaluate(parse('concat("a", str, "b")'), feature))
.to.be('abarb');
});
it('concatenates numbers as strings', function() {
expect(evaluate(parse('concat(num, 0)'), feature))
.to.be('420');
expect(evaluate(parse('concat(0, num)'), feature))
.to.be('042');
expect(evaluate(parse('concat(42, 42)'), feature))
.to.be('4242');
expect(evaluate(parse('concat(str, num)'), feature))
.to.be('bar42');
});
it('concatenates booleans as strings', function() {
expect(evaluate(parse('concat(bool, "foo")'), feature))
.to.be('falsefoo');
expect(evaluate(parse('concat(true, str)'), feature))
.to.be('truebar');
expect(evaluate(parse('concat(true, false)'), feature))
.to.be('truefalse');
});
it('concatenates nulls as strings', function() {
expect(evaluate(parse('concat(nul, "foo")'), feature))
.to.be('nullfoo');
expect(evaluate(parse('concat(str, null)'), feature))
.to.be('barnull');
});
});
describe('extent()', function() {
var nw = new ol.Feature({

7
test/spec/ol/parser/ogc/filter_v1_0_0.test.js
View File

@@ -235,6 +235,8 @@ describe('ol.parser.ogc.Filter_v1_0_0', function() {
});
describe('_expression reader', function() {
var evaluate = ol.expr.evaluateFeature;
it('handles combined propertyname and text', function() {
var xml = '<ogc:UpperBoundary xmlns:ogc="' +
'http://www.opengis.net/ogc">10</ogc:UpperBoundary>';
@@ -247,7 +249,7 @@ describe('ol.parser.ogc.Filter_v1_0_0', function() {
xml = '<ogc:UpperBoundary xmlns:ogc="http://www.opengis.net/ogc">' +
'foo<ogc:PropertyName>x</ogc:PropertyName>bar</ogc:UpperBoundary>';
expr = reader.call(parser, goog.dom.xml.loadXml(xml).documentElement);
expect(expr.evaluate({x: 4})).to.eql('foo4bar');
expect(evaluate(expr, new ol.Feature({x: 4}))).to.eql('foo4bar');
});
it('handles combined propertyname and literal', function() {
@@ -258,7 +260,7 @@ describe('ol.parser.ogc.Filter_v1_0_0', function() {
'<ogc:PropertyName>x</ogc:PropertyName>' +
'<ogc:Literal>foo</ogc:Literal></ogc:UpperBoundary>';
var expr = reader.call(parser, goog.dom.xml.loadXml(xml).documentElement);
expect(expr.evaluate({x: 42})).to.eql('bar42foo');
expect(evaluate(expr, new ol.Feature({x: 42}))).to.eql('bar42foo');
});
});
@@ -266,6 +268,7 @@ describe('ol.parser.ogc.Filter_v1_0_0', function() {
});
goog.require('goog.dom.xml');
goog.require('ol.Feature');
goog.require('ol.expr');
goog.require('ol.expr.Call');
goog.require('ol.expr.Comparison');

17
test/spec/ol/style/fillsymbolizer.test.js
View File

@@ -64,6 +64,23 @@ describe('ol.style.Fill', function() {
expect(literal.fillOpacity).to.be(0.8);
});
it('casts opacity to number', function() {
var symbolizer = new ol.style.Fill({
opacity: ol.expr.parse('opacity'),
color: '#ff00ff'
});
var feature = new ol.Feature({
opacity: '0.55',
geometry: new ol.geom.Polygon(
[[[0, 0], [1, 0], [1, 1], [0, 1], [0, 0]]])
});
var literal = symbolizer.createLiteral(feature);
expect(literal).to.be.a(ol.style.PolygonLiteral);
expect(literal.fillOpacity).to.be(0.55);
});
});
describe('#getColor()', function() {

71
test/spec/ol/style/iconsymbolizer.test.js
View File

@@ -75,19 +75,82 @@ describe('ol.style.Icon', function() {
expect(literal.url).to.be('http://example.com/1.png');
});
it('applies default type if none provided', function() {
it('applies default opacity if none provided', function() {
var symbolizer = new ol.style.Icon({
height: ol.expr.parse('10'),
width: ol.expr.parse('20'),
url: ol.expr.parse('"http://example.com/1.png"')
height: 10,
width: 20,
url: 'http://example.com/1.png'
});
var literal = symbolizer.createLiteral(ol.geom.GeometryType.POINT);
expect(literal).to.be.a(ol.style.IconLiteral);
expect(literal.opacity).to.be(1);
});
it('applies default rotation if none provided', function() {
var symbolizer = new ol.style.Icon({
height: 10,
width: 20,
url: 'http://example.com/1.png'
});
var literal = symbolizer.createLiteral(ol.geom.GeometryType.POINT);
expect(literal).to.be.a(ol.style.IconLiteral);
expect(literal.rotation).to.be(0);
});
it('casts opacity to number', function() {
var symbolizer = new ol.style.Icon({
opacity: ol.expr.parse('opacity'),
height: 10,
width: 20,
url: 'http://example.com/1.png'
});
var feature = new ol.Feature({
opacity: '0.53',
geometry: new ol.geom.Point([1, 2])
});
var literal = symbolizer.createLiteral(feature);
expect(literal).to.be.a(ol.style.IconLiteral);
expect(literal.opacity).to.be(0.53);
});
it('casts width to number', function() {
var symbolizer = new ol.style.Icon({
width: ol.expr.parse('width'),
height: 10,
url: 'http://example.com/1.png'
});
var feature = new ol.Feature({
width: '42',
geometry: new ol.geom.Point([1, 2])
});
var literal = symbolizer.createLiteral(feature);
expect(literal).to.be.a(ol.style.IconLiteral);
expect(literal.width).to.be(42);
});
it('casts height to number', function() {
var symbolizer = new ol.style.Icon({
height: ol.expr.parse('height'),
width: 10,
url: 'http://example.com/1.png'
});
var feature = new ol.Feature({
height: '42',
geometry: new ol.geom.Point([1, 2])
});
var literal = symbolizer.createLiteral(feature);
expect(literal).to.be.a(ol.style.IconLiteral);
expect(literal.height).to.be(42);
});
});
describe('#getHeight()', function() {

89
test/spec/ol/style/shapesymbolizer.test.js
View File

@@ -71,6 +71,95 @@ describe('ol.style.Shape', function() {
expect(literal.strokeWidth).to.be(2);
});
it('casts size to number', function() {
var symbolizer = new ol.style.Shape({
size: ol.expr.parse('size'),
fill: new ol.style.Fill({
color: '#BADA55'
}),
stroke: new ol.style.Stroke({
color: '#013',
opacity: 1,
width: 2
})
});
var feature = new ol.Feature({
size: '42',
geometry: new ol.geom.Point([1, 2])
});
var literal = symbolizer.createLiteral(feature);
expect(literal).to.be.a(ol.style.ShapeLiteral);
expect(literal.size).to.be(42);
});
it('casts stroke width to number', function() {
var symbolizer = new ol.style.Shape({
fill: new ol.style.Fill({
color: '#BADA55'
}),
stroke: new ol.style.Stroke({
color: '#013',
opacity: 1,
width: ol.expr.parse('strokeWidth')
})
});
var feature = new ol.Feature({
strokeWidth: '4.2',
geometry: new ol.geom.Point([1, 2])
});
var literal = symbolizer.createLiteral(feature);
expect(literal).to.be.a(ol.style.ShapeLiteral);
expect(literal.strokeWidth).to.be(4.2);
});
it('casts stroke opacity to number', function() {
var symbolizer = new ol.style.Shape({
fill: new ol.style.Fill({
color: '#BADA55'
}),
stroke: new ol.style.Stroke({
color: '#013',
opacity: ol.expr.parse('strokeOpacity'),
width: 3
})
});
var feature = new ol.Feature({
strokeOpacity: '.2',
geometry: new ol.geom.Point([1, 2])
});
var literal = symbolizer.createLiteral(feature);
expect(literal).to.be.a(ol.style.ShapeLiteral);
expect(literal.strokeOpacity).to.be(0.2);
});
it('casts fill opacity to number', function() {
var symbolizer = new ol.style.Shape({
fill: new ol.style.Fill({
opacity: ol.expr.parse('fillOpacity'),
color: '#BADA55'
}),
stroke: new ol.style.Stroke({
color: '#013',
width: 3
})
});
var feature = new ol.Feature({
fillOpacity: '.42',
geometry: new ol.geom.Point([1, 2])
});
var literal = symbolizer.createLiteral(feature);
expect(literal).to.be.a(ol.style.ShapeLiteral);
expect(literal.fillOpacity).to.be(0.42);
});
});
describe('#getFill()', function() {

30
test/spec/ol/style/textsymbolizer.test.js
View File

@@ -74,7 +74,7 @@ describe('ol.style.Text', function() {
expect(literal.opacity).to.be(0.6);
});
it('applies default type if none provided', function() {
it('applies defaults if none provided', function() {
var symbolizer = new ol.style.Text({
text: 'Test'
});
@@ -88,6 +88,34 @@ describe('ol.style.Text', function() {
expect(literal.opacity).to.be(1);
});
it('casts size to number', function() {
var symbolizer = new ol.style.Text({
text: 'test',
fontSize: ol.expr.parse('size')
});
var feature = new ol.Feature({
size: '42'
});
var literal = symbolizer.createLiteral(feature);
expect(literal.fontSize).to.be(42);
});
it('casts opacity to number', function() {
var symbolizer = new ol.style.Text({
text: 'test',
opacity: ol.expr.parse('opacity')
});
var feature = new ol.Feature({
opacity: '0.42'
});
var literal = symbolizer.createLiteral(feature);
expect(literal.opacity).to.be(0.42);
});
});
describe('#getColor()', function() {