diff --git a/.eslintrc.js b/.eslintrc.js
index db1d9aa..594b712 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -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'
diff --git a/index.html b/index.html
index f98ff35..6f7b55c 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/src/App.vue b/src/App.vue
index b383549..4c94ba7 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/mapUI/baseMapManager/baseMapManager.vue b/src/components/mapUI/baseMapManager/baseMapManager.vue
new file mode 100644
index 0000000..86e97da
--- /dev/null
+++ b/src/components/mapUI/baseMapManager/baseMapManager.vue
@@ -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>
diff --git a/src/components/mapUI/baseMapManager/img/img.jpg b/src/components/mapUI/baseMapManager/img/img.jpg
new file mode 100644
index 0000000..a560566
Binary files /dev/null and b/src/components/mapUI/baseMapManager/img/img.jpg differ
diff --git a/src/components/mapUI/baseMapManager/img/ter.jpg b/src/components/mapUI/baseMapManager/img/ter.jpg
new file mode 100644
index 0000000..00d3261
Binary files /dev/null and b/src/components/mapUI/baseMapManager/img/ter.jpg differ
diff --git a/src/components/mapUI/baseMapManager/img/vec.jpg b/src/components/mapUI/baseMapManager/img/vec.jpg
new file mode 100644
index 0000000..494d452
Binary files /dev/null and b/src/components/mapUI/baseMapManager/img/vec.jpg differ
diff --git a/src/components/mapUI/mapLayout.vue b/src/components/mapUI/mapLayout.vue
new file mode 100644
index 0000000..0a67954
--- /dev/null
+++ b/src/components/mapUI/mapLayout.vue
@@ -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>
