Port icon-symbol-svg rendering tests
This commit is contained in:
Frederic Junod
BIN
rendering/cases/icon-symbol-svg/expected.png
Normal file
BIN
rendering/cases/icon-symbol-svg/expected.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
72
rendering/cases/icon-symbol-svg/main.js
Normal file
72
rendering/cases/icon-symbol-svg/main.js
Normal file
@@ -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();
|
||||
61
rendering/data/me0.svg
Normal file
61
rendering/data/me0.svg
Normal file
@@ -0,0 +1,61 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
version="1.1"
|
||||
id="Layer_1"
|
||||
x="0px"
|
||||
y="0px"
|
||||
width="32"
|
||||
height="20"
|
||||
viewBox="0 0 32 19.999999"
|
||||
enable-background="new 0 0 512 512"
|
||||
xml:space="preserve"
|
||||
inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
|
||||
sodipodi:docname="me0.svg"><metadata
|
||||
id="metadata3776"><rdf:RDF><cc:Work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
|
||||
id="defs3774" /><sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1916"
|
||||
inkscape:window-height="1033"
|
||||
id="namedview3772"
|
||||
showgrid="false"
|
||||
inkscape:zoom="29.5"
|
||||
inkscape:cx="7.3511697"
|
||||
inkscape:cy="12.058448"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="45"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="Layer_1"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0" /><g
|
||||
id="g3754"
|
||||
style="fill:#085095;fill-opacity:1;stroke:#ffffff;stroke-width:25;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
transform="matrix(0.04324609,0,0,0.04111507,12.942501,-0.5123079)"><path
|
||||
style="fill:#085095;fill-opacity:1;stroke:#ffffff;stroke-width:25;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path3770"
|
||||
d="m 256,25.6 c -95.4279,0 -172.8,77.3721 -172.8,172.8 0,95.4279 144,288 172.8,288 28.8,0 172.8,-192.5721 172.8,-288 C 428.8,102.9721 351.4279,25.6 256,25.6 Z m 0,288 c -63.5346,0 -115.2,-51.6942 -115.2,-115.2 0,-63.5058 51.6654,-115.2 115.2,-115.2 63.5346,0 115.2,51.6942 115.2,115.2 0,63.5058 -51.6654,115.2 -115.2,115.2 z"
|
||||
inkscape:connector-curvature="0" /><polygon
|
||||
style="fill:#085095;fill-opacity:1;stroke:#ffffff;stroke-width:69.44444275;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
transform="matrix(0.36,0,0,0.36,160.72934,103.79972)"
|
||||
id="polygon3"
|
||||
points="330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 259.216,29.942 "
|
||||
stroke-miterlimit="10" /></g></svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
@@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user