# 国际化

Vue-iClient3D-WebGL 组件内置了中英文资源，组件内部默认使用中文。

若你希望使用其他语言，你需要参考[此文件](https://github.com/SuperMap/vue-iclient/blob/master/src/common/_lang/zh.js)配置一个语言资源文件，传入组件中。以英文为例，在 main.js 中：

```js
import Vue from 'vue';
import VueiClient from '@supermap/vue-iclient3d-webgl';
import App from './App.vue';

Vue.use(VueiClient, { locale: VueiClient.lang.en }); // VueiClient.lang.en 为内置英文资源文件
```

### 兼容 vue-i18n

如果你的项目中使用了 vue-i18n，你有两种方式来进行兼容。

#### 传入 i18n

```js
import Vue from 'vue';
import VueiClient from '@supermap/vue-iclient3d-webgl';
import VueI18n from 'vue-i18n';
import App from './App.vue';

Vue.use(VueI18n);

const messages = {
  en: {
    message: { hello: 'hello' }
  },
  zh: {
    message: { hello: '你好' }
  }
};

const i18n = new VueI18n({
  locale: 'en', // 设置地区
  messages // 设置地区信息
});

Vue.use(VueiClient, { i18n });

new Vue({ i18n }).$mount('#app');
```

#### 手动进行合并

```js
import Vue from 'vue';
import VueiClient from '@supermap/vue-iclient3d-webgl';
import VueI18n from 'vue-i18n';
import App from './App.vue';

Vue.use(VueI18n);
Vue.use(VueiClient);

const messages = {
  en: {
    message: { hello: 'hello' },
    ...VueiClient.lang.en // 或者用 Object.assign({ message: 'hello' }, VueiClient.lang.en)
  },
  zh: {
    message: { hello: '你好' },
    ...VueiClient.lang.zh // 或者用 Object.assign({ message: '你好' }, VueiClient.lang.zh)
  }
};

const i18n = new VueI18n({
  locale: 'en', // 设置地区
  messages // 设置地区信息
});

new Vue({ i18n }).$mount('#app');
```

### 通过 CDN 的方式加载语言文件

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://iclient.supermap.io/dist/mapboxgl/iClient3D-WebGL-vue.min.js"></script>
<script>
  SuperMap.Components.locale(SuperMap.Components.lang.en);
</script>
```

#### 搭配 vue-i18n 使用

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://iclient.supermap.io/dist/mapboxgl/iClient3D-WebGL-vue.min.js"></script>
<script>
  Vue.locale = () => {};

  const messages = {
    en: Object.assign({ message: 'hello' }, SuperMap.Components.lang.en),
    zh: Object.assign({ message: '你好' }, SuperMap.Components.lang.zh)
  };
  const i18n = new VueI18n({
    locale: 'en', // 设置地区
    messages // 设置地区信息
  });

  new Vue({
    el: '#app',
    i18n: i18n
  });
</script>
```
