效果预览

组件特点

  1. 默认单位是“公里”
  2. 当距离小于一公里时，距离单位自动改为“米”
  3. 当距离过远时显示“无法获取”
  4. 相机事件驱动

核心代码

<template>
  <div id="rootContainer" ref="rootContainer" class="root-container">
    <!--  v-if="viewer" 可选 -->
    <cp-ruler class="right-bottom-plugin" :viewer="viewer" v-if="viewer"></cp-ruler>
  </div>
</template>
import { onMounted, ref } from "vue";
import { cpRuler } from 'cesium-pocket'
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%;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  background-color: rgb(0, 0, 0);
}


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

组件参数列表

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