Closed spatialhast closed 2 years ago
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')
@spatialhast
In the next version, the locale cannot be configured via app.config.globalProperties.$VueCesium
.
Choose one of two options:
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
// 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>
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
What is Expected?
language English
What is actually happening?
language Chinese