Port polygon-style rendering test

rendering/cases/polygon-style-gradient-pattern/main.js

@@ -0,0 +1,84 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import Feature from '../../../src/ol/Feature.js';
+import Polygon from '../../../src/ol/geom/Polygon.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import Style from '../../../src/ol/style/Style.js';
+import Fill from '../../../src/ol/style/Fill.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+
+
+// create gradient
+const canvas = document.createElement('canvas');
+const context = canvas.getContext('2d');
+const gradient = context.createLinearGradient(0, 0, 30, 0);
+gradient.addColorStop(0, 'red');
+gradient.addColorStop(1 / 6, 'orange');
+gradient.addColorStop(2 / 6, 'yellow');
+gradient.addColorStop(3 / 6, 'green');
+gradient.addColorStop(4 / 6, 'aqua');
+gradient.addColorStop(5 / 6, 'blue');
+gradient.addColorStop(1, 'purple');
+
+// create pattern
+canvas.width = 11;
+canvas.height = 11;
+context.fillStyle = 'rgba(102, 0, 102, 0.5)';
+context.beginPath();
+context.arc(5, 5, 4, 0, 2 * Math.PI);
+context.fill();
+context.fillStyle = 'rgb(55, 0, 170)';
+context.beginPath();
+context.arc(5, 5, 2, 0, 2 * Math.PI);
+context.fill();
+const pattern = context.createPattern(canvas, 'repeat');
+
+
+const vectorSource = new VectorSource();
+let feature;
+
+// rectangle with 1 hole
+feature = new Feature({
+  geometry: new Polygon([
+    [[-22.5, -5], [-22.5, 35], [37.5, 35], [37.5, -5], [-22.5, -5]],
+    [[-2.5, 7], [17.5, 7], [17.5, 23], [-2.5, 23], [-2.5, 7]]
+  ])
+});
+
+feature.setStyle(new Style({
+  fill: new Fill({color: pattern}),
+  stroke: new Stroke({color: gradient, width: 3})
+}));
+vectorSource.addFeature(feature);
+
+// rectangle with 2 holes
+feature = new Feature({
+  geometry: new Polygon([
+    [[-37.5, -32.5], [-37.5, 17.5], [32.5, 17.5], [32.5, -32.5], [-37.5, -32.5]],
+    [[-33.5, -28.5], [-21.5, -28.5], [-21.5, -16.5], [-33.5, -16.5], [-33.5, -28.5]],
+    [[12.5, -28.5], [26.5, -28.5], [26.5, -16.5], [12.5, -16.5], [12.5, -28.5]]
+  ])
+});
+
+feature.setStyle(new Style({
+  fill: new Fill({color: gradient}),
+  stroke: new Stroke({color: pattern, width: 5})
+}));
+vectorSource.addFeature(feature);
+
+new Map({
+  pixelRatio: 1,
+  layers: [
+    new VectorLayer({
+      source: vectorSource
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    resolution: 1
+  })
+});
+
+render();

rendering/cases/polygon-style/main.js

@@ -0,0 +1,100 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import Feature from '../../../src/ol/Feature.js';
+import Polygon from '../../../src/ol/geom/Polygon.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import Style from '../../../src/ol/style/Style.js';
+import Fill from '../../../src/ol/style/Fill.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+
+const vectorSource = new VectorSource();
+let feature;
+
+// rectangle with 1 hole
+feature = new Feature({
+  geometry: new Polygon([
+    [[-102.5, 75], [-102.5, 115], [-42.5, 115], [-42.5, 75], [-102.5, 75]],
+    [[-82.5, 87], [-62.5, 87], [-62.5, 103], [-82.5, 103], [-82.5, 87]]
+  ])
+});
+
+feature.setStyle(new Style({
+  stroke: new Stroke({
+    width: 4,
+    color: '#000',
+    lineJoin: 'round',
+    lineCap: 'butt'
+  })
+}));
+vectorSource.addFeature(feature);
+
+// rectangle with 2 holes
+feature = new Feature({
+  geometry: new Polygon([
+    [[-117.5, 47.5], [-117.5, 97.5], [-47.5, 97.5], [-47.5, 47.5], [-117.5, 47.5]],
+    [[-113.5, 51.5], [-101.5, 51.5], [-101.5, 63.5], [-113.5, 63.5], [-113.5, 51.5]],
+    [[-67.5, 51.5], [-53.5, 51.5], [-53.5, 63.5], [-67.5, 63.5], [-67.5, 51.5]]
+  ])
+});
+
+feature.setStyle(new Style({
+  zIndex: -1,
+  fill: new Fill({
+    color: '#1A5E42'
+  }),
+  stroke: new Stroke({
+    color: '#9696EB',
+    width: 3
+  })
+}));
+vectorSource.addFeature(feature);
+
+
+// rectangle with 1 hole
+feature = new Feature({
+  geometry: new Polygon([
+    [[-22.5, -5], [-22.5, 35], [37.5, 35], [37.5, -5], [-22.5, -5]],
+    [[-2.5, 7], [17.5, 7], [17.5, 23], [-2.5, 23], [-2.5, 7]]
+  ])
+});
+feature.setStyle(new Style({
+  stroke: new Stroke({
+    width: 3,
+    color: '#777',
+    lineDash: [2, 4]
+  })
+}));
+vectorSource.addFeature(feature);
+
+// rectangle with 2 holes
+feature = new Feature({
+  geometry: new Polygon([
+    [[-37.5, -32.5], [-37.5, 17.5], [32.5, 17.5], [32.5, -32.5], [-37.5, -32.5]],
+    [[-33.5, -28.5], [-21.5, -28.5], [-21.5, -16.5], [-33.5, -16.5], [-33.5, -28.5]],
+    [[12.5, -28.5], [26.5, -28.5], [26.5, -16.5], [12.5, -16.5], [12.5, -28.5]]
+  ])
+});
+feature.setStyle(new Style({
+  fill: new Fill({
+    color: 'rgba(255, 0, 0, 0.85)'
+  })
+}));
+vectorSource.addFeature(feature);
+
+
+new Map({
+  pixelRatio: 1,
+  layers: [
+    new VectorLayer({
+      source: vectorSource
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    resolution: 1
+  })
+});
+
+render();