Internationalization

Vue3 OpenLayers Styled Controls supports internationalization (i18n), making it easy to adapt to different languages.

Default Languages

The library provides the following built-in languages:

• Simplified Chinese (zh-CN)
• English (en)

Usage

1. No Configuration Needed (Default Behavior)

The library comes with built-in Chinese and English translations. Even if you do not configure i18n, the components will display default language (Chinese) messages.

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import OpenLayersStyledControls from 'vue3-openlayers-styled-controls'

const app = createApp(App)

// No i18n configuration, components will display Chinese by default
app.use(OpenLayersStyledControls)
app.mount('#app')

<template>
  <!-- Even without i18n config, components show Chinese messages -->
  <ol-styled-zoom-in-control />
  <ol-styled-zoom-out-control />
</template>

2. Set Default Language

You can set the default language when installing the plugin:

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import OpenLayersStyledControls from 'vue3-openlayers-styled-controls'

const app = createApp(App)

// Set default language to English
app.use(OpenLayersStyledControls, {
  locale: 'en'
})

app.mount('#app')

3. Custom Language Resources

If you need to add or customize language resources:

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import OpenLayersControls from 'vue3-openlayers-styled-controls'

const app = createApp(App)

// Set custom language (example: French)
app.use(OpenLayersControls, {
  locale: 'fr', // Set default language to French
  messages: {
    fr: {
      zoomIn: {
        title: 'Zoom avant'
      },
      zoomOut: {
        title: 'Zoom arrière'
      },
      fullScreen: {
        enter: 'Plein écran',
        exit: 'Quitter le plein écran'
      },
      measureLength: {
        title: 'Mesurer la distance',
        stop: 'Arrêter la mesure',
        startHelp: 'Cliquez pour commencer à dessiner',
        continueHelp: 'Cliquez pour continuer à dessiner la ligne'
      },
      measureArea: {
        title: 'Mesurer la surface',
        stop: 'Arrêter la mesure',
        startHelp: 'Cliquez pour commencer à dessiner',
        continueHelp: 'Cliquez pour continuer à dessiner le polygone',
        squareMeters: 'mètres carrés',
        squareKilometers: 'kilomètres carrés'
      },
      clear: {
        title: 'Effacer'
      },
      swipe: {
        title: 'Balayage'
      },
      baseLayerSwitcher: {
        title: 'Changer de fond de carte'
      }
    }
  }
})

app.mount('#app')

Add More Languages

To add more language support:

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import OpenLayersControls from 'vue3-openlayers-styled-controls'

const app = createApp(App)

// Add Spanish support
app.use(OpenLayersControls, {
  locale: 'es', // Set default language to Spanish
  messages: {
    es: {
      zoomIn: {
        title: 'Acercar'
      },
      zoomOut: {
        title: 'Alejar'
      },
      fullScreen: {
        enter: 'Pantalla completa',
        exit: 'Salir de pantalla completa'
      },
      measureLength: {
        title: 'Medir distancia',
        stop: 'Detener medición'
      },
      measureArea: {
        title: 'Medir área',
        stop: 'Detener medición'
      },
      clear: {
        title: 'Limpiar'
      },
      swipe: {
        title: 'Deslizar'
      },
      baseLayerSwitcher: {
        title: 'Cambiar capa base'
      }
    }
  }
})

app.mount('#app')

Implementation Principle

The library uses a flexible i18n implementation:

1. Built-in translations: Chinese and English are built-in, with Chinese as the default display language
2. Plugin configuration: You can configure the default language and custom translations via the options parameter when installing the plugin
3. Global state management: Language configuration is managed globally, all controls share the same language config
4. No dependency design: Does not require vue-i18n, you can choose to use more advanced i18n solutions if needed

This approach ensures:

• The library works out of the box in any environment
• Easy configuration for projects needing i18n support
• No forced extra dependencies
• Supports runtime language switching