From 6493998a221a587ab9989fea1858548246637e8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Wed, 13 Nov 2013 21:01:58 +0100 Subject: [PATCH] Add a synthetic-lines example --- examples/synthetic-lines.html | 109 ++++++++++++++++++++++++++++++++++ examples/synthetic-lines.js | 62 +++++++++++++++++++ 2 files changed, 171 insertions(+) create mode 100644 examples/synthetic-lines.html create mode 100644 examples/synthetic-lines.js diff --git a/examples/synthetic-lines.html b/examples/synthetic-lines.html new file mode 100644 index 0000000000..9ceddcef56 --- /dev/null +++ b/examples/synthetic-lines.html @@ -0,0 +1,109 @@ + + + + + + + + + + + Synthetic lines example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Synthetic lines example

+

Synthetic lines example.

+
+

See the synthetic-lines.js source to see how this is done.

+

Performance results:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Device/Browser200 lines500 lines1000 lines2000 lines5000 lines10000 lines20000 lines
Mac Book Air / Chrome 33 canary60 fps60 fps60 fps60 fps60 fps60 fps60 fps
Mac Book Air / FireFox 2560 fps60 fps60 fps60 fps60 fps22 fps6 fps
Mac Book Air / Safari 760 fps60 fps60 fps40 fps10 fpsN/AN/A
iPhone 4S / iOS 7 / Safari60 fps33 fps15 fps5 fpsN/AN/AN/A
+ +
+
vector
+
+ +
+ +
+ + + + + + + diff --git a/examples/synthetic-lines.js b/examples/synthetic-lines.js new file mode 100644 index 0000000000..1c1838433e --- /dev/null +++ b/examples/synthetic-lines.js @@ -0,0 +1,62 @@ +goog.require('ol.Feature'); +goog.require('ol.Map'); +goog.require('ol.RendererHint'); +goog.require('ol.View2D'); +goog.require('ol.geom.LineString'); +goog.require('ol.layer.Vector'); +goog.require('ol.source.Vector'); + + +var count = 10000; +var features = new Array(count); + +var startPoint = [0, 0]; +var endPoint; + +var delta, deltaX, deltaY; +var signX = 1; +var signY = -1; + +// Create a square spiral. +var i; +for (i = 0; i < count; ++i) { + delta = (i + 1) * 2500; + if (i % 2 === 0) { + signY *= -1; + } else { + signX *= -1; + } + deltaX = delta * signX; + deltaY = delta * signY; + endPoint = [startPoint[0] + deltaX, startPoint[1] + deltaY]; + features[i] = new ol.Feature({ + 'geometry': new ol.geom.LineString([startPoint, endPoint]) + }); + startPoint = endPoint; +} + +var vector = new ol.layer.Vector({ + source: new ol.source.Vector({ + features: features + }), + styleFunction: function(feature) { + return { + stroke: { + color: '#666666', + width: 1 + } + }; + } +}); + +var view = new ol.View2D({ + center: [0, 0], + zoom: 0 +}); + +var map = new ol.Map({ + layers: [vector], + renderer: ol.RendererHint.CANVAS, + target: 'map', + view: view +});