add rendering test for vector tiles masking

test/rendering/cases/webgl-vectortile-masking/main.js

@@ -0,0 +1,96 @@
+import Map from '../../../../src/ol/Map.js';
+import Polygon from '../../../../src/ol/geom/Polygon.js';
+import RenderFeature from '../../../../src/ol/render/Feature.js';
+import VectorTile from '../../../../src/ol/layer/VectorTile.js';
+import VectorTileSource from '../../../../src/ol/source/VectorTile.js';
+import View from '../../../../src/ol/View.js';
+import WebGLVectorTileLayerRenderer from '../../../../src/ol/renderer/webgl/VectorTileLayer.js';
+
+const source = new VectorTileSource({
+  tileSize: 64,
+  url: '{z}/{x}/{y}',
+  tileLoadFunction: (tile) => {
+    const z = tile.tileCoord[0];
+    if (z > 2 && tile.tileCoord[1] > tile.tileCoord[2]) {
+      return;
+    }
+    const extent = source.getTileGrid().getTileCoordExtent(tile.tileCoord);
+    const delta = (extent[2] - extent[0]) * 0.1;
+    const square = new Polygon([
+      [
+        [extent[0] + 2 * delta, extent[1] + 2 * delta],
+        [extent[2] - 2 * delta, extent[1] + 2 * delta],
+        [extent[2] - 2 * delta, extent[3] - 2 * delta],
+        [extent[0] + 2 * delta, extent[3] - 2 * delta],
+        [extent[0] + 2 * delta, extent[1] + 2 * delta],
+      ],
+    ]);
+    const innerSquare = new Polygon([
+      [
+        [extent[0] + 4 * delta, extent[1] + 4 * delta],
+        [extent[2] - 4 * delta, extent[1] + 4 * delta],
+        [extent[2] - 4 * delta, extent[3] - 4 * delta],
+        [extent[0] + 4 * delta, extent[3] - 4 * delta],
+        [extent[0] + 4 * delta, extent[1] + 4 * delta],
+      ],
+    ]);
+
+    const features = [
+      new RenderFeature(
+        'Polygon',
+        square.getFlatCoordinates(),
+        square.getEnds(),
+        {},
+        1
+      ),
+      new RenderFeature(
+        'Polygon',
+        innerSquare.getFlatCoordinates(),
+        innerSquare.getEnds(),
+        {},
+        2
+      ),
+    ];
+    tile.setFeatures(features);
+  },
+});
+
+class WebGLVectorTileLayer extends VectorTile {
+  createRenderer() {
+    return new WebGLVectorTileLayerRenderer(this, {
+      className: this.getClassName(),
+      style: {
+        'fill-color': '#eee',
+        'stroke-color': 'rgb(136,136,136, 0.5)',
+        'stroke-width': 2,
+        'circle-radius': 2,
+        'circle-fill-color': '#707070',
+      },
+    });
+  }
+}
+
+const map = new Map({
+  pixelRatio: 2,
+  layers: [
+    new WebGLVectorTileLayer({
+      source,
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, -100000000],
+    zoom: 0,
+  }),
+});
+map.getView().setRotation(Math.PI / 8);
+setTimeout(() => {
+  map.getView().setZoom(1);
+  setTimeout(() => {
+    render({
+      message:
+        'Vector tiles from lower zoom levels are hidden by higher zoom levels',
+      tolerance: 0.001,
+    });
+  }, 5);
+}, 5);