地图工具栏

src/components/earth/Earth.js

@@ -16,7 +16,7 @@ class Earth {
       const viewer = new Cesium.Viewer(elementId, {
         ...configs,
         infoBox: false, // 关闭信息展示
-        navigation: false, // 指南针
+        navigation: true, // 指南针
         animation: false, // 原生左下角动画空间
         timeline: true, // 时间线
         // 右上角按钮

src/components/earth/layerManager/layerManager.js

@@ -55,6 +55,7 @@ class LayerManager {
         },
         props: point
       })
+      return entity
     })
   }
 

src/components/mapUI/baseMapManager/baseMapManager.vue

@@ -121,5 +121,8 @@ watch(() => checked.value, newV => {
         width: 30px;
       }
     }
+    :deep(.n-checkbox__label){
+      color: white;
+    }
 
 </style>

src/components/mapUI/mapTools/mapTools.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="mapTools">
-    mapTools
+    <div v-for="(item,index) in toolsList" :key="index" class="btn" :title="item.title" @click="item.func">
+      <img :src="item.icon" alt="">
+    </div>
   </div>
 </template>
 
@@ -16,12 +18,90 @@ import { ref, reactive, toRefs, watch, onMounted, getCurrentInstance } from 'vue
 // },
 // })
 // const { } = toRefs(props);
+const toolsList = reactive([
+  {
+    title: '放大',
+    func: zoomIn,
+    icon: new URL('./img/zoomIn.png', import.meta.url)
+  },
+  {
+    title: '缩小',
+    func: zoomOut,
+    icon: new URL('./img/zoomOut.png', import.meta.url)
+  },
+  {
+    title: '向左旋转',
+    func: left,
+    icon: new URL('./img/left.png', import.meta.url)
+  },
+  {
+    title: '向右旋转',
+    func: right,
+    icon: new URL('./img/right.png', import.meta.url)
+  },
+  {
+    title: '全屏',
+    func: fullScreen,
+    icon: new URL('./img/fullScreen.png', import.meta.url)
+  },
+  {
+    title: '鸟瞰',
+    func: birdEye,
+    icon: new URL('./img/birdEye.png', import.meta.url)
+  },
+  {
+    title: '导出',
+    func: exportMap,
+    icon: new URL('./img/export.png', import.meta.url)
+  }
+])
 
+function zoomIn() {
+  // viewer.camera.height -= 100
+  const position = viewer.camera.positionCartographic
+  viewer.camera.moveForward(position.height * 0.5)
+}
+
+function zoomOut() {
+  const position = viewer.camera.positionCartographic
+  viewer.camera.moveBackward(position.height * 0.5)
+}
+function left() {
+  viewer.camera.twistLeft(Cesium.Math.toDegrees(0.005).toFixed(2))
+}
+function right() {
+  viewer.camera.twistRight(Cesium.Math.toDegrees(0.005).toFixed(2))
+}
+function fullScreen() {
+  Cesium.Fullscreen.requestFullscreen(scene.canvas)
+}
+function birdEye() {
+//   const position = viewer.camera.positionWC
+//   const heading = Cesium.Math.toRadians(50)// 水平旋转  -正北方向
+//   const pitch = Cesium.Math.toRadians(-90) // 上下旋转  --俯视朝向
+//   const range = 0 // 目标点高度
+//   viewer.camera.lookAt(position, new Cesium.HeadingPitchRange(heading, pitch, range))
+}
+function exportMap() {
+
+}
 </script>
 <style lang="scss" scoped>
 .mapTools{
-    width: 50px;
+    width: 36px;
-    height: 400px;
+    // height: 400px;
-    background: white;
+    padding: 2px;
+    .btn{
+      width: 100%;
+      height: 30px;
+      margin-top: 5px;
+      background: rgba($color: white, $alpha: 0.3);
+      border: 1px solid rgb(33,62,100);
+      padding: 2px;
+      cursor: pointer;
+      img{
+        width: 100%;
+      }
+    }
 }
 </style>