前面介绍了使用原生的Widget，其实现思想也是基于MVVM，只是用的knockout.js库，大伙都不怎么用这个js库，用起来也比较麻烦，这里使用大家主流的vue来实现一个放大缩小的组件。

创建vue文件

这里跟其它创建组件的方式是一样的，但有一点需要注意的是，引入第三方组件时，如果是在main.js中引入的，这里还需要重新引入一次，是因为这里使用的是createApp来挂载组件的。

<template>
    <div class="zoominout-view">
        <el-button type="text" icon="el-icon-plus" @click="zoomInHandler"></el-button>
        <el-button type="text" icon="el-icon-minus" @click="zoomOutHandler"></el-button>
    </div>
</template>

<script>
    import {
        ElButton
    } from 'element-plus'
    import { toRefs } from 'vue'

    export default {
        name: 'ZoomInOut',
        props:['scene'],
        components: {
            ElButton
        },
        setup(props){
            const { scene } = toRefs(props);
            let viewer = scene.value;
            const zoomInHandler = ()=>{
                // 获取当前镜头位置的笛卡尔坐标
                let cameraPos = viewer.camera.position;
                // 获取当前坐标系标准
                let ellipsoid = viewer.globe.ellipsoid;
                // 根据坐标系标准，将笛卡尔坐标转换为地理坐标
                let cartographic = ellipsoid.cartesianToCartographic(cameraPos);
                // 获取镜头的高度
                let height = cartographic.height;
                viewer.camera.zoomIn(height/3);
            };
            const zoomOutHandler = ()=>{
                // 获取当前镜头位置的笛卡尔坐标
                let cameraPos = viewer.camera.position;
                // 获取当前坐标系标准
                let ellipsoid = viewer.globe.ellipsoid;
                // 根据坐标系标准，将笛卡尔坐标转换为地理坐标
                let cartographic = ellipsoid.cartesianToCartographic(cameraPos);
                // 获取镜头的高度
                let height = cartographic.height;
                viewer.camera.zoomOut(height * 1.2);
            };
            return{
                zoomInHandler,
                zoomOutHandler
            }
        }
    }
</script>
<style scoped>
    .zoominout-view{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items:center;
        justify-content:center;
    }
    .el-button{
        background: #303336;
        color: #fff;
        min-height: auto;
        height: 30px;
        width: 30px;
        padding: 0;
        font-size: 20px;
    }
    .el-button:hover {
        color: #fff;
        fill: #fff;
        background: #48b;
        border-color: #aef;
        box-shadow: 0 0 8px #fff;
    }
    .el-button+.el-button{
        margin-left: 0;
        margin-top: 10px;
    }
</style>

挂载组件

首先引入组件

import ZoomInOutVue from "../ZoomInOutVue/ZoomInOut.vue";

cesium中都是采用appendChild的方法来添加元素，所以在使用vue组件时，可以使用createApp来创建组件，并挂载到对应的元素上。如下所示：

var zoomInOutContainer = document.createElement("div");
zoomInOutContainer.className = "cesium-viewer-zoomInOutContainer";
let zoomInOut = createApp(ZoomInOutVue,{
      scene:scene
  });
zoomInOut.mount(zoomInOutContainer);