From d4ecf53801f982ce19410d76bd6ff59e6b5149c9 Mon Sep 17 00:00:00 2001 From: ahocevar Date: Sun, 3 Mar 2013 17:00:20 +0100 Subject: [PATCH] Adding example for rule based styling For the first time in the history of OpenLayers, we can render features with multiple symbolizers now, which is also shown in this new example. --- examples/style-rules.html | 47 ++++++++++++++++++ examples/style-rules.js | 102 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 149 insertions(+) create mode 100644 examples/style-rules.html create mode 100644 examples/style-rules.js diff --git a/examples/style-rules.html b/examples/style-rules.html new file mode 100644 index 0000000000..aebef4be82 --- /dev/null +++ b/examples/style-rules.html @@ -0,0 +1,47 @@ + + + + + + + + + Vector Layer Example + + +
+
+

Style rules example

+
Draws features with rule based styles.
+
+

See the + style-rules.js source + to see how this is done.

+
+
+
+
vector, feature, canvas
+ + + diff --git a/examples/style-rules.js b/examples/style-rules.js new file mode 100644 index 0000000000..b2c0e1bd01 --- /dev/null +++ b/examples/style-rules.js @@ -0,0 +1,102 @@ +goog.require('ol.Collection'); +goog.require('ol.Coordinate'); +goog.require('ol.Expression'); +goog.require('ol.Feature'); +goog.require('ol.Map'); +goog.require('ol.RendererHint'); +goog.require('ol.View2D'); +goog.require('ol.filter.Filter'); +goog.require('ol.geom.LineString'); +goog.require('ol.layer.Vector'); +goog.require('ol.projection'); +goog.require('ol.source.Vector'); +goog.require('ol.style.Line'); +goog.require('ol.style.Rule'); +goog.require('ol.style.Style'); + + +var source = new ol.source.Vector({ + projection: ol.projection.getFromCode('EPSG:3857') +}); + +source.addFeatures([ + new ol.Feature({ + g: new ol.geom.LineString([[-10000000, -10000000], [10000000, 10000000]]), + 'color': '#BADA55', + 'where': 'inner' + }), + new ol.Feature({ + g: new ol.geom.LineString([[-10000000, 10000000], [10000000, -10000000]]), + 'color': '#BADA55', + 'where': 'inner' + }), + new ol.Feature({ + g: new ol.geom.LineString([[-10000000, -10000000], [-10000000, 10000000]]), + 'color': '#013', + 'where': 'outer' + }), + new ol.Feature({ + g: new ol.geom.LineString([[-10000000, 10000000], [10000000, 10000000]]), + 'color': '#013', + 'where': 'outer' + }), + new ol.Feature({ + g: new ol.geom.LineString([[10000000, 10000000], [10000000, -10000000]]), + 'color': '#013', + 'where': 'outer' + }), + new ol.Feature({ + g: new ol.geom.LineString([[10000000, -10000000], [-10000000, -10000000]]), + 'color': '#013', + 'where': 'outer' + }) +]); + +var style = new ol.style.Style({ + rules: [ + new ol.style.Rule({ + filter: new ol.filter.Filter(function(feature) { + return feature.get('where') == 'outer'; + }), + symbolizers: [ + new ol.style.Line({ + strokeStyle: new ol.Expression('color'), + strokeWidth: 4, + opacity: 1 + }) + ] + }), + new ol.style.Rule({ + filter: new ol.filter.Filter(function(feature) { + return feature.get('where') == 'inner'; + }), + symbolizers: [ + new ol.style.Line({ + strokeStyle: '#013', + strokeWidth: 4, + opacity: 1 + }), + new ol.style.Line({ + strokeStyle: new ol.Expression('color'), + strokeWidth: 2, + opacity: 1 + }) + ] + }) + ] +}); + +var vector = new ol.layer.Vector({ + source: source, + style: style +}); + +var map = new ol.Map({ + layers: new ol.Collection([vector]), + renderer: ol.RendererHint.CANVAS, + target: 'map', + view: new ol.View2D({ + center: new ol.Coordinate(0, 0), + zoom: 2 + }) +});