diff --git a/rendering/cases/icon-symbol-svg/expected.png b/rendering/cases/icon-symbol-svg/expected.png new file mode 100644 index 0000000000..c604fbb9ed Binary files /dev/null and b/rendering/cases/icon-symbol-svg/expected.png differ diff --git a/rendering/cases/icon-symbol-svg/main.js b/rendering/cases/icon-symbol-svg/main.js new file mode 100644 index 0000000000..312fa67f8c --- /dev/null +++ b/rendering/cases/icon-symbol-svg/main.js @@ -0,0 +1,72 @@ +import Map from '../../../src/ol/Map.js'; +import View from '../../../src/ol/View.js'; +import {Vector as VectorLayer, Tile as TileLayer} from '../../../src/ol/layer.js'; +import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js'; +import Point from '../../../src/ol/geom/Point.js'; +import Feature from '../../../src/ol/Feature.js'; +import {fromLonLat} from '../../../src/ol/proj.js'; +import {Style, Icon} from '../../../src/ol/style.js'; + +const center = fromLonLat([8, 50]); + +const vectorSource = new VectorSource(); +let feature; + +// scales svg correctly +feature = new Feature({ + geometry: new Point(fromLonLat([3, 45])) +}); +feature.setStyle(new Style({ + image: new Icon({ + src: '/data/me0.svg', + scale: 2 + }) +})); +vectorSource.addFeature(feature); + +// uses offset correctly +feature = new Feature({ + geometry: new Point(fromLonLat([3, 55])) +}); +feature.setStyle(new Style({ + image: new Icon({ + src: '/data/me0.svg', + offset: [16, 0], + scale: 2 + }) +})); +vectorSource.addFeature(feature); + +// uses offset correctly if it is larger than size +feature = new Feature({ + geometry: new Point(fromLonLat([8, 55])) +}); +feature.setStyle(new Style({ + image: new Icon({ + src: '/data/me0.svg', + offsetOrigin: 'bottom-left', + offset: [16, 0], + size: [64, 40] + }) +})); +vectorSource.addFeature(feature); + +new Map({ + layers: [ + new TileLayer({ + source: new XYZ({ + url: '/data/tiles/satellite/{z}/{x}/{y}.jpg' + }) + }), + new VectorLayer({ + source: vectorSource + }) + ], + target: 'map', + view: new View({ + center: center, + zoom: 3 + }) +}); + +render(); diff --git a/rendering/data/me0.svg b/rendering/data/me0.svg new file mode 100644 index 0000000000..e83664eba6 --- /dev/null +++ b/rendering/data/me0.svg @@ -0,0 +1,61 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/test/rendering/ol/data/icon.png b/test/rendering/ol/data/icon.png deleted file mode 100644 index ed886623d5..0000000000 Binary files a/test/rendering/ol/data/icon.png and /dev/null differ diff --git a/test/rendering/ol/style/expected/icon-canvas-svg-offset.png b/test/rendering/ol/style/expected/icon-canvas-svg-offset.png deleted file mode 100644 index 2f8c277bf0..0000000000 Binary files a/test/rendering/ol/style/expected/icon-canvas-svg-offset.png and /dev/null differ diff --git a/test/rendering/ol/style/expected/icon-canvas-svg-offset2.png b/test/rendering/ol/style/expected/icon-canvas-svg-offset2.png deleted file mode 100644 index 22eacf94d9..0000000000 Binary files a/test/rendering/ol/style/expected/icon-canvas-svg-offset2.png and /dev/null differ diff --git a/test/rendering/ol/style/expected/icon-canvas-svg-scale.png b/test/rendering/ol/style/expected/icon-canvas-svg-scale.png deleted file mode 100644 index 58de0baf34..0000000000 Binary files a/test/rendering/ol/style/expected/icon-canvas-svg-scale.png and /dev/null differ diff --git a/test/rendering/ol/style/expected/icon-webgl.png b/test/rendering/ol/style/expected/icon-webgl.png deleted file mode 100644 index c08cbfdd54..0000000000 Binary files a/test/rendering/ol/style/expected/icon-webgl.png and /dev/null differ diff --git a/test/rendering/ol/style/icon.test.js b/test/rendering/ol/style/icon.test.js deleted file mode 100644 index aa9da7875e..0000000000 --- a/test/rendering/ol/style/icon.test.js +++ /dev/null @@ -1,117 +0,0 @@ -import Feature from '../../../../src/ol/Feature.js'; -import Point from '../../../../src/ol/geom/Point.js'; -import Map from '../../../../src/ol/Map.js'; -import WebGLMap from '../../../../src/ol/WebGLMap.js'; -import View from '../../../../src/ol/View.js'; -import VectorLayer from '../../../../src/ol/layer/Vector.js'; -import WebGLVectorLayer from '../../../../src/ol/layer/Vector.js'; -import VectorSource from '../../../../src/ol/source/Vector.js'; -import Icon from '../../../../src/ol/style/Icon.js'; -import Style from '../../../../src/ol/style/Style.js'; - - -describe('ol.rendering.style.Icon', function() { - - let map, vectorSource; - - const imgInfo = { - anchor: [0.5, 46], - anchorXUnits: 'fraction', - anchorYUnits: 'pixels', - opacity: 0.75, - scale: 0.5, - imgSize: [32, 48] - }; - - function createMap(renderer, width, height) { - const MapConstructor = renderer === 'webgl' ? WebGLMap : Map; - const LayerConstructor = renderer === 'webgl' ? WebGLVectorLayer : VectorLayer; - - vectorSource = new VectorSource(); - const vectorLayer = new LayerConstructor({ - source: vectorSource - }); - - map = new MapConstructor({ - pixelRatio: 1, - target: createMapDiv(width ? width : 50, height ? height : 50), - layers: [vectorLayer], - view: new View({ - projection: 'EPSG:4326', - center: [0, 0], - resolution: 1 - }) - }); - } - - afterEach(function() { - if (map) { - disposeMap(map); - map = null; - } - }); - - describe('#render', function() { - - function createFeatures(src, imgInfo, callback) { - const feature = new Feature({ - geometry: new Point([0, 0]) - }); - - const img = new Image(); - img.onload = function() { - imgInfo.img = img; - feature.setStyle(new Style({ - image: new Icon(/** @type {module:ol/style/Icon~Options} */ (imgInfo)) - })); - vectorSource.addFeature(feature); - callback(); - }; - img.src = src; - } - - it('scales svg correctly in the canvas renderer', function(done) { - createMap('canvas', 512, 512); - createFeatures('rendering/ol/data/me0.svg', { - scale: 96 / 512, - imgSize: [512, 512] - }, function() { - expectResemble(map, 'rendering/ol/style/expected/icon-canvas-svg-scale.png', - IMAGE_TOLERANCE, done); - }); - }); - - it('uses offset correctly in the canvas renderer', function(done) { - createMap('canvas', 256, 512); - createFeatures('rendering/ol/data/me0.svg', { - offset: [0, 256], - size: [256, 256], - imgSize: [512, 512] - }, function() { - expectResemble(map, 'rendering/ol/style/expected/icon-canvas-svg-offset.png', - IMAGE_TOLERANCE, done); - }); - }); - - it('uses offset correctly if it is larger than size in the canvas renderer', function(done) { - createMap('canvas', 256, 512); - createFeatures('rendering/ol/data/me0.svg', { - offset: [0, 374], - size: [256, 256], - imgSize: [512, 512] - }, function() { - expectResemble(map, 'rendering/ol/style/expected/icon-canvas-svg-offset2.png', - IMAGE_TOLERANCE, done); - }); - }); - - where('WebGL').it('tests the WebGL renderer', function(done) { - assertWebGL(); - createMap('webgl'); - createFeatures('rendering/ol/data/icon.png', imgInfo, function() { - expectResemble(map, 'rendering/ol/style/expected/icon-webgl.png', - 2.0, done); - }); - }); - }); -});