Cesium 地图分屏对比联动

最新推荐文章于 2024-07-26 16:42:09 发布

一醉千秋

最新推荐文章于 2024-07-26 16:42:09 发布

阅读量4.9k

点赞数

分类专栏： WebGL 3D

本文链接：https://blog.csdn.net/thor027/article/details/100972862

版权

WebGL 3D 专栏收录该内容

16 篇文章 2 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍如何使用Cesium实现地图分屏显示并进行同步联动操作。通过在HTML页面创建两个div，分别加载viewer0和viewer1，然后设置监听事件，识别鼠标在哪个viewer上的操作。当在其中一个viewer上移动鼠标或滚轮时，更新另一个viewer的视角，包括位置、方向、俯仰角和滚动。最后，提供了清除监听事件的方法，以便在不需要联动时释放资源。

摘要由CSDN通过智能技术生成

1.在html页面中设置两个div,即div0、div1，用来显示三维球viewer0,viewer1

2.在div上设置监听事件，用来区分当前鼠标的操作区域，即viewer0和viewer1，谁联动谁

3.两个三维球联动设置，例如操作viewer0,使viewer1跟随如下，反之亦然

       initHandler:function(viewer0,viewer1){
           var _self=this;
            if(_self.handler&&_self.handler.getInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)){
               return;
           }
           _self.handler = new Cesium.ScreenSpaceEventHandler(viewer0.scene.canvas);
           _self.handler.setInputAction(function(movement) {
               var _camerca = viewer0.camera;
       viewer1.camera.setView({