ol-style-fill
Color the filling of a polygon or mulipolygon in a vector layer
Use it inside ol-style, ol-style-circle, ol-style-text along with ol-style-stroke to style polygons and other shapes with area like circles.
Demo
Setup
Plugin usage
This component is part of the Styles plugin. If not installed globally, you need to import and use the plugin in your main.ts or use the explicit component import (see section below).
Import and use the Styles plugin
ts
import { createApp } from "vue";
import App from "./App.vue";
import {
Map,
Layers,
Sources,
Styles,
} from "vue3-openlayers";
const app = createApp(App);
// ...
app.use(Styles);
// ...Explicit import
If you don't want to install a plugin, you can import the component explicitly. It's available as a child of the named export Styles.
NOTE
The following documentation refers to the plugin usage. Please make sure to adopt the component names, when you decided to use explicit component imports (e. g. <ol-map> becomes <Map.OlMap> etc.).
Usage
| Plugin Usage | Explicit Import |
|---|---|
<ol-style-fill> | <Styles.OlStyleFill> |
Styling a feature
vue
<template>
<ol-map
:loadTilesWhileAnimating="true"
:loadTilesWhileInteracting="true"
style="height: 400px"
>
<ol-view
ref="view"
:center="center"
:zoom="zoom"
:projection="projection"
/>
<ol-tile-layer>
<ol-source-osm />
</ol-tile-layer>
<ol-vector-layer>
<ol-source-vector>
<ol-feature>
<ol-geom-polygon
:coordinates="[
[
[-98.844959, 19.691586],
[-98.842749, 19.69098],
[-98.84217, 19.693122],
[-98.844358, 19.693667],
[-98.844959, 19.691586],
],
[
[-98.84573034297229, 19.691206743587088],
[-98.84236332851385, 19.69026183008994],
[-98.84133866368556, 19.69351739026062],
[-98.8447693829186, 19.694312532467134],
[-98.84573034297229, 19.691206743587088],
],
]"
></ol-geom-polygon>
<ol-style>
<ol-style-stroke color="red" :width="2"></ol-style-stroke>
<ol-style-fill color="rgba(255,0,0,0.2)"></ol-style-fill>
</ol-style>
</ol-feature>
<ol-feature>
<ol-geom-polygon
:coordinates="[
[
[-98.848559, 19.680586],
[-98.845949, 19.68098],
[-98.846947, 19.68522],
[-98.848358, 19.685667],
[-98.846959, 19.683586],
],
]"
></ol-geom-polygon>
<ol-style>
<ol-style-fill color="red" />
</ol-style>
</ol-feature>
<ol-feature>
<ol-geom-polygon
:coordinates="[
[
[-98.858559, 19.680586],
[-98.855949, 19.68098],
[-98.85617, 19.68522],
[-98.858358, 19.685667],
[-98.856959, 19.683586],
],
]"
></ol-geom-polygon>
<ol-style>
<ol-style-fill :gradient="linearGradient" />
</ol-style>
</ol-feature>
<ol-feature>
<ol-geom-polygon
:coordinates="[
[
[-98.856559, 19.680586],
[-98.855949, 19.68098],
[-98.855917, 19.68522],
[-98.848558, 19.685667],
[-98.848959, 19.678586],
],
]"
></ol-geom-polygon>
<ol-style>
<ol-style-fill :gradient="radialGradient" />
</ol-style>
</ol-feature>
<ol-feature>
<ol-geom-polygon
:coordinates="[
[
[-98.8435, 19.680586],
[-98.838, 19.68098],
[-98.835, 19.68522],
[-98.843, 19.685667],
[-98.835, 19.683586],
],
]"
></ol-geom-polygon>
<ol-style>
<ol-style-fill :gradient="conicGradient" />
</ol-style>
</ol-feature>
</ol-source-vector>
</ol-vector-layer>
</ol-map>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import type {
LinearGradient,
RadialGradient,
ConicGradient,
} from "vue3-openlayers";
const center = ref([-98.8449, 19.6869]);
const projection = ref("EPSG:4326");
const zoom = ref(15);
const linearGradient: LinearGradient = {
type: "linear",
x0: 0,
y0: 0,
x1: 0,
y1: 256,
colorStops: [
[0.1, "red"], // Start color
[0.5, "yellow"], // Middle color
[1, "green"], // End color
],
};
const radialGradient: RadialGradient = {
type: "radial",
x0: 128,
y0: 128,
r0: 0,
x1: 128,
y1: 128,
r1: 128,
colorStops: [
[0, "blue"], // Center color
[0.5, "cyan"], // Middle color
[1, "white"], // Edge color
],
};
const conicGradient: ConicGradient = {
type: "conic",
x: 100,
y: 100,
startAngle: 100,
colorStops: [
[0, "red"],
[0.25, "orange"],
[0.5, "yellow"],
[0.75, "green"],
[1, "blue"],
],
};
</script>Properties
You need to pass either a color or a gradient.
color
- Type:
Number
The color either in hexadecimal or as RGB array with red, green, and blue values between 0 and 255 and alpha between 0 and 1 inclusive.
gradient
- Type:
LinearGradient | RadialGradient | ConicGradient
Details for the gradient configuration
LinearGradient
jsonc
{
"type": "linear",
"x0": 0, // x-coordinate of the starting point. Indicates the horizontal position where the gradient starts.
"y0": 0, // y-coordinate of the starting point. Indicates the vertical position where the gradient starts.
"x1": 0, // x-coordinate of the ending point. This is the horizontal position where the gradient ends. It’s the same as x0, meaning the gradient is vertical.
"y1": 256, // y-coordinate of the ending point. Indicates the vertical position where the gradient ends, extending the gradient to y = 256.
"colorStops": [
[0, "red"], // Start color at position 0. The color at the beginning of the gradient is red.
[0.5, "yellow"], // Middle color at position 0.5. The color at the midpoint of the gradient (y = 128) is yellow.
[1, "green"] // End color at position 1. The color at the end of the gradient (y = 256) is green.
]
}RadialGradient
jsonc
{
"type": "radial",
"x0": 128, // x-coordinate of the starting circle's center. Specifies the horizontal position of the starting circle.
"y0": 128, // y-coordinate of the starting circle's center. Specifies the vertical position of the starting circle.
"r0": 0, // Radius of the starting circle. Here, it's 0, meaning the gradient starts at a single point.
"x1": 128, // x-coordinate of the ending circle's center. Same as x0, so the ending circle is centered at the same horizontal position.
"y1": 128, // y-coordinate of the ending circle's center. Same as y0, so the ending circle is centered at the same vertical position.
"r1": 128, // Radius of the ending circle. Specifies the radius of the circle where the gradient ends, extending to a radius of 128 units.
"colorStops": [
[0, "blue"], // Color at the center of the gradient (r = 0). The color at the very center of the radial gradient is blue.
[0.5, "cyan"], // Color at the midpoint of the gradient. At the midpoint of the radius (r = 64), the color is cyan.
[1, "white"] // Color at the edge of the gradient (r = 128). The color at the outer edge of the radial gradient is white.
]
}ConicGradient
jsonc
{
"type": "conic",
"x": 0, // x-axis coordinate of the center of the gradient.
"y": 0, // y-axis coordinate of the center of the gradient.
"startAngle": 0, // The angle at which to begin the gradient, in radians. The angle starts from a line going horizontally right from the center, and proceeds clockwise.
"colorStops": [
[0, "red"], // Start color at position 0. The color at the beginning of the gradient is red.
[0.5, "yellow"], // Middle color at position 0.5. The color at the midpoint of the gradient (y = 128) is yellow.
[1, "green"] // End color at position 1. The color at the end of the gradient (y = 256) is green.
]
}