视角屏幕范围

最新推荐文章于 2024-09-04 20:18:34 发布

CesiumMaster

最新推荐文章于 2024-09-04 20:18:34 发布

阅读量81

点赞数

分类专栏： Cesium 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_43976807/article/details/131670931

版权

Cesium 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文深入探讨了HTML和JavaScript如何在前端开发中处理视角屏幕范围的问题。从浏览器视口到CSS单位的转换，再到JavaScript的窗口对象API，通过实例解析如何动态调整内容以适应不同屏幕尺寸，实现响应式布局。同时，讨论了如何利用Intersection Observer API来监控元素进入或离开视口，提升用户体验。

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

  function getCesiumViewerExtend () {
      let params = {};
      let canvas = viewer.scene.canvas;
      let upperLeft = new Cesium.Cartesian2(0, 0); //canvas左上角坐标转2d坐标
      let lowerRight = new Cesium.Cartesian2(
        canvas.clientWidth,
        canvas.clientHeight
      );
      let ellipsoid = viewer.scene.globe.ellipsoid;
      let upperLeft3 = viewer.camera.pickEllipsoid(upperLeft, ellipsoid); //2D转3D世界坐标
      let lowerRight3 = viewer.camera.pickEllipsoid(lowerRight, ellipsoid); //2D转3D世界坐标
      if (upperLeft3 && lowerRight3) {
        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 maxy = Cesium.Math.toDegrees(upperLeftCartographic.latitude); //弧度转经纬度
        let maxx = Cesium.Math.toDegrees(lowerRightCartographic.longitude); //弧度转经纬度
        let miny = Cesium.Math.toDegrees(lowerRightCartographic.latitude); //弧度转经纬度
        params.minx = minx; // 最小经度
        params.maxx = maxx; // 最大经度
        params.miny = miny; // 最小纬度
        params.maxy = maxy; // 最大纬度
      } else {
        let extend = viewer.camera.computeViewRectangle();
        // 最大经度
        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); //弧度转经纬度
      }
      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(params.minx, params.maxy, 0), // 计算实体位置属性
        point: {
          color: new Cesium.Color(1, 0, 0, 1),
          pixelSize: 10
        }
      })
      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(params.maxx, params.miny, 0), // 计算实体位置属性
        point: {
          color: new Cesium.Color(0, 1, 0, 1),
          pixelSize: 10
        }
      })
    }