Cesium 获取屏幕窗口经纬度范围（2D和3D）

原创已于 2025-12-19 11:42:02 修改 · 3.9k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #es6

于 2020-06-24 15:53:28 首次发布

Cesium 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种在Cesium中优化大量地理数据加载的方法，通过后台聚合减少数据请求量，提升加载速度。文章详细解释了如何获取当前屏幕的地理范围，并将此信息用于后台的数据聚合处理。

背景：

由于entity实体过多，而又要一次性加载，所以用聚合(后台聚合)，前端cesium也可以聚合，cesium前端渲染大量点很快很快的，但是由于请求后台时数据量太大，光请求时间都很长。不能忍受，所以改为后台聚合。后台聚合用的是pg的空间函数。前端去后台请求时需要要携带当前屏幕所在地理范围参数（经纬度格式）

获取当前屏幕所在地理范围：

getViewExtend() {
      let params = {};
      let extend = viewer.camera.computeViewRectangle();
      if (typeof extend === "undefined") {
        //2D下会可能拾取不到坐标，extend返回undefined,所以做以下转换
        let canvas = viewer.scene.canvas;
        let upperLeft = new Cesium.Cartesian2(0, 0);//canvas左上角坐标转2d坐标
        let lowerRight = new Cesium.Cartesian2(
          canvas.clientWidth,
          canvas.clientHeight
        );//canvas右下角坐标转2d坐标

        let ellipsoid = viewer.scene.globe.ellipsoid;
        let upperLeft3 = viewer.camera.pickEllipsoid(
          upperLeft,
          ellipsoid
        );//2D转3D世界坐标

        let lowerRight3 = viewer.camera.pickEllipsoid(
          lowerRight,
          ellipsoid
        );//2D转3D世界坐标

        let upperLeftCartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(
          upperLeft3
        );//3D世界坐标转弧度
        let lowerRightCartographic= viewer.scene.globe.ellipsoid.cartesianToCartographic(
          lowerRight3
        );//3D世界坐标转弧度

        let minx = Cesium.Math.toDegrees(upperLeftCartographic.longitude);//弧度转经纬度
        let maxx = Cesium.Math.toDegrees(lowerRightCartographic.longitude);//弧度转经纬度

        let miny = Cesium.Math.toDegrees(lowerRightCartographic.latitude);//弧度转经纬度
        let maxy = Cesium.Math.toDegrees(upperLeftCartographic.latitude);//弧度转经纬度

        console.log("经度：" + minx + "----" + maxx);
        console.log("纬度：" + miny + "----" + maxy);

        params.minx = minx;
        params.maxx = maxx;
        params.miny = miny;
        params.maxy = maxy;
      } else {
        //3D获取方式
        params.maxx = Cesium.Math.toDegrees(extend.east);
        params.maxy = Cesium.Math.toDegrees(extend.north);

        params.minx = Cesium.Math.toDegrees(extend.west);
        params.miny = Cesium.Math.toDegrees(extend.south);
      }
      return params;//返回屏幕所在经纬度范围
    }