前面介紹了使用原生的Widget，其實現(xiàn)思想也是基于MVVM，只是用的knockout.js庫，大伙都不怎么用這個js庫，用起來也比較麻煩，這里使用大家主流的vue來實現(xiàn)一個放大縮小的組件。

創(chuàng)建vue文件

這里跟其它創(chuàng)建組件的方式是一樣的，但有一點需要注意的是，引入第三方組件時，如果是在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;
                // 根據(jù)坐標系標準，將笛卡爾坐標轉(zhuǎn)換為地理坐標
                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;
                // 根據(jù)坐標系標準，將笛卡爾坐標轉(zhuǎn)換為地理坐標
                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來創(chuàng)建組件，并掛載到對應(yīng)的元素上。如下所示：

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