diff --git a/examples/symbol-atlas-webgl.html b/examples/symbol-atlas-webgl.html new file mode 100644 index 0000000000..36774b6681 --- /dev/null +++ b/examples/symbol-atlas-webgl.html @@ -0,0 +1,52 @@ + + + + + + + + + + + Symbols with WebGL example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Symbols with WebGL example

+

Using symbols in an atlas with WebGL.

+
+

See the symbol-atlas-webgl.js source to see how this is done.

+
+
webgl, symbol, atlas, vector, point
+
+ +
+ +
+ + + + + + + + diff --git a/examples/symbol-atlas-webgl.js b/examples/symbol-atlas-webgl.js new file mode 100644 index 0000000000..20629b2377 --- /dev/null +++ b/examples/symbol-atlas-webgl.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.AtlasManager'); +goog.require('ol.style.Circle'); +goog.require('ol.style.Fill'); +goog.require('ol.style.Stroke'); +goog.require('ol.style.Style'); + +var atlasManager = new ol.style.AtlasManager({ + maxSize: ol.has.WEBGL_MAX_TEXTURE_SIZE}); + +var symbolInfo = [{ + opacity: 1.0, + scale: 1.0, + fillColor: 'rgba(255, 153, 0, 0.4)', + strokeColor: 'rgba(255, 204, 0, 0.2)' +}, { + opacity: 0.75, + scale: 1.25, + fillColor: 'rgba(70, 80, 224, 0.4)', + strokeColor: 'rgba(12, 21, 138, 0.2)' +}, { + opacity: 0.5, + scale: 1.5, + fillColor: 'rgba(66, 150, 79, 0.4)', + strokeColor: 'rgba(20, 99, 32, 0.2)' +}, { + opacity: 1.0, + scale: 1.0, + fillColor: 'rgba(176, 61, 35, 0.4)', + strokeColor: 'rgba(145, 43, 20, 0.2)' +}]; + +var radiuses = [3, 6, 9, 15, 19, 25]; +var symbolCount = symbolInfo.length * radiuses.length; +var symbols = []; +var i, j; +for (i = 0; i < symbolInfo.length; ++i) { + var info = symbolInfo[i]; + for (j = 0; j < radiuses.length; ++j) { + symbols.push(new ol.style.Circle({ + opacity: info.opacity, + scale: info.scale, + radius: radiuses[j], + fill: new ol.style.Fill({ + color: info.fillColor + }), + stroke: new ol.style.Stroke({ + color: info.strokeColor, + width: 1 + }), + // by passing the atlas manager to the symbol, + // the symbol will be added to an atlas + atlasManager: atlasManager + })); + } +} + +var featureCount = 30000; +var features = new Array(featureCount); +var feature, geometry; +var e = 25000000; +for (i = 0; i < featureCount; ++i) { + geometry = new ol.geom.Point( + [2 * e * Math.random() - e, 2 * e * Math.random() - e]); + feature = new ol.Feature(geometry); + feature.setStyle( + new ol.style.Style({ + image: symbols[i % (symbolCount - 1)] + }) + ); + features[i] = feature; +} + +var vectorSource = new ol.source.Vector({ + features: features +}); +var vector = new ol.layer.Vector({ + source: vectorSource +}); + +// Use the "webgl" renderer by default. +var renderer = exampleNS.getRendererFromQueryString(); +if (!renderer) { + renderer = 'webgl'; +} + +var map = new ol.Map({ + renderer: renderer, + layers: [vector], + target: document.getElementById('map'), + view: new ol.View({ + center: [0, 0], + zoom: 3 + }) +});