效果预览

组件特点

  1. 同步相机的航向角、俯仰角、翻滚角
  2. 机头始终朝向北极
  3. 相比传统的罗盘方式，更直观的渲染了相机状态
  4. 相机事件驱动
  5. 可自定义css样式

核心代码

<template>
  <div id="rootContainer" ref="rootContainer" class="root-container">
    <!--  v-if="viewer" 可选 -->
     <cp-compass class="right-top-plugin" :viewer="viewerLoc"></cp-compass>
  </div>
</template>
import { onMounted, ref } from "vue";
import { cpRuler } from 'cesium-pocket'
import 'cesium/Build/Cesium/Widgets/widgets.css';


let viewer: any = ref(null)


onMounted(() => {
  viewer.value = //你获取的viewer
});
.root-container {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  height: 500px;
}


.right-top-plugin {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
}

组件参数列表

Component <cp-compass :viewer="viewer">
Props 组件属性 Props
序号 名称 类型 必须? 默认值 含义 备注
1 viewer Cesium.Viewer 是 - viewer对象 -