diff --git a/examples/regularshape.html b/examples/regularshape.html index 990a9ec148..59cbf4b762 100644 --- a/examples/regularshape.html +++ b/examples/regularshape.html @@ -6,8 +6,9 @@ docs: > This example shows how several regular shapes or symbols (representing `x`, `cross`, `star`, `triangle`, `square` and `stacked`) can be created. + A `rectangle` is produced by scaling a square created without rotation. Style `stacked` represents possility to stack multiple shapes with offset -tags: "vector, symbol, regularshape, style, square, cross, star, triangle, x" +tags: "vector, symbol, regularshape, style, square, rectangle, cross, star, triangle, x" ---
diff --git a/examples/regularshape.js b/examples/regularshape.js index 83eab335d1..91279aea76 100644 --- a/examples/regularshape.js +++ b/examples/regularshape.js @@ -19,6 +19,17 @@ const styles = { angle: Math.PI / 4, }), }), + 'rectangle': new Style({ + image: new RegularShape({ + fill: fill, + stroke: stroke, + radius: 10 / Math.SQRT2, + radius2: 10, + points: 4, + angle: 0, + scale: [1, 0.5], + }), + }), 'triangle': new Style({ image: new RegularShape({ fill: fill, @@ -82,14 +93,24 @@ const styles = { ], }; -const styleKeys = ['x', 'cross', 'star', 'triangle', 'square', 'stacked']; +const styleKeys = [ + 'x', + 'cross', + 'star', + 'triangle', + 'square', + 'rectangle', + 'stacked', +]; const count = 250; const features = new Array(count); const e = 4500000; for (let i = 0; i < count; ++i) { const coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e]; features[i] = new Feature(new Point(coordinates)); - features[i].setStyle(styles[styleKeys[Math.floor(Math.random() * 6)]]); + features[i].setStyle( + styles[styleKeys[Math.floor(Math.random() * styleKeys.length)]] + ); } const source = new VectorSource({ diff --git a/rendering/cases/circle-style/expected.png b/rendering/cases/circle-style/expected.png index 84eef2b6e8..a72891b86e 100644 Binary files a/rendering/cases/circle-style/expected.png and b/rendering/cases/circle-style/expected.png differ diff --git a/rendering/cases/circle-style/main.js b/rendering/cases/circle-style/main.js index 7f9ac70aa7..d3e54dce06 100644 --- a/rendering/cases/circle-style/main.js +++ b/rendering/cases/circle-style/main.js @@ -8,6 +8,21 @@ import VectorLayer from '../../../src/ol/layer/Vector.js'; import VectorSource from '../../../src/ol/source/Vector.js'; import View from '../../../src/ol/View.js'; +const ellipse = new Feature(new Point([-50, -50])); + +ellipse.setStyle( + new Style({ + image: new Circle({ + radius: 30, + scale: [1, 0.5], + stroke: new Stroke({ + color: '#00f', + width: 3, + }), + }), + }) +); + const vectorSource = new VectorSource(); vectorSource.addFeatures([ @@ -23,6 +38,7 @@ vectorSource.addFeatures([ geometry: new Point([50, 50]), radius: 30, }), + ellipse, ]); const style = new Style({ diff --git a/rendering/cases/regularshape-style/expected.png b/rendering/cases/regularshape-style/expected.png index b89511eef3..f9ec11d499 100644 Binary files a/rendering/cases/regularshape-style/expected.png and b/rendering/cases/regularshape-style/expected.png differ diff --git a/rendering/cases/regularshape-style/main.js b/rendering/cases/regularshape-style/main.js index 6c201fb030..327e466db6 100644 --- a/rendering/cases/regularshape-style/main.js +++ b/rendering/cases/regularshape-style/main.js @@ -83,6 +83,25 @@ function createFeatures(stroke, fill, offSet = [0, 0]) { }) ); vectorSource.addFeature(feature); + + feature = new Feature({ + geometry: new Point([8 + offSet[0], 30 + offSet[1]]), + }); + // rectangle + feature.setStyle( + new Style({ + image: new RegularShape({ + fill: fill, + stroke: stroke, + radius: 10 / Math.SQRT2, + radius2: 10, + points: 4, + angle: 0, + scale: [1, 0.5], + }), + }) + ); + vectorSource.addFeature(feature); } createFeatures(new Stroke({width: 2}), new Fill({color: 'red'})); diff --git a/src/ol/style/Circle.js b/src/ol/style/Circle.js index f46d76ae90..3ff7a3285d 100644 --- a/src/ol/style/Circle.js +++ b/src/ol/style/Circle.js @@ -10,6 +10,8 @@ import RegularShape from './RegularShape.js'; * @property {number} radius Circle radius. * @property {import("./Stroke.js").default} [stroke] Stroke style. * @property {Array