From 4a07327dabf5c4aa6adb642e6552af159471053d Mon Sep 17 00:00:00 2001 From: Bart van den Eijnden Date: Thu, 27 Nov 2014 13:33:33 +0100 Subject: [PATCH] Add an example to show off ol.style.RegularShape (see #2706) --- examples/regularshape.html | 51 +++++++++++++++++++ examples/regularshape.js | 100 +++++++++++++++++++++++++++++++++++++ 2 files changed, 151 insertions(+) create mode 100644 examples/regularshape.html create mode 100644 examples/regularshape.js diff --git a/examples/regularshape.html b/examples/regularshape.html new file mode 100644 index 0000000000..2b1ecfcc34 --- /dev/null +++ b/examples/regularshape.html @@ -0,0 +1,51 @@ + + + + + + + + + + + Regular Shape example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Regular Shape example

+

Example of some Regular Shape styles.

+
+

See the regularshape.js source to see how this is done.

+
+
vector, symbol, regularshape, style, square, cross, star, triangle, x
+
+ +
+ +
+ + + + + + + diff --git a/examples/regularshape.js b/examples/regularshape.js new file mode 100644 index 0000000000..141f07280b --- /dev/null +++ b/examples/regularshape.js @@ -0,0 +1,100 @@ +goog.require('ol.Feature'); +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.geom.Point'); +goog.require('ol.layer.Vector'); +goog.require('ol.source.Vector'); +goog.require('ol.style.Fill'); +goog.require('ol.style.RegularShape'); +goog.require('ol.style.Stroke'); +goog.require('ol.style.Style'); + + +var stroke = new ol.style.Stroke({color: 'black', width: 2}); +var fill = new ol.style.Fill({color: 'red'}); + +var styles = { + 'square': [new ol.style.Style({ + image: new ol.style.RegularShape( + /** @type {olx.style.RegularShapeOptions} */({ + fill: fill, + stroke: stroke, + points: 4, + radius: 10, + angle: Math.PI / 4 + })) + })], + 'triangle': [new ol.style.Style({ + image: new ol.style.RegularShape( + /** @type {olx.style.RegularShapeOptions} */({ + fill: fill, + stroke: stroke, + points: 3, + radius: 10, + angle: 0 + })) + })], + 'star': [new ol.style.Style({ + image: new ol.style.RegularShape( + /** @type {olx.style.RegularShapeOptions} */({ + fill: fill, + stroke: stroke, + points: 5, + radius: 10, + radius2: 4, + angle: 0 + })) + })], + 'cross': [new ol.style.Style({ + image: new ol.style.RegularShape( + /** @type {olx.style.RegularShapeOptions} */({ + fill: fill, + stroke: stroke, + points: 4, + radius: 10, + radius2: 0, + angle: 0 + })) + })], + 'x': [new ol.style.Style({ + image: new ol.style.RegularShape( + /** @type {olx.style.RegularShapeOptions} */({ + fill: fill, + stroke: stroke, + points: 4, + radius: 10, + radius2: 0, + angle: Math.PI / 4 + })) + })] +}; + + +var styleKeys = ['x', 'cross', 'star', 'triangle', 'square']; +var count = 250; +var features = new Array(count); +var e = 4500000; +for (var i = 0; i < count; ++i) { + var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e]; + features[i] = new ol.Feature(new ol.geom.Point(coordinates)); + features[i].setStyle(styles[styleKeys[Math.floor(Math.random() * 5)]]); +} + +var source = new ol.source.Vector({ + features: features +}); + +var vectorLayer = new ol.layer.Vector({ + source: source +}); + +var map = new ol.Map({ + layers: [ + vectorLayer + ], + target: 'map', + view: new ol.View({ + center: [0, 0], + zoom: 2 + }) +});