Cesium系列(10)--三维双屏对比

Cesium双屏对比

距离上个博客更新已经过去两三个月了，期间前期一直忙着做项目，后面又是两三个项目一起改bug，改需求……。终于忙碌的日子里，今天能偷得半日闲，那继续开始修炼吧。

背景

上个博客介绍了怎么用 OpenLayers 跟 Cesium 结合来现在二三维联动展示，在近期的项目中，有个需求是地下管网模型，跟倾斜模型
同时展示效果图如下：

那用二三维联动就没法满足需求了。得是两个三维 Viewer 联动才行。

思路

相比二三维根据获取当前屏幕范围来实现联动，双屏联动就相对简单些。可以利用 Viewer.camera.changed 事件来监听变换，然后获
取当前的 Viewer.camera 的值，去更新另一个 Viewer 相机的位置。

Viewer.camera.setView({…})

监听变化的时候，需要调整一下 viewer.camera.percentageChanged的值，取值范围是 0~1，默认是 0.5。越小，联动的越丝滑。
我用的是 0.001，看起来相对丝滑些。

核心实现

给创建的两个Viewer.camera.changed 添加监听事件。

initViewerEvent(){
   this.viewer.camera.changed.addEventListener(this.vieweExtentChange);
   this.viewer.camera.percentageChanged = 0.001;
   // this.viewer.camera.percentageChanged = 0.8;

   this.cmViewer.camera.changed.addEventListener(this.vieweEXExtentChange);
   this.cmViewer.camera.percentageChanged = 0.001;
   // this.cmViewer.camera.percentageChanged = 0.8;

   this.vieweExtentChange()
   this.viewerDiv.style.visibility = 'visible'
}
vieweExtentChange(){
    
   this.cmViewer.camera.changed.removeEventListener(this.vieweEXExtentChange);
   this.updateView(this.viewer, this.cmViewer);

   this.cmViewer.camera.changed.addEventListener(this.vieweEXExtentChange);
}
    
vieweEXExtentChange(){

   this.viewer.camera.changed.removeEventListener(this.vieweExtentChange);
   this.updateView(this.cmViewer, this.viewer);

   this.viewer.camera.changed.addEventListener(this.vieweExtentChange);
}

更新相机视角

updateView(viewerChange,viewerUpdate){
    const camera = viewerChange.camera
    viewerUpdate.camera.setView({
        destination:camera.position,
        orientation: {
            heading: camera.heading,
            pitch: camera.pitch,
            roll: camera.roll
        }
    })
}