Cesium视角监听,获取中心点坐标、高度、当前可视区域范围

64 阅读1分钟
        const url = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}";
        const url1 = "https://t1.tianditu.gov.cn/DataServer?T=cia_w&tk=85c9d12d5d691d168ba5cb6ecaa749eb&x={x}&y={y}&l={z}";
        var viewer = new Cesium.Viewer('cesiumContainer', {
            geocoder: false,				//隐藏查找控件
            homeButton: false,				//隐藏视角返回初始位置按钮
            sceneModePicker: false,			//隐藏视角模式3D 2D CV
            baseLayerPicker: false,			//隐藏图层选择
            navigationHelpButton: false,	//隐藏帮助
            animation: false,				//隐藏动画控件
            timeline: false,				//隐藏时间线控件
            fullscreenButton: false,		//隐藏全屏
            baseLayerPicker: false,
            imageryProvider: new Cesium.UrlTemplateImageryProvider({ url })
        });


        /* 三维球转动添加监听事件 */
        viewer.camera.changed.addEventListener(function (percentage) {
            getCenterPosition();
            getCurrentExtent();
            // 打印中心点坐标、高度、当前范围坐标
            console.log(getCenterPosition());
            console.log("bounds", getCurrentExtent());
        });

        /* 获取camera高度  */
        function getHeight() {
            if (viewer) {
                var scene = viewer.scene;
                var ellipsoid = scene.globe.ellipsoid;
                var height = ellipsoid.cartesianToCartographic(viewer.camera.position).height;
                return height;
            }
        }

        /* 获取camera中心点坐标 */
        function getCenterPosition() {
            var result = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(viewer.canvas.clientWidth / 2, viewer.canvas
                .clientHeight / 2));
            var curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(result);
            var lon = curPosition.longitude * 180 / Math.PI;
            var lat = curPosition.latitude * 180 / Math.PI;
            var height = getHeight();
            return {
                lon: lon,
                lat: lat,
                height: height
            };
        }

        function getCurrentExtent() {
            // 范围对象
            var extent = {};

            // 得到当前三维场景
            var scene = viewer.scene;

            // 得到当前三维场景的椭球体
            var ellipsoid = scene.globe.ellipsoid;
            var canvas = scene.canvas;

            // canvas左上角
            var car3_lt = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(0, 0), ellipsoid);

            // canvas右下角
            var car3_rb = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(canvas.width, canvas.height), ellipsoid);

            // 当canvas左上角和右下角全部在椭球体上
            if (car3_lt && car3_rb) {
                var carto_lt = ellipsoid.cartesianToCartographic(car3_lt);
                var carto_rb = ellipsoid.cartesianToCartographic(car3_rb);
                extent.xmin = Cesium.Math.toDegrees(carto_lt.longitude);
                extent.ymax = Cesium.Math.toDegrees(carto_lt.latitude);
                extent.xmax = Cesium.Math.toDegrees(carto_rb.longitude);
                extent.ymin = Cesium.Math.toDegrees(carto_rb.latitude);
            }

            // 当canvas左上角不在但右下角在椭球体上
            else if (!car3_lt && car3_rb) {
                var car3_lt2 = null;
                var yIndex = 0;
                do {
                    // 这里每次10像素递加,一是10像素相差不大,二是为了提高程序运行效率
                    yIndex <= canvas.height ? yIndex += 10 : canvas.height;
                    car3_lt2 = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(0, yIndex), ellipsoid);
                } while (!car3_lt2);
                var carto_lt2 = ellipsoid.cartesianToCartographic(car3_lt2);
                var carto_rb2 = ellipsoid.cartesianToCartographic(car3_rb);
                extent.xmin = Cesium.Math.toDegrees(carto_lt2.longitude);
                extent.ymax = Cesium.Math.toDegrees(carto_lt2.latitude);
                extent.xmax = Cesium.Math.toDegrees(carto_rb2.longitude);
                extent.ymin = Cesium.Math.toDegrees(carto_rb2.latitude);
            }

            // 获取高度
            extent.height = Math.ceil(viewer.camera.positionCartographic.height);
            return extent;
        }