goog.provide('ol.test.rendering.style.RegularShape'); goog.require('ol.Feature'); goog.require('ol.geom.Point'); goog.require('ol.Map'); goog.require('ol.View'); goog.require('ol.layer.Vector'); goog.require('ol.source.Vector'); goog.require('ol.style.Fill'); goog.require('ol.style.RegularShape'); goog.require('ol.style.Style'); goog.require('ol.style.Stroke'); describe('ol.rendering.style.RegularShape', function() { var target, map, vectorSource; function createMap(renderer) { target = createMapDiv(50, 50); vectorSource = new ol.source.Vector(); var vectorLayer = new ol.layer.Vector({ source: vectorSource }); map = new ol.Map({ target: target, renderer: renderer, layers: [vectorLayer], view: new ol.View({ projection: 'EPSG:4326', center: [0, 0], resolution: 1 }) }); return map; } function createFeatures(stroke, fill) { var feature; feature = new ol.Feature({ geometry: new ol.geom.Point([-15, 15]) }); // square feature.setStyle(new ol.style.Style({ image: new ol.style.RegularShape({ fill: fill, stroke: stroke, points: 4, radius: 10, angle: Math.PI / 4 }) })); vectorSource.addFeature(feature); feature = new ol.Feature({ geometry: new ol.geom.Point([8, 15]) }); // triangle feature.setStyle(new ol.style.Style({ image: new ol.style.RegularShape({ fill: fill, stroke: stroke, points: 3, radius: 10, rotation: Math.PI / 4, angle: 0 }) })); vectorSource.addFeature(feature); feature = new ol.Feature({ geometry: new ol.geom.Point([-10, -8]) }); // star feature.setStyle(new ol.style.Style({ image: new ol.style.RegularShape({ fill: fill, stroke: stroke, points: 5, radius: 10, radius2: 4, angle: 0 }) })); vectorSource.addFeature(feature); feature = new ol.Feature({ geometry: new ol.geom.Point([12, -8]) }); // cross feature.setStyle(new ol.style.Style({ image: new ol.style.RegularShape({ fill: fill, stroke: stroke, points: 4, radius: 10, radius2: 0, angle: 0 }) })); vectorSource.addFeature(feature); } describe('#render', function() { var stroke = new ol.style.Stroke({width: 2}); var fill = new ol.style.Fill({color: 'red'}); afterEach(function() { disposeMap(map); }); it('tests the canvas renderer', function(done) { map = createMap('canvas'); createFeatures(stroke, fill); expectResemble(map, 'rendering/ol/style/expected/regularshape-canvas.png', 9.4, done); }); it('supports lineDash', function(done) { map = createMap('canvas'); createFeatures(new ol.style.Stroke({ lineDash: [10, 5] })); expectResemble(map, 'spec/ol/style/expected/regularshape-canvas-linedash.png', 5, done); }); it('supports lineDashOffset', function(done) { map = createMap('canvas'); createFeatures(new ol.style.Stroke({ lineDash: [10, 5], lineDashOffset: 5 })); expectResemble(map, 'spec/ol/style/expected/regularshape-canvas-linedashoffset.png', 5, done); }); where('WebGL').it('tests the WebGL renderer', function(done) { assertWebGL(); map = createMap('webgl'); createFeatures(stroke, fill); expectResemble(map, 'rendering/ol/style/expected/regularshape-webgl.png', 8.2, done); }); }); describe('uses the default fill and stroke color', function() { var stroke = new ol.style.Stroke(); var fill = new ol.style.Fill(); afterEach(function() { disposeMap(map); }); it('tests the canvas renderer', function(done) { map = createMap('canvas'); createFeatures(stroke, fill); expectResemble(map, 'rendering/ol/style/expected/regularshape-canvas-default-style.png', 3.0, done); }); where('WebGL').it('tests the WebGL renderer', function(done) { assertWebGL(); map = createMap('webgl'); createFeatures(stroke, fill); expectResemble(map, 'rendering/ol/style/expected/regularshape-webgl-default-style.png', 3.0, done); }); }); });