cesium控制及效果(四)：cesium鹰眼

1、概述

使用纯cesium实现鹰眼图

2、创建地图容器

<div id="cesiumContainer"></div>  //1、cesium容器
<div id="eye"></div>  //2、openlayers容器

3、创建双球

import * as Cesium from 'cesium'
//1、cesium初始化--创建地图公共方法
const initViewer = (cesiumId:string) =>{
    let viewer = new Cesium.Viewer(cesiumId,{
        ...
        //具体内容配置参考前面一篇文章：vue3+cesium项目初始化--https://juejin.cn/post/7234088398020067387
    })
    return viewer
}
let viewerM = initViewer('cesiumContainer'); //主界面cesuim初始化
let viewerE = initViewer('eye'); //鹰眼图cesium初始化

4、设置鹰眼图中球属性

//禁用鹰眼地图的操作
const setViewer = (viewer) => {
    let control = viewer.scene.screenSpaceCameraController;
    control.enableRotate = false;
    control.enableTranslate = false;
    control.enableZoom = false;
    control.enableTilt = false;
    control.enableLook = false;
}

5、鹰眼地图与主地图联动

//鹰眼地图与主地图同步
const syncViewer = () =>{
    viewerE.camera.flyTo({
        destination: viewerM.camera.position,
        orientation: {
            heading: viewerM.camera.heading,
            pitch: viewerM.camera.pitch,
            roll: viewerM.camera.roll
        },
        duration: 0.0
    });
};
//添加主界面Cesium 视图监听事件  
viewerM.scene.preRender.addEventListener(syncViewer); 

6、实现效果：

项目地址：github.com/DLFouge/vue…

欢迎指正与star