依据项目需求,使用Vue for Cesium ,链接:https://zouyaoji.top/vue-cesium/#/zh-CN
执行
npm install vue-cesium@next --save
全量导入
如果你对打包后的文件大小不是很在乎,那么你可以使用 Vue 的 插件 安装方式配置到全局。
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueCesium from 'vue-cesium'
// import Cesium from 'cesium'
import 'vue-cesium/dist/index.css'
createApp(App).use(store).use(router).use(VueCesium).mount('#app')
配置 Vue for Cesium
你可以对 Vue for Cesium 做一些自定义的配置:
import enUS from 'vue-cesium/es/locale/lang/en-us'
app.use(VueCesium, {
cesiumPath: 'path/to/Cesium.js',
accessToken: '你的 Cesium Ion 访问令牌',
locale: enUS // 改成英文
})
使用
<vc-viewer ref="vcViewer" :animation="animation" :base-layer-picker="baseLayerPicker" :timeline="timeline"
:fullscreen-button="fullscreenButton" :fullscreen-element="fullscreenElement" :info-box="infoBox"
:skyAtmosphere="false" :skyBox="false" :scene-mode-picker="true" :show-credit="showCredit"
@cesium-ready="onCesiumReady" @ready="onViewerReady" @left-click="onLeftClick" @touch-end="onTouchEnd">
<vc-navigation :offset="offset" @compass-evt="onNavigationEvt" :other-opts="otherOpts"
@zoom-evt="onNavigationEvt"></vc-navigation>
<vc-entity v-model:billboard="billboard" ref="entity" @click="onEntityClick"
:position="{ lng: 108, lat: 32 }" :point="point" :label="label">
<vc-graphics-billboard ref="billboard"
image="https://zouyaoji.top/vue-cesium/favicon.png"></vc-graphics-billboard>
<vc-graphics-rectangle :coordinates="[130, 20, 80, 25]" material="green"></vc-graphics-rectangle>
</vc-entity>
<vc-layer-imagery>
<vc-imagery-provider-tianditu map-style="img_c"
token="436ce7e50d27eede2f2929307e6b33c0"></vc-imagery-provider-tianditu>
</vc-layer-imagery>
<vc-layer-imagery ref="layerText">
<vc-imagery-provider-tianditu map-style="cia_c"
token="436ce7e50d27eede2f2929307e6b33c0"></vc-imagery-provider-tianditu>
</vc-layer-imagery>
</vc-viewer>
<script>
export default {
data() {
return {
loading: true,
animation: true,
timeline: true,
baseLayerPicker: false,
fullscreenButton: true,
infoBox: true,
showCredit: true,
fullscreenElement: document.body,
point: {
pixelSize: 28,
color: 'red'
},
label: {
text: 'Hello World',
pixelOffset: [0, 150]
},
billboard: {},
offset: [50, 25],
otherOpts: {
offset: [0, 32],
position: 'bottom-right'
}
}
},
watch: {
timeline(val) {
this.otherOpts.offset = val ? [0, 30] : this.fullscreenButton ? [30, 5] : [0, 5]
},
fullscreenButton(val) {
if (!this.timeline && !val) {
this.otherOpts.offset = [0, 5]
} else if (!this.timeline && val) {
this.otherOpts.offset = [30, 5]
}
}
},
mounted() {
this.$refs.vcViewer.creatingPromise.then(({ Cesium, viewer }) => {
console.log('viewer is loaded.')
})
},
methods: {
onViewerReady({ Cesium, viewer }) {
this.loading = false
viewer.scene.globe.enableLighting = true
},
onCesiumReady(e) {
console.log(e)
},
onNavigationEvt(e) {
console.log(e)
},
onEntityClick(e) {
console.log(e)
},
onLeftClick(e) {
console.log(e)
},
onTouchEnd(e) {
console.log(e)
},
load() {
this.$refs.vcViewer.load().then(e => {
console.log(e)
this.loading = false
})
},
unload() {
this.$refs.vcViewer.unload().then(e => {
console.log(e)
this.loading = true
})
},
reload() {
this.loading = true
this.$refs.vcViewer.reload().then(e => {
console.log(e)
this.loading = false
})
}
}
}
</script>