[Bug Report] Internationalization VueCesium components

[spatialhast]

VueCesium version

3.0.2-beta.4

OS/Browsers version

Windows 10 / Chrome 95.0.4638.69

Vue version

3.2.21

Cesium version

1.87.0

Reproduction Link

https://github.com/spatialhast/vue3-cesium

Steps to reproduce

• configure English language https://zouyaoji.top/vue-cesium/#/en-US/component/i18n

What is Expected?

language English

What is actually happening?

language Chinese

[zouyaoji]

This is a bug and will be fixed in the next version.Thanks for the feedback.

Currently you can use this solution to avoid this bug.

// main.js
import { createApp } from 'vue'
import 'vue-cesium/dist/index.css'
+++ import { use } from 'vue-cesium/es/locale'
import enUS from 'vue-cesium/es/locale/lang/en-us'
import App from './App.vue'
import './registerServiceWorker'

import router from './router'
import store from './store'

const app = createApp(App)

app.config.globalProperties.$VueCesium = {
  cesiumPath:
    process.env.NODE_ENV === 'production'
      ? `${process.env.VUE_APP_PUBLIC_PATH}Cesium/Cesium.js`
      : '/Cesium/Cesium.js',
  locale: enUS,
  accessToken: process.env.VUE_APP_CESIUM_ACCESS_TOKEN
}
+++ use(enUS)
app.use(store)
app.use(router)
app.mount('#app')

[zouyaoji]

@spatialhast
In the next version, the locale cannot be configured via app.config.globalProperties.$VueCesium.

Choose one of two options:

use vc-config-provider

<template>
  <vc-config-provider :locale="locale">
    <vc-viewer
      :infoBox="false"
      :showCredit="false"
      :baseLayerPicker="false"
      :fullscreenButton="false"
    >
      <vc-layer-imagery>
        <vc-provider-imagery-arcgis ref="provider"></vc-provider-imagery-arcgis>
      </vc-layer-imagery>

      <vc-navigation
        :offset="navigationOffset"
        :zoomOpts="zoomOpts"
        :otherOpts="otherOpts"
        :printOpts="printOpts"
        :locationOpts="false"
      ></vc-navigation>

      <vc-measurements
        ref="measurementsRef"
        position="top-left"
        :mainFabOpts="measurementFabOptions"
        :distanceMeasurementOpts="distanceMeasurementOpts"
        :componentDistanceMeasurementOpts="componentDistanceMeasurementOpts"
        :pointMeasurementOpts="pointMeasurementOpts"
        :editable="editable"
        :offset="[5, 5]"
      >
      </vc-measurements>

      <vc-primitive-tileset
        ref="primitive"
        :url="pointCloudUrl"
        @readyPromise="onReadyPromiseTileset"
        :baseScreenSpaceError="64"
        :maximumScreenSpaceError="2"
        :foveatedScreenSpaceError="false"
        :foveatedConeSize="undefined"
      >
      </vc-primitive-tileset>
      <vc-provider-terrain-cesium ref="provider"></vc-provider-terrain-cesium>
    </vc-viewer>
  </vc-config-provider>
</template>

<script>
import { defineComponent } from 'vue'
import enUS from 'vue-cesium/es/locale/lang/en-us'
import {
  VcConfigProvider,
  VcViewer,
  VcPrimitiveTileset,
  VcLayerImagery,
  VcProviderImageryArcgis,
  VcProviderTerrainCesium,
  VcNavigation,
  VcMeasurements,
  DistanceUnits,
  AngleUnits
} from 'vue-cesium'

export default defineComponent({
  name: 'MapCesium',

  data () {
    return {
      pointCloudUrl:
        'https://zouyaoji.top/vue-cesium/SampleData/Cesium3DTiles/Tilesets/dayanta/tileset.json',
      locale: enUS,
      navigationOffset: [5, 400],
      printOpts: false,
      otherOpts: {
        offset: [0, 0],
        position: 'bottom-right'
      },
      zoomOpts: {
        defaultResetView: {
          position: {
            lng: 6.53646,
            lat: 46.58347,
            height: 2500
          }
        }
      },

      editable: true,
      measurementFabOptions: {
        direction: 'right',
        autoExpand: false,
        color: 'primary'
      },
      distanceMeasurementOpts: {
        measureUnits: {
          distanceUnits: DistanceUnits.METERS,
          angleUnits: AngleUnits.RADIANS
        },
        decimals: {
          distance: 2,
          angle: 3
        }
      },
      componentDistanceMeasurementOpts: {
        measureUnits: {
          distanceUnits: DistanceUnits.METERS,
          angleUnits: AngleUnits.RADIANS
        },
        decimals: {
          distance: 2,
          angle: 3
        }
      },
      pointMeasurementOpts: {
        measureUnits: {
          distanceUnits: DistanceUnits.METERS,
          angleUnits: AngleUnits.DEGREES_MINUTES_SECONDS,
          slopeUnits: AngleUnits.DEGREES
        },
        decimals: {
          lng: 3,
          lat: 3,
          height: 2,
          slope: 3
        }
      }
    }
  },

  components: {
    VcConfigProvider,
    VcViewer,
    VcLayerImagery,
    VcNavigation,
    VcMeasurements,
    VcPrimitiveTileset,
    VcProviderImageryArcgis,
    VcProviderTerrainCesium
  },

  methods: {
    onReadyPromiseTileset (tileset, viewer) {
      tileset.pointCloudShading.attenuation = true
      tileset.pointCloudShading.eyeDomeLighting = true

      viewer.camera.flyToBoundingSphere(
        tileset.root.contentBoundingVolume.boundingSphere,
        { duration: 0.1 }
      )
    }
  }
})
</script>

or

Import on demand as plugin

// main.js
import { VcViewer } from 'vue-cesium'
import enUS from 'vue-cesium/es/locale/lang/en-us'

app.use(VcViewer, {
  cesiumPath:
    process.env.NODE_ENV === 'production'
      ? `${process.env.VUE_APP_PUBLIC_PATH}Cesium/Cesium.js`
      : '/Cesium/Cesium.js',
  locale: enUS,
  accessToken: process.env.VUE_APP_CESIUM_ACCESS_TOKEN
})

<template>
  <vc-viewer
    :infoBox="false"
    :showCredit="false"
    :baseLayerPicker="false"
    :fullscreenButton="false"
  >
    <vc-layer-imagery>
      <vc-provider-imagery-arcgis ref="provider"></vc-provider-imagery-arcgis>
    </vc-layer-imagery>

    <vc-navigation
      :offset="navigationOffset"
      :zoomOpts="zoomOpts"
      :otherOpts="otherOpts"
      :printOpts="printOpts"
      :locationOpts="false"
    ></vc-navigation>

    <vc-measurements
      ref="measurementsRef"
      position="top-left"
      :mainFabOpts="measurementFabOptions"
      :distanceMeasurementOpts="distanceMeasurementOpts"
      :componentDistanceMeasurementOpts="componentDistanceMeasurementOpts"
      :pointMeasurementOpts="pointMeasurementOpts"
      :editable="editable"
      :offset="[5, 5]"
    >
    </vc-measurements>

    <vc-primitive-tileset
      ref="primitive"
      :url="pointCloudUrl"
      @readyPromise="onReadyPromiseTileset"
      :baseScreenSpaceError="64"
      :maximumScreenSpaceError="2"
      :foveatedScreenSpaceError="false"
      :foveatedConeSize="undefined"
    >
    </vc-primitive-tileset>
    <vc-provider-terrain-cesium ref="provider"></vc-provider-terrain-cesium>
  </vc-viewer>
</template>

<script>
import { defineComponent } from 'vue'
import {
  VcPrimitiveTileset,
  VcLayerImagery,
  VcProviderImageryArcgis,
  VcProviderTerrainCesium,
  VcNavigation,
  VcMeasurements,
  DistanceUnits,
  AngleUnits
} from 'vue-cesium'

export default defineComponent({
  name: 'MapCesium',

  data () {
    return {
      pointCloudUrl:
        'https://zouyaoji.top/vue-cesium/SampleData/Cesium3DTiles/Tilesets/dayanta/tileset.json',
      navigationOffset: [5, 400],
      printOpts: false,
      otherOpts: {
        offset: [0, 0],
        position: 'bottom-right'
      },
      zoomOpts: {
        defaultResetView: {
          position: {
            lng: 6.53646,
            lat: 46.58347,
            height: 2500
          }
        }
      },

      editable: true,
      measurementFabOptions: {
        direction: 'right',
        autoExpand: false,
        color: 'primary'
      },
      distanceMeasurementOpts: {
        measureUnits: {
          distanceUnits: DistanceUnits.METERS,
          angleUnits: AngleUnits.RADIANS
        },
        decimals: {
          distance: 2,
          angle: 3
        }
      },
      componentDistanceMeasurementOpts: {
        measureUnits: {
          distanceUnits: DistanceUnits.METERS,
          angleUnits: AngleUnits.RADIANS
        },
        decimals: {
          distance: 2,
          angle: 3
        }
      },
      pointMeasurementOpts: {
        measureUnits: {
          distanceUnits: DistanceUnits.METERS,
          angleUnits: AngleUnits.DEGREES_MINUTES_SECONDS,
          slopeUnits: AngleUnits.DEGREES
        },
        decimals: {
          lng: 3,
          lat: 3,
          height: 2,
          slope: 3
        }
      }
    }
  },

  components: {
    VcLayerImagery,
    VcNavigation,
    VcMeasurements,
    VcPrimitiveTileset,
    VcProviderImageryArcgis,
    VcProviderTerrainCesium
  },

  methods: {
    onReadyPromiseTileset (tileset, viewer) {
      tileset.pointCloudShading.attenuation = true
      tileset.pointCloudShading.eyeDomeLighting = true

      viewer.camera.flyToBoundingSphere(
        tileset.root.contentBoundingVolume.boundingSphere,
        { duration: 0.1 }
      )
    }
  }
})
</script>