Skip to content

C
cesium-frame
Commit 9d8dbdca by jlc
Options

update：界面基本功能实现

parent 3fc30bb2
Showing with 250 additions and 81 deletions
jsconfig.json
{
"compilerOptions": {
"baseUral": ".",
"baseUrl": ".",
"paths": {
"@/*": ["src/*"] // 配置@符号指向src目录及其子目录
}
......
src/App.vue
<template>
<CodeAndCesium />
<!-- <router-view /> -->
<router-view />
</template>
<script setup>
import CodeAndCesium from './pages/CodeAndCesium.vue';
</script>
\ No newline at end of file
src/AppLayout.vue
<template>
<div class="w-screen h-screen">
<div class="app-continer">
<el-container>
<AsideMenuBar :isCollapse="isCollapse" @update:isCollapse="handleCollapseUpdate" />
<el-container class="header-and-main">
......@@ -27,6 +27,10 @@ const handleCollapseUpdate = (newCollapseState) => {
</script>
<style lang="scss" scoped>
.app-continer{
width: 100vw;
height: 100vh;
}
.header-and-main{
flex-direction: column;
height: 100vh;
......
src/components/AsideMenuBar.vue
......@@ -3,62 +3,62 @@
<el-scrollbar>
<el-menu router unique-opened :collapse="isCollapse">
<a href="/" class="logo">
<img src="../assets/vue.svg" alt="">
<img src="@/assets/vue.svg" alt="">
<h1>Cesium</h1>
</a>
<el-sub-menu index="1">
<template #title>
<el-icon><Edit /></el-icon>
<el-icon><MapLocation /></el-icon>
<span>点的案例</span>
</template>
<el-menu-item index="/code">
<el-icon><Edit /></el-icon>
<el-menu-item @click="indexBtn('pointOne')">
<el-icon><View /></el-icon>
<span>one</span>
</el-menu-item>
<el-menu-item index="/code">
<el-icon><Edit /></el-icon>
<el-menu-item @click="indexBtn('firstTwo')">
<el-icon><View /></el-icon>
<span>two</span>
</el-menu-item>
<el-menu-item index="/code">
<el-icon><Edit /></el-icon>
<el-menu-item @click="indexBtn('firstThree')">
<el-icon><View /></el-icon>
<span>three</span>
</el-menu-item>
</el-sub-menu>
<el-sub-menu index="2">
<template #title>
<el-icon><Edit /></el-icon>
<el-icon><SemiSelect /></el-icon>
<span>线的案例</span>
</template>
<el-menu-item index="/code">
<el-icon><Edit /></el-icon>
<el-icon><View /></el-icon>
<span>one</span>
</el-menu-item>
<el-menu-item index="/code">
<el-icon><Edit /></el-icon>
<el-icon><View /></el-icon>
<span>two</span>
</el-menu-item>
<el-menu-item index="/code">
<el-icon><Edit /></el-icon>
<el-icon><View /></el-icon>
<span>three</span>
</el-menu-item>
</el-sub-menu>
<el-sub-menu index="3">
<template #title>
<el-icon><Edit /></el-icon>
<el-icon><Grid /></el-icon>
<span>面的案例</span>
</template>
<el-menu-item index="/code">
<el-icon><Edit /></el-icon>
<el-icon><View /></el-icon>
<span>one</span>
</el-menu-item>
<el-menu-item index="/code">
<el-icon><Edit /></el-icon>
<el-icon><View /></el-icon>
<span>two</span>
</el-menu-item>
<el-menu-item index="/code">
<el-icon><Edit /></el-icon>
<el-icon><View /></el-icon>
<span>three</span>
</el-menu-item>
</el-sub-menu>
......@@ -68,14 +68,20 @@
</template>
<script setup>
import { Edit } from "@element-plus/icons-vue"
import { ref } from "vue";
import { MapLocation, SemiSelect, Grid, View } from "@element-plus/icons-vue"
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
isCollapse: {
type: Boolean,
}
});
function indexBtn(id) {
router.push(`/CodeAndCesium/?id=${id}`)
}
</script>
<style lang="scss" scoped>
......
src/components/HeaderMenuBar.vue
......@@ -17,7 +17,6 @@
<script setup>
import { Expand, Fold } from "@element-plus/icons-vue"
import { ref } from "vue";
const props = defineProps({
isCollapse: {
......
src/components/constant.js 0 → 100644
export const menuMap = {
}
\ No newline at end of file
src/examples/CodeMap.js 0 → 100644
import { vueCode as vueCodeOne } from '@/examples/first-one.js'
import { vueCode as vueCodeTwo } from '@/examples/first-two.js'
const vueCodeMap = {
pointOne: vueCodeOne,
pointTwo: vueCodeTwo
}
export function findVueCodeById(id){
if(!vueCodeMap.hasOwnProperty(id)){
throw new Error(`${id}不存在`);
}
return vueCodeMap[id]
}
\ No newline at end of file
src/examples/first-one.js 0 → 100644
export const vueCode = `<template>
<div id="cesiumContainer" class="cesium-container"></div>
</template>
<script setup>
import { onMounted } from 'vue';
onMounted(() => {
const script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
script.onload = () => {
window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
const viewer = new window.Cesium.Viewer('cesiumContainer', {
infoBox: false,
});
};
document.head.appendChild(script);
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Widgets/widgets.css';
document.head.appendChild(link);
});
<${'/'}script>
<style>
.cesium-container {
width: 100%;
height: 100vh;
}
</style>`;
\ No newline at end of file
src/examples/first-two.js 0 → 100644
export const vueCode = `<template>
<div id="cesiumContainer" class="cesium-container"></div>
</template>
<script setup>
<${'/'}script>
<style>
.cesium-container {
width: 100%;
height: 100vh;
}
</style>`;
\ No newline at end of file
src/main.js
......@@ -10,16 +10,16 @@ const app = createApp(App)
app.use(ElementPlus)
app.use(router)
router.beforeEach((to, from, next) => {
console.log("to:", to) //即将进入的路由信息
console.log("from:", from) //当前即将离开的路由信息
next() // 继续执行，如果注释掉，首页都不会显示
// router.beforeEach((to, from, next) => {
// console.log("to:", to) //即将进入的路由信息
// console.log("from:", from) //当前即将离开的路由信息
// next() // 继续执行，如果注释掉，首页都不会显示
// 设置条件拦截
// if(to.name == 'codeandcesium'){
// next(false)
// }else{
// next()
// }
})
// // 设置条件拦截
// // if(to.name == 'codeandcesium'){
// // next(false)
// // }else{
// // next()
// // }
// })
app.mount('#app')
\ No newline at end of file
src/pages/CodeAndCesium.vue
<template>
<SandpackProvider template="vue3" class="w-screen h-screen" :files="files">
<SandpackLayout class="h-[80%] w-full">
<SandpackCodeEditor showLineNumbers style="height: 100%;" />
<SandpackPreview style="height: 100%;" />
</SandpackLayout>
<SandpackLayout class="h-[20%] w-full">
<SandpackConsole style="height: 100%;" class="bg-zinc-100" />
</SandpackLayout>
</SandpackProvider>
<div class="app-continer">
<SandpackProvider template="vue3" style="width: 100%; height: 100%;" :files="files">
<SandpackLayout class="h-[80%] w-full">
<SandpackCodeEditor showLineNumbers style="height: 100%;" />
<SandpackPreview style="height: 100%;" />
</SandpackLayout>
<SandpackLayout class="h-[20%] w-full">
<SandpackConsole style="height: 100%;" class="bg-zinc-100" />
</SandpackLayout>
</SandpackProvider>
</div>
</template>
<script setup>
import { SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview, SandpackConsole } from 'sandpack-vue3';
import { ref } from 'vue';
const vueCode = `<template>
<div id="cesiumContainer" class="cesium-container"></div>
</template>
<script setup>
import { onMounted } from 'vue';
onMounted(() => {
const script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
script.onload = () => {
window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
const viewer = new window.Cesium.Viewer('cesiumContainer', {
infoBox: false,
});
};
document.head.appendChild(script);
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Widgets/widgets.css';
document.head.appendChild(link);
});
<style>
.cesium-container {
width: 100%;
height: 100vh;
}
</style>`;
import { SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview, SandpackConsole } from 'sandpack-vue3';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { findVueCodeById } from '@/examples/CodeMap.js';
const route = useRoute()
const vueCode = ref()
const files = ref({
"src/App.vue": {
code: vueCode,
......@@ -53,7 +28,15 @@ const files = ref({
hidden: false
}
});
onMounted(() =>{
vueCode.value = findVueCodeById(route.query.id)
})
</script>
<style scoped>
.app-continer{
width: 100vw;
height: 100vh;
}
</style>
\ No newline at end of file
src/router/index.js
......@@ -13,8 +13,7 @@ const routes = [
]
},
{
path: '/CodeAndCesium/:id/title/:title?',
alias: ["/code", "/cesium"],
path: '/CodeAndCesium',
name: 'codeandcesium',
component: () => import('@/pages/CodeAndCesium.vue'),
},
......
src/views/ElementMap.js 0 → 100644
export const elementPointMap = {
One: {
title: 'One',
pngUrl: '/src/assets/PointOne.png'
},
Two: {
title: 'Two',
pngUrl: '/src/assets/PointOne.png'
},
Three: {
title: 'Three',
pngUrl: '/src/assets/PointOne.png'
},
Four: {
title: 'Four',
pngUrl: '/src/assets/PointOne.png'
}
}
export const elementLineMap = {
One: {
title: 'One',
pngUrl: '/src/assets/LineOne.png'
},
Two: {
title: 'Two',
pngUrl: '/src/assets/LineOne.png'
},
Three: {
title: 'Three',
pngUrl: '/src/assets/LineOne.png'
},
Four: {
title: 'Four',
pngUrl: '/src/assets/LineOne.png'
}
}
export const elementPlaneMap = {
One: {
title: 'One',
pngUrl: '/src/assets/PlaneOne.png'
},
Two: {
title: 'Two',
pngUrl: '/src/assets/PlaneOne.png'
},
Three: {
title: 'Three',
pngUrl: '/src/assets/PlaneOne.png'
},
Four: {
title: 'Four',
pngUrl: '/src/assets/PlaneOne.png'
}
}
\ No newline at end of file
src/views/indexView.vue
<template>
<h1>默认显示的首页</h1>
<div class="app-continer">
<div class="mt-5">
<span class="text-base font-bold">点的案例</span>
<div style="overflow-y: auto" class="container">
<div v-for="item in elementPointData" :key="item.id" @click="indexBtn(`point${item.title}`)" class="item-container">
<span>{{item.title}}</span>
<img :src="item.pngUrl" width="250">
</div>
</div>
</div>
<div class="mt-10">
<span class="text-base font-bold">线的案例</span>
<div style="overflow-y: auto" class="container">
<div v-for="item in elementLineData" :key="item.id" @click="indexBtn(`line${item.title}`)" class="item-container">
<span>{{item.title}}</span>
<img :src="item.pngUrl" width="250">
</div>
</div>
</div>
<div class="mt-10">
<span class="text-base font-bold">面的案例</span>
<div style="overflow-y: auto" class="container">
<div v-for="item in elementPlaneData" :key="item.id" @click="indexBtn(`plane${item.title}`)" class="item-container">
<span>{{item.title}}</span>
<img :src="item.pngUrl" width="250">
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { elementPointMap, elementLineMap, elementPlaneMap } from './ElementMap';
const router = useRouter()
const elementPointData = ref()
const elementLineData = ref()
const elementPlaneData = ref()
elementPointData.value = elementPointMap;
elementLineData.value = elementLineMap;
elementPlaneData.value = elementPlaneMap;
function indexBtn(id) {
router.push(`/CodeAndCesium/?id=${id}`)
}
</script>
<style lang="scss" scoped>
.app-continer{
width: 100vw;
height: 100vh;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.item-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment