Cesium 介绍之 地图缩放监听 + 后端聚合点位实现

对于后端聚合接口需要在地图缩放后，获取当前可视范围后根据当前的边界值重新请求接口更新点位信息。

methods: {
    handleViewerScaling(viewer) {
        viewer && viewer.camera.moveEnd.addEventListener(this.onMoveEndMap);
    },
    async onMoveEndMap() {
        // 找到需要后端聚合接口的数据源
        const layerInfos = this.layerList.filter(v => v.WFS);
        // 待所有接口请求完成后
        layerInfos.map(async layerInfo => {
            const dataSource = this.layersMap.get(layerInfo.statusName);
            // 根据数据源和图层信息去请求接口更新点位
        });
    },
    // 获取当前视图的范围, 使用方式 const { left: x, top: y } = $("#cesiumContainer").offset(); getCurrentViewRange({ x , y });
    function getCurrentViewRange(lt_point) {
        const { cesiumViewer: viewer } = window;
        const extend = viewer.camera.computeViewRectangle();
        if (typeof extend === "undefined") {
            // 2D下会可能拾取不到坐标，extend返回undefined,所以做以下转换
            const canvas = viewer.scene.canvas;
            // canvas左上角坐标转2d坐标
            const upperLeft = new Cartesian2(lt_point.x, lt_point.y);
            const lowerRight = new Cartesian2(canvas.clientWidth, canvas.clientHeight);

            const ellipsoid = viewer.scene.globe.ellipsoid;
            // 2D转3D世界坐标
            const upperLeft3 = viewer.camera.pickEllipsoid(upperLeft, ellipsoid);
            const lowerRight3 = viewer.camera.pickEllipsoid(lowerRight, ellipsoid);
            // 3D世界坐标转弧度
            const upperLeftCartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(upperLeft3);
            const lowerRightCartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(lowerRight3);
            // 弧度转经纬度
            const minx = Math.toDegrees(upperLeftCartographic.longitude);
            const maxx = Math.toDegrees(lowerRightCartographic.longitude);
            const miny = Math.toDegrees(lowerRightCartographic.latitude);
            const maxy = Math.toDegrees(upperLeftCartographic.latitude);
            return [minx, miny, maxx, maxy].join(",");
        } else {
            // 3D获取方式
            return [Math.toDegrees(extend.west), Math.toDegrees(extend.south), Math.toDegrees(extend.east), Math.toDegrees(extend.north)].join(",");
        }
    },
}