cesium初始化
This commit is contained in:
parent
e0cd9d9d19
commit
1103d07650
|
|
@ -1,15 +1,13 @@
|
|||
module.exports = {
|
||||
'global': {
|
||||
'Cesium': writable,
|
||||
'scene': writable,
|
||||
'viewer': writable
|
||||
},
|
||||
root: true,
|
||||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
es6: true
|
||||
},
|
||||
globals: {
|
||||
Cesium: true
|
||||
},
|
||||
extends: [
|
||||
'plugin:vue/vue3-recommended',
|
||||
'eslint:recommended'
|
||||
|
|
|
|||
|
|
@ -12,5 +12,6 @@
|
|||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
<script type="text/javascript" src="static/Cesium/Cesium.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
20
src/App.vue
20
src/App.vue
|
|
@ -7,23 +7,25 @@
|
|||
* @FilePath: \gis\src\App.vue
|
||||
-->
|
||||
<template>
|
||||
<div>???</div>
|
||||
<earth />
|
||||
<div class="layOut">
|
||||
<mapLayout />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { zhCN, dateZhCN } from 'naive-ui'
|
||||
import themeOverrides from '@/utils/ui/theme.js'
|
||||
import loadingBar from '@/components/LoadingBar/index.vue'
|
||||
import messageContent from '@/components/Message/index.vue'
|
||||
import dialogContent from '@/components/Dialog/index.vue'
|
||||
|
||||
import Earth from '@/components/earth/earth.vue'
|
||||
import mapLayout from '@/components/mapUI/mapLayout.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
height: 100%;
|
||||
.n-config-provider {
|
||||
height: inherit;
|
||||
.layOut {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 11;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<div class="baseMapManager">
|
||||
<!-- <n-modal v-model:show="isOptionShow">
|
||||
<div v-show="isOptionShow" class="options">
|
||||
<div v-for="(option,index) in options" :key="index" class="option" @click="handleCheck(option)">
|
||||
<img :src="option.imgUrl" alt="">
|
||||
<div class="title">
|
||||
{{ option.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-modal> -->
|
||||
<div v-show="isOptionShow" class="options" @mouseleave="showOptions(false)">
|
||||
<div v-for="(option,index) in options" :key="index" class="option" @click="handleCheck(option)">
|
||||
<img :src="option.imgUrl" alt="">
|
||||
<div class="title">
|
||||
{{ option.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="checked option" @click="showOptions(true)">
|
||||
<img :src="checked.imgUrl" alt="">
|
||||
<div class="title">
|
||||
{{ checked.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup >
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { ref, reactive, toRefs, watch, onMounted, getCurrentInstance } from 'vue'
|
||||
|
||||
// const emit = defineEmits([""])
|
||||
// const props = defineProps({
|
||||
// propData: {
|
||||
// type: String,
|
||||
// default: ''
|
||||
// },
|
||||
// })
|
||||
// const { } = toRefs(props);
|
||||
|
||||
const isOptionShow = ref(false)
|
||||
function showOptions(isShow) {
|
||||
// isOptionShow.value = !isOptionShow.value
|
||||
isOptionShow.value = isShow
|
||||
}
|
||||
|
||||
const options = reactive([
|
||||
{ name: '影像', code: 'img', imgUrl: new URL('./img/img.jpg', import.meta.url) },
|
||||
{ name: '矢量', code: 'vec', imgUrl: new URL('./img/vec.jpg', import.meta.url) },
|
||||
{ name: '地形', code: 'ter', imgUrl: new URL('./img/ter.jpg', import.meta.url) }
|
||||
])
|
||||
|
||||
const checked = ref({
|
||||
name: '影像', code: 'img', imgUrl: new URL('./img/img.jpg', import.meta.url)
|
||||
})
|
||||
|
||||
function handleCheck(obj) {
|
||||
checked.value = obj
|
||||
isOptionShow.value = false
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.baseMapManager{
|
||||
// height: 100px;
|
||||
display: flex;
|
||||
.options{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.checked{
|
||||
border: 1px solid rgb(74,131,247);
|
||||
}
|
||||
}
|
||||
.option{
|
||||
width: 120px;
|
||||
padding: 10px;
|
||||
// border: 1px solid blue;
|
||||
position: relative;
|
||||
img{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
// width: 50px;
|
||||
// text-align: center;
|
||||
}
|
||||
.title{
|
||||
// width: 100%;
|
||||
text-align: center;
|
||||
color: white;
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
right: 10px;
|
||||
background: rgba(0,0,0,0.5);
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<div>
|
||||
<baseMapManager class="baseMap" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup >
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { ref, reactive, toRefs, watch, onMounted, getCurrentInstance } from 'vue'
|
||||
import baseMapManager from '@/components/mapUI/baseMapManager/baseMapManager.vue'
|
||||
|
||||
// const emit = defineEmits([""])
|
||||
// const props = defineProps({
|
||||
// propData: {
|
||||
// type: String,
|
||||
// default: ''
|
||||
// },
|
||||
// })
|
||||
// const { } = toRefs(props);
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.baseMap{
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 10px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue