cesium多个地图移动缩放联动

最新推荐文章于 2024-07-24 23:00:08 发布

treasurecp

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量211

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/treasurecp/article/details/132759952

版权

       // 四个地图
      let viewerList = [viewer1, viewer2, viewer3, viewer4]
        viewerList.forEach(item => {
            // 关键代码，设置精度避免设置视角时无限回调
            item.scene.camera.percentageChanged = 0.1  //设置相机变化的识别精度，默认值为0.5
            // 监听地图视角变化事件
            item.scene.camera.changed.addEventListener(() => {
                // 调用联动方法
                this.syncMove(item)
            });
        })


   // 获取当前移动的地图视角，设置所有地图到相同视角
   syncMove(viewer) {
            //console.log("移动结束")
            viewer1.scene.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(
                    Cesium.Math.toDegrees(viewer.scene.camera.positionCartographic.longitude),
                    Cesium.Math.toDegrees(viewer.scene.camera.positionCartographic.latitude),
                    viewer.scene.camera.positionCartographic.height
                )
            });
            viewer2.scene.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(
                    Cesium.Math.toDegrees(viewer.scene.camera.positionCartographic.longitude),
                    Cesium.Math.toDegrees(viewer.scene.camera.positionCartographic.latitude),
                    viewer.scene.camera.positionCartographic.height
                )
            });
            viewer3.scene.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(
                    Cesium.Math.toDegrees(viewer.scene.camera.positionCartographic.longitude),
                    Cesium.Math.toDegrees(viewer.scene.camera.positionCartographic.latitude),
                    viewer.scene.camera.positionCartographic.height
                )
            });
            viewer4.scene.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(
                    Cesium.Math.toDegrees(viewer.scene.camera.positionCartographic.longitude),
                    Cesium.Math.toDegrees(viewer.scene.camera.positionCartographic.latitude),
                    viewer.scene.camera.positionCartographic.height
                )
            });
        },