Merge pull request #9389 from KaiVolland/tile-rendering

Replaces listener test in tile.tests.js and removes artifacts

rendering/cases/layer-tile-render-listener/main.js

@@ -0,0 +1,46 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import {transform, fromLonLat} from '../../../src/ol/proj';
+import XYZ from '../../../src/ol/source/XYZ';
+import CircleStyle from '../../../src/ol/style/Circle.js';
+import Fill from '../../../src/ol/style/Fill.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+import Point from '../../../src/ol/geom/Point.js';
+import {getVectorContext} from '../../../src/ol/render.js';
+
+const center = fromLonLat([8.6, 50.1]);
+
+const layer = new TileLayer({
+  source: new XYZ({
+    url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+    transition: 0
+  })
+});
+
+const onRender = function(event) {
+  const context = event.context;
+  context.restore();
+  const vectorContext = getVectorContext(event);
+  vectorContext.setImageStyle(new CircleStyle({
+    radius: 12,
+    fill: new Fill({color: 'yellow'}),
+    stroke: new Stroke({color: 'red', width: 1})
+  }));
+  vectorContext.drawPoint(new Point(
+    transform([13, 37], 'EPSG:4326', 'EPSG:3857')));
+};
+layer.on('postrender', onRender);
+
+const map = new Map({
+  layers: [
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 3
+  })
+});
+map.addLayer(layer);
+
+render();

test/rendering/ol/data/me0.svg

@@ -1,58 +0,0 @@
-<?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="512px"
-   height="512px"
-   viewBox="0 0 512 512"
-   enable-background="new 0 0 512 512"
-   xml:space="preserve"
-   inkscape:version="0.48.4 r9939"
-   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="1024"
-   inkscape:window-height="1258"
-   id="namedview3772"
-   showgrid="false"
-   inkscape:zoom="0.4609375"
-   inkscape:cx="309.13338"
-   inkscape:cy="256"
-   inkscape:window-x="1016"
-   inkscape:window-y="-8"
-   inkscape:window-maximized="1"
-   inkscape:current-layer="Layer_1" />
-
-<g
-   id="g3754"
-   style="fill:#085095;fill-opacity:1;stroke:#ffffff;stroke-opacity:1;stroke-width:25;stroke-miterlimit:4;stroke-dasharray:none;stroke-linejoin:round;stroke-linecap:round"><path
-     style="stroke:#ffffff;stroke-width:25;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;fill:#085095;fill-opacity:1;stroke-linejoin:round;stroke-linecap:round"
-     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;stroke:#ffffff;stroke-width:69.44444444;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;fill-opacity:1"
-     transform="matrix(0.36,0,0,0.36,160.72934,103.79972)"
-     id="polygon3"
-     points="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 330.27,173.919 489.16,197.007 "
-     stroke-miterlimit="10" /></g></svg>

test/rendering/ol/layer/tile.test.js

@@ -1,100 +0,0 @@
-import Map from '../../../../src/ol/Map.js';
-import View from '../../../../src/ol/View.js';
-import Point from '../../../../src/ol/geom/Point.js';
-import TileLayer from '../../../../src/ol/layer/Tile.js';
-import {assign} from '../../../../src/ol/obj.js';
-import {transform} from '../../../../src/ol/proj.js';
-import XYZ from '../../../../src/ol/source/XYZ.js';
-import CircleStyle from '../../../../src/ol/style/Circle.js';
-import Fill from '../../../../src/ol/style/Fill.js';
-import Stroke from '../../../../src/ol/style/Stroke.js';
-
-describe('ol.rendering.layer.Tile', function() {
-
-  let map;
-
-  function createMap(renderer, opt_center, opt_size, opt_pixelRatio, opt_resolutions) {
-    const MapConstructor = Map;
-    const size = opt_size !== undefined ? opt_size : [50, 50];
-
-    map = new MapConstructor({
-      pixelRatio: opt_pixelRatio || 1,
-      target: createMapDiv(size[0], size[1]),
-      view: new View({
-        center: opt_center !== undefined ? opt_center : transform(
-          [-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857'),
-        resolutions: opt_resolutions,
-        zoom: 5
-      })
-    });
-  }
-
-  afterEach(function() {
-    if (map) {
-      disposeMap(map);
-    }
-    map = null;
-  });
-
-  function waitForTiles(renderer, sources, layerOptions, onTileLoaded) {
-    const LayerConstructor = TileLayer;
-    let tilesLoading = 0;
-    let tileLoaded = 0;
-
-    const update = function() {
-      if (tilesLoading === tileLoaded) {
-        onTileLoaded();
-      }
-    };
-
-    sources.forEach(function(source, i) {
-      source.on('tileloadstart', function(event) {
-        tilesLoading++;
-      });
-      source.on('tileloadend', function(event) {
-        tileLoaded++;
-        update();
-      });
-      source.on('tileloaderror', function(event) {
-        expect().fail('Tile failed to load');
-      });
-
-      const options = {
-        source: source
-      };
-      assign(options, layerOptions[i] || layerOptions);
-      map.addLayer(new LayerConstructor(options));
-    });
-  }
-
-  describe('tile layer with render listener', function() {
-    let source, onAddLayer;
-
-    beforeEach(function() {
-      source = new XYZ({
-        url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
-        transition: 0
-      });
-      onAddLayer = function(evt) {
-        evt.element.on('render', function(e) {
-          e.vectorContext.setImageStyle(new CircleStyle({
-            radius: 5,
-            fill: new Fill({color: 'yellow'}),
-            stroke: new Stroke({color: 'red', width: 1})
-          }));
-          e.vectorContext.drawPoint(new Point(
-            transform([-123, 38], 'EPSG:4326', 'EPSG:3857')));
-        });
-      };
-    });
-
-    it('works with the canvas renderer', function(done) {
-      createMap('canvas', undefined, [100, 100]);
-      map.getLayers().on('add', onAddLayer);
-      waitForTiles('canvas', [source], {}, function() {
-        expectResemble(map, 'rendering/ol/layer/expected/render-canvas.png',
-          IMAGE_TOLERANCE, done);
-      });
-    });
-  });
-});