vue3-openlayers

Appearance

ol-style-text ​

Style the text of a shape

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 UsageExplicit Import
<ol-style-text><Styles.OlStyleText>

Add text to shapes

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],
              ],
            ]"
          ></ol-geom-polygon>
          <ol-style>
            <ol-style-stroke
              :color="strokeColor"
              :width="strokeWidth"
            ></ol-style-stroke>
            <ol-style-fill color="white" :width="strokeWidth"></ol-style-fill>
            <ol-style-text text="Hellooooo"></ol-style-text>
          </ol-style>
        </ol-feature>
      </ol-source-vector>
    </ol-vector-layer>
  </ol-map>
</template>

<script setup>
import { ref } from "vue";

const center = ref([-98.8449, 19.6869]);
const projection = ref("EPSG:4326");
const zoom = ref(15);
const strokeWidth = ref(10);
const strokeColor = ref("red");
</script>

Properties ​

font ​

  • Type: String

maxAngle ​

  • Type: Number
  • Default: Math.PI / 4

offsetX ​

  • Type: Number
  • Default: 0

offsetY ​

  • Type: Number
  • Default: 0

overflow ​

  • Type: Boolean
  • Default: false

placement ​

  • Type: String
  • Default: point

scale ​

  • Type: Number

rotateWithView ​

  • Type: Boolean
  • Default: false

rotation ​

  • Type: Number
  • Default: 0

text ​

  • Type: String

textAlign ​

  • Type: String

textBaseline ​

  • Type: String
  • Default: middle

padding ​

  • Type: Array
  • Default: () => [0, 0, 0, 0]

backgroundFill ​

  • Type: array, string

Fill color for the text background when placement is 'point'. Default is no fill. Either in hexadecimal or as RGBA array with red, green, and blue values betweeen 0 and 255 and alpha value between 0 and 1 inclusive.

backgroundStroke ​

  • Type: Object

Stroke style for the text background when placement is 'point'. Default is no stroke. Please see ol-style-stroke for available options.

fill ​

  • Type: array, string

Fill color for the text. Default is '#333'. Either in hexadecimal or as RGBA array with red, green, and blue values betweeen 0 and 255 and alpha value between 0 and 1 inclusive.

stroke ​

  • Type: Object

Stroke style for the text. Default is no stroke. Please see ol-style-stroke for available options.