cesium实现鹰眼图

1、鹰眼图代码

<template>
    <div>
        <div id="cesiumContainer"></div>
        <div id="eye"></div>
    </div>
</template>

<script>
    export default {
        name: 'eye',
        components: {},
        data(){
            return{

            }
        },
        mounted() {
            //1、创建双球
            let viewer = new Cesium.Viewer('cesiumContainer',{
                animation: false,
                baseLayerPicker: false,
                fullscreenButton: false,
                geocoder: false,
                homeButton: false,
                sceneModePicker: false,
                selectionIndicator: false,
                timeline: false,
                navigationHelpButton: false,
                infoBox: false,
                navigationInstructionsInitiallyVisible: false
            });
            viewer._cesiumWidget._creditContainer.style.display = "none";  //去掉logo

            let viewer2  = new Cesium.Viewer('eye',{
                animation: false,
                baseLayerPicker: false,
                fullscreenButton: false,
                geocoder: false,
                homeButton: false,
                sceneModePicker: false,
                selectionIndicator: false,
                timeline: false,
                navigationHelpButton: false,
                infoBox: false,
                navigationInstructionsInitiallyVisible: false
            });
            viewer2._cesiumWidget._creditContainer.style.display = "none";  //去掉logo

            //2、设置鹰眼图中球属性
            let control = viewer2.scene.screenSpaceCameraController;
            control.enableRotate = false;
            control.enableTranslate = false;
            control.enableZoom = false;
            control.enableTilt = false;
            control.enableLook = false;
            let syncViewer = function(){
                viewer2.camera.flyTo({
                    destination : viewer.camera.position,
                    orientation : {
                        heading : viewer.camera.heading,
                        pitch : viewer.camera.pitch,
                        roll : viewer.camera.roll
                    },
                    duration: 0.0
                });
            }

            //3、同步(有点卡顿)
//            viewer.camera.changed.addEventListener(syncViewer);

            //3、同步
            viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(0, 0),
                label: {
                    text: new Cesium.CallbackProperty(function(){
                        syncViewer();
                        return "";
                    }, true)
                }
            });
        }
    }
</script>

<style>
    #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    #eye {
        position: absolute;
        width: 20%;
        height: 20%;
        bottom: 0;
        right: 0;
        z-index: 999;
        background: red;
        border: solid blue 1px;
    }
</style>

2、效果

image.png