📌效果预览

📌组件特点

  1. 默认单位是“度”
  2. 实时获取经纬度数据
  3. 相机事件驱动
  4. 可自定义css样式


📌核心代码

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


let viewer: any = ref(null)
const rootContainer: any = ref({});


onMounted(() => {
  viewer.value = //你获取的viewer
});
.root-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(0, 0, 0);
}


.left-bottom-plugin {
  position: absolute;
  bottom: 0px;
  left: 10px;
  z-index: 10;
}

📌API参数列表

序号 名称 类型 必须? 默认值 含义 备注
1 viewer Cesium.Viewer 是 - viewer对象 -