给出一些用vue在cesium页面上创建按钮模块的例子

以下是使用Vue.js在Cesium页面上创建按钮模块的示例代码：

1. 创建vue组件

<template>
  <div class="cesium-button">
    <button @click="onClick">{{ label }}</button>
  </div>
</template>

<script>
export default {
  props: {
    label: String,
  },
  methods: {
    onClick() {
      // 处理按钮点击事件
    },
  },
};
</script>

<style scoped>
.cesium-button {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
</style>

2. 在Cesium页面中使用组件

<template>
  <div class="cesium-container">
    <div id="cesiumContainer"></div>
    <cesium-button label="放大" @click="zoomIn" />
    <cesium-button label="缩小" @click="zoomOut" />
  </div>
</template>

<script>
import Cesium from "cesium/Cesium";
import "cesium/Widgets/widgets.css";
import CesiumButton from "@/components/CesiumButton.vue";

export default {
  components: {
    CesiumButton,
  },
  mounted() {
    // 初始化Cesium
    this.viewer = new Cesium.Viewer("cesiumContainer");
  },
  methods: {
    zoomIn() {
      // 处理放大事件
    },
    zoomOut() {
      // 处理缩小事件
    },
  },
};
</script>

<style scoped>
.cesium-container {
  position: relative;
  width: 100%;
  height: 100%;
}
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>

在上面的代码中，我们首先创建了一个`CesiumButton`组件，用于显示一个按钮。然后在Cesium页面中使用这个组件，并通过`props`属性传递按钮的标签。最后在`CesiumButton`组件中处理按钮的点击事件，并在Cesium页面中的方法中实现对应的操作。