Cesium Note13:自定义帧数

自定义帧数

• 源代码 Source\Scene\PerformanceDisplay.js

修改代码

• 这个参数差距有些大

const getTimestamp = () => {
      let getTime;

      if (
        typeof performance !== "undefined" &&
        typeof performance.now === "function" &&
        isFinite(performance.now())
      ) {
        getTime = function () {
          return performance.now();
        };
      } else {
        getTime = function () {
          return Date.now();
        };
      }
      return getTime();
    }
    class CesiumFPSUtil {
      constructor(containerId: any) {
        proxy.id = containerId || "fpsdiv";
        proxy._lastFpsSampleTime = getTimestamp();
        proxy._lastMsSampleTime = getTimestamp();
        proxy._fpsFrameCount = 0;
        proxy._msFrameCount = 0;
        this.createDiv();
      }
      createDiv() {
        const parent = document.getElementById(proxy.id)!;
        const fpsDiv = document.createElement("div");
        fpsDiv.className = "info-content";

        proxy._fpsText = document.createElement("span");
        proxy._msText = document.createElement("span");
        fpsDiv.append(proxy._fpsText);
        fpsDiv.append(proxy._msText);
        parent.append(fpsDiv);
      }
      update() {
        let time = getTimestamp();
        proxy._fpsFrameCount++;
        let updateDisplay = true;
        let fpsElapsedTime = time - proxy._lastFpsSampleTime;
        if (fpsElapsedTime > 1000) {
          var fps = "N/A";
          if (updateDisplay) {
            fps = String(((proxy._fpsFrameCount * 1000) / fpsElapsedTime) | 0);
          }
          proxy._fpsText.innerText = fps + " FPS";
          proxy._lastFpsSampleTime = time;
          proxy._fpsFrameCount = 0;
        }
        proxy._msFrameCount++;
        let msElapsedTime = time - proxy._lastMsSampleTime;
        if (msElapsedTime > 200) {
          let ms = "N/A";
          if (updateDisplay) {
            ms = (msElapsedTime / proxy._msFrameCount).toFixed(2);
          }
          proxy._msText.innerText = ms + " MS";
          proxy._lastMsSampleTime = time;
          proxy._msFrameCount = 0;
        }
      }
    }

    const fpsInfo = new CesiumFPSUtil('fpsdiv')
    var fpsPostEvent = function () {
      fpsInfo.update()
    }
    proxy.viewer.scene.postRender.addEventListener(fpsPostEvent)

Cesium系列(8)--自定义帧率显示

Cesium 提供了不少用于调试的工具，特别方便在开发的时候使用。其中帧率显示特别方便我们对性能调试。因为帧率到了30以下就基 本会开始卡顿了。如果想一直显示帧率，直接用 Cesium 默认的话，有时候会跟我们的界面的整体风格不搭配。那么就得自定义来实现 了。 看个动态的 因为用的是 **Cesium** 中的 **postRender** 监听事件，所以多少会跟自带的毫米值（ms）有点区别， 但是跟PFS值基本保持一致。而有参考价 值的主要是 FPS值，在实际使用中，这一点点的差距不会影响判断。 ## 实现 代码的实现很简单，我也是在源代码中查找的，然后改了一下。 完整代码都放到 github 上，需要的移步 Cesium-demo-view

https://jercky.top/2021/06/23/Cesium%E5%85%A5%E9%97%A8-8/

Cesium显示经纬度,海拨,方向,俯仰角,帧速等信息

为了方便看到鼠标所指向的经纬度、高度、方向等信息，需要在地图界面上添加对应信息的显示，效果如下所示，在地图的底部有一个黑色的状态栏显示对应的经纬度,海拨,方向,俯仰角,帧速等信息：平台还在努力开发中，可以先预览下效果。 cgis 在 cesium中，添加鼠标事件，都是使用 ScreenSpaceEventHandler这个类，该类主要是用于处理用户输入事件，首先进行实例化，然后再调用 setInputAction 函数来添加相应的事件，如下所示： var handler =new Cesium.ScreenSpaceEventHandler(scene.canvas); const mouseOverHandler = function(movement){ let endPosition = movement.endPosition; } handler.setInputAction(mouseOverHandler, Cesium.ScreenSpaceEventType.MOUSE_MOVE) 通过 endPosition 来获取当前点的坐标。 主要是通过指定的椭球或者地图对应的坐标系，将鼠标的二维坐标转换为对应椭球体三维坐标，然后再将弧度转为度的十进制度表示。如下所示： //得到当前三维场景的椭球体 var ellipsoid = this.scene.globe.ellipsoid; var viewer = this.scene; var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid); if (cartesian) { //将笛卡尔坐标转换为地理坐标 var cartographic = ellipsoid.cartesianToCartographic(cartesian); //将弧度转为度的十进制度表示 var

https://www.jianshu.com/p/040a20d2eab5

我的方案

1. 打开Cesium的默认FPS和MS

proxy.viewer.scene.debugShowFramesPerSecond = true; // 获取帧数FPS

1. js获取Cesium默认的FPS、MS的div内容

let ms = document.getElementsByClassName("cesium-performanceDisplay-ms")[0].innerHTML;
let fps = document.getElementsByClassName("cesium-performanceDisplay-fps")[0].innerHTML;

state.ms = ms
state.fps = fps

document.getElementsByName("cesium-performanceDisplay")[0].style.display = "none";//隐藏

1. 自定义隐藏，使用css隐藏默认的FPS和MS

:deep .cesium-performanceDisplay {
  display: none;
}