1、在views新建Box.vue
<template>
<div id="container" class="box">
<div id="cesiumContainer"></div>
</div>
</template>
<script>
export default {
name: 'Home',
mounted(){
this.init()
},
methods: {
init() {
let Cesium = this.cesium
let viewer = new Cesium.Viewer('cesiumContainer');
var redBox = viewer.entities.add({
name : '杭州上方三千米的蓝色半透明的盒子',
position: Cesium.Cartesian3.fromDegrees(120.15, 30.28, 3000.0),
box : {
dimensions : new Cesium.Cartesian3(4000.0, 3000.0, 5000.0),
material : Cesium.Color.BLUE.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.BLACK
}
});
viewer.zoomTo(viewer.entities);
viewer._cesiumWidget._creditContainer.style.display = "none";// 隐藏版权
}
}
};
</script>
<style lang='scss' scoped>
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
2、配置路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/box',
name: 'Box',
component: () => import('../views/Box.vue')
}
]
const router = new VueRouter({
routes
})
export default router
3、修改App.vue
<template>
<div id="app">
<div class="menu">
<div v-for="(item,index) in menuList" :key="index" class="item" @click="toPage(item.path)">
{{item.title}}
</div>
</div>
<router-view/>
</div>
</template>
<script>
export default {
data(){
return{
menuList : [
{
title : '首页',
path : '/'
},
{
title : '形状',
path : '/box'
}
]
}
},
methods:{
toPage(path){
this.$router.push(path)
}
}
}
</script>
<style lang="scss">
html,
body,
#app {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
color: #000;
overflow: hidden;
}
.box {
height: calc(100vh - 50px);
}
.menu{
background-color: #000000;
color: #ffffff;
height: 50px;
line-height: 50px;
display: flex;
}
.item{
margin: 0 10px;
cursor: pointer;
}
</style>
4、效果图