国际化

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

若你希望使用其他语言，你需要参考 vue-iclient-mapboxgl 语言文件 (opens new window)且合并 ant-design-vue 对应的语言文件内容 (opens new window)配置一个新语言资源文件，传入组件中。以英文为例，在 main.js 中：

// 完整引入Vue-iClient-MapboxGL
import Vue from 'vue';
import VueiClient from '@supermap/vue-iclient-mapboxgl';
import App from './App.vue';

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

或

// 按需引入Vue-iClient-MapboxGL
import Vue from 'vue';
import { Button } from '@supermap/vue-iclient-mapboxgl';
import { lang, locale } from '@supermap/vue-iclient-mapboxgl/lib/_lang';// 需要引用具体的路径

Vue.use(Button);

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

兼容 vue-i18n

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

传入 i18n

// 完整引入Vue-iClient-MapboxGL
import Vue from 'vue';
import VueiClient from '@supermap/vue-iclient-mapboxgl';
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');

或

// 按需引入Vue-iClient-MapboxGL
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import { Button } from '@supermap/vue-iclient-mapboxgl';
import { locale } from '@supermap/vue-iclient-mapboxgl/lib/_lang'; // 需要引用具体的路径

Vue.use(VueI18n);

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

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

Vue.use(locale, { i18n }); 
Vue.use(Button);
new Vue({ i18n }).$mount('#app');

手动进行合并

// 完整引入Vue-iClient-MapboxGL
import Vue from 'vue';
import VueiClient from '@supermap/vue-iclient-mapboxgl';
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');

或

// 按需引入Vue-iClient-MapboxGL
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import { Button } from '@supermap/vue-iclient-mapboxgl';
import { lang } from '@supermap/vue-iclient-mapboxgl/lib/_lang/index'; // 需要引用具体的路径

Vue.use(VueI18n);

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

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

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

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

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

搭配 vue-i18n 使用

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://iclient.supermap.io/dist/mapboxgl/iclient-mapboxgl-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>