add example to regularshape
This commit is contained in:
committed by
Andreas Hocevar
parent
1506e13b60
commit
ee1b038714
@@ -5,7 +5,9 @@ shortdesc: Example of some Regular Shape styles.
|
|||||||
docs: >
|
docs: >
|
||||||
This example shows how several regular shapes
|
This example shows how several regular shapes
|
||||||
or symbols (representing `x`, `cross`, `star`,
|
or symbols (representing `x`, `cross`, `star`,
|
||||||
`triangle` and `square`) can be created.
|
`triangle`, `square` and `stacked`) can be created.
|
||||||
|
|
||||||
|
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, cross, star, triangle, x"
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
|
|||||||
@@ -59,18 +59,39 @@ const styles = {
|
|||||||
radius2: 0,
|
radius2: 0,
|
||||||
angle: Math.PI / 4
|
angle: Math.PI / 4
|
||||||
})
|
})
|
||||||
})
|
}),
|
||||||
|
'stacked': [
|
||||||
|
new Style({
|
||||||
|
image: new RegularShape({
|
||||||
|
fill: fill,
|
||||||
|
stroke: stroke,
|
||||||
|
points: 4,
|
||||||
|
radius: 5,
|
||||||
|
angle: Math.PI / 4,
|
||||||
|
offset: [0, 10]
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
new Style({
|
||||||
|
image: new RegularShape({
|
||||||
|
fill: fill,
|
||||||
|
stroke: stroke,
|
||||||
|
points: 4,
|
||||||
|
radius: 10,
|
||||||
|
angle: Math.PI / 4
|
||||||
|
})
|
||||||
|
})
|
||||||
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const styleKeys = ['x', 'cross', 'star', 'triangle', 'square'];
|
const styleKeys = ['x', 'cross', 'star', 'triangle', 'square', 'stacked'];
|
||||||
const count = 250;
|
const count = 250;
|
||||||
const features = new Array(count);
|
const features = new Array(count);
|
||||||
const e = 4500000;
|
const e = 4500000;
|
||||||
for (let i = 0; i < count; ++i) {
|
for (let i = 0; i < count; ++i) {
|
||||||
const coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
|
const coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
|
||||||
features[i] = new Feature(new Point(coordinates));
|
features[i] = new Feature(new Point(coordinates));
|
||||||
features[i].setStyle(styles[styleKeys[Math.floor(Math.random() * 5)]]);
|
features[i].setStyle(styles[styleKeys[Math.floor(Math.random() * 6)]]);
|
||||||
}
|
}
|
||||||
|
|
||||||
const source = new VectorSource({
|
const source = new VectorSource({
|
||||||
|
|||||||
Reference in New Issue
Block a user