diff --git a/examples/style-rules.html b/examples/style-rules.html new file mode 100644 index 0000000000..7a0859f3ba --- /dev/null +++ b/examples/style-rules.html @@ -0,0 +1,52 @@ + + + + + + + + + + Style with rules example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Style with rules example

+

Draws features with rule based styles.

+
+

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

+
+
vector, geojson, style
+
+ +
+ +
+ + + + + diff --git a/examples/style-rules.js b/examples/style-rules.js new file mode 100644 index 0000000000..ea7a132d13 --- /dev/null +++ b/examples/style-rules.js @@ -0,0 +1,136 @@ +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.control.defaults'); +goog.require('ol.filter.Filter'); +goog.require('ol.geom.LineString'); +goog.require('ol.layer.Vector'); +goog.require('ol.parser.GeoJSON'); +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 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({ + strokeColor: 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({ + strokeColor: '#013', + strokeWidth: 4, + opacity: 1 + }), + new ol.style.Line({ + strokeColor: new ol.Expression('color'), + strokeWidth: 2, + opacity: 1 + }) + ] + }) +]}); + +var vector = new ol.layer.Vector({ + style: style, + source: new ol.source.Vector({ + projection: ol.projection.get('EPSG:3857') + }) +}); + +vector.parseFeatures({ + 'type': 'FeatureCollection', + 'features': [{ + 'type': 'Feature', + 'properties': { + 'color': '#BADA55', + 'where': 'inner' + }, + 'geometry': { + 'type': 'LineString', + 'coordinates': [[-10000000, -10000000], [10000000, 10000000]] + } + }, { + 'type': 'Feature', + 'properties': { + 'color': '#BADA55', + 'where': 'inner' + }, + 'geometry': { + 'type': 'LineString', + 'coordinates': [[-10000000, 10000000], [10000000, -10000000]] + } + }, { + 'type': 'Feature', + 'properties': { + 'color': '#013', + 'where': 'outer' + }, + 'geometry': { + 'type': 'LineString', + 'coordinates': [[-10000000, -10000000], [-10000000, 10000000]] + } + }, { + 'type': 'Feature', + 'properties': { + 'color': '#013', + 'where': 'outer' + }, + 'geometry': { + 'type': 'LineString', + 'coordinates': [[-10000000, 10000000], [10000000, 10000000]] + } + }, { + 'type': 'Feature', + 'properties': { + 'color': '#013', + 'where': 'outer' + }, + 'geometry': { + 'type': 'LineString', + 'coordinates': [[10000000, 10000000], [10000000, -10000000]] + } + }, { + 'type': 'Feature', + 'properties': { + 'color': '#013', + 'where': 'outer' + }, + 'geometry': { + 'type': 'LineString', + 'coordinates': [[10000000, -10000000], [-10000000, -10000000]] + } + }] +}, new ol.parser.GeoJSON(), ol.projection.get('EPSG:3857')); + + +var map = new ol.Map({ + layers: new ol.Collection([vector]), + controls: ol.control.defaults({ + attribution: false + }), + renderer: ol.RendererHint.CANVAS, + target: 'map', + view: new ol.View2D({ + center: new ol.Coordinate(0, 0), + zoom: 1 + }) +});