国际化

Vue3 OpenLayers Styled Controls 支持国际化，可以轻松适配不同语言环境。

默认语言

组件库默认提供以下语言支持：

• 简体中文 (zh-CN)
• 英文 (en)

使用方式

1. 无需配置（默认行为）

组件库内置了默认的中英文翻译，即使您不进行任何国际化配置，组件也会正常显示默认语言（中文）的提示信息。

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

const app = createApp(App)

// 不进行任何国际化配置，组件将默认显示中文
app.use(OpenLayersControls)
app.mount('#app')

<template>
  <!-- 即使没有配置 i18n，组件也会显示中文提示 -->
  <ol-styled-zoom-in-control />
  <ol-styled-zoom-out-control />
</template>

2. 配置默认语言

您可以在安装插件时配置默认语言：

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

const app = createApp(App)

// 配置默认语言为英文
app.use(OpenLayersControls, {
  locale: 'en'
})

app.mount('#app')

3. 自定义语言资源

如果您需要自定义语言资源或添加更多语言：

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

const app = createApp(App)

// 配置自定义语言
app.use(OpenLayersControls, {
  locale: 'fr', // 设置默认语言为法语
  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')

在组件中使用

组件库中的控件会自动使用配置的语言：

<template>
  <!-- 控件会自动显示对应语言的 title -->
  <ol-styled-zoom-in-control />
  <ol-styled-zoom-out-control />
  <ol-styled-full-screen-control />
</template>