cesium初始化
This commit is contained in:
parent
e0cd9d9d19
commit
1103d07650
|
|
@ -1,15 +1,13 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
'global': {
|
|
||||||
'Cesium': writable,
|
|
||||||
'scene': writable,
|
|
||||||
'viewer': writable
|
|
||||||
},
|
|
||||||
root: true,
|
root: true,
|
||||||
env: {
|
env: {
|
||||||
browser: true,
|
browser: true,
|
||||||
node: true,
|
node: true,
|
||||||
es6: true
|
es6: true
|
||||||
},
|
},
|
||||||
|
globals: {
|
||||||
|
Cesium: true
|
||||||
|
},
|
||||||
extends: [
|
extends: [
|
||||||
'plugin:vue/vue3-recommended',
|
'plugin:vue/vue3-recommended',
|
||||||
'eslint:recommended'
|
'eslint:recommended'
|
||||||
|
|
|
||||||
|
|
@ -12,5 +12,6 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.js"></script>
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
<script type="text/javascript" src="static/Cesium/Cesium.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
20
src/App.vue
20
src/App.vue
|
|
@ -7,23 +7,25 @@
|
||||||
* @FilePath: \gis\src\App.vue
|
* @FilePath: \gis\src\App.vue
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div>???</div>
|
<earth />
|
||||||
|
<div class="layOut">
|
||||||
|
<mapLayout />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { zhCN, dateZhCN } from 'naive-ui'
|
import Earth from '@/components/earth/earth.vue'
|
||||||
import themeOverrides from '@/utils/ui/theme.js'
|
import mapLayout from '@/components/mapUI/mapLayout.vue'
|
||||||
import loadingBar from '@/components/LoadingBar/index.vue'
|
|
||||||
import messageContent from '@/components/Message/index.vue'
|
|
||||||
import dialogContent from '@/components/Dialog/index.vue'
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
#app {
|
#app {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
.n-config-provider {
|
.layOut {
|
||||||
height: inherit;
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 11;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</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