Cesium中按钮点击事件调用viewer.camera.flyTo无相机移动问题

在按钮点击的事件监听器中调用viewer.camera.flyTo方法时，相机没有任何视觉移动效果，控制台也无报错。但如果在页面加载阶段（事件监听器外部）调用该方法，就能正常生效。

import { Viewer, Cartesian3, Math } from "cesium";

document.addEventListener("DOMContentLoaded", () => {
  // 创建Viewer实例，启用默认渲染循环
  const viewer = new Viewer("cesiumContainer", {
    useDefaultRenderLoop: true
  });

  // 设置初始视角，与目标位置明显区分
  viewer.camera.setView({
    destination: Cartesian3.fromDegrees(-90.0, 40.0, 15000000)
  });

  // 创建测试用控制按钮
  const controlsDiv = document.getElementById("controls");
  if (!controlsDiv) return;
  controlsDiv.innerHTML = "";

  const moveToDebugBtn = document.createElement("button");
  moveToDebugBtn.textContent = "飞至调试实体";
  controlsDiv.appendChild(moveToDebugBtn);

  
  // 无法正常工作的代码
  moveToDebugBtn.addEventListener("click", () => {
    console.log("调用带朝向参数的flyTo...");
    viewer.camera.flyTo({
      destination: Cartesian3.fromDegrees(-117.16, 32.71, 15000.0),
      orientation: {
        heading: Math.toRadians(0),
        pitch: Math.toRadians(-45),
        roll: 0
      },
      duration: 3
    });
  });
});

1. 修复命名冲突问题 #

你导入的Cesium Math 与全局 Math 对象重名，部分编译环境可能出现解析异常。全局 Math 没有toRadians方法，若意外调用全局对象会导致朝向参数计算错误，相机看似无动作。

修改方式：重命名导入的Cesium Math：

import { Viewer, Cartesian3, Math as CesiumMath } from "cesium";

在事件回调中使用重命名后的对象：

orientation: {
  heading: CesiumMath.toRadians(0),
  pitch: CesiumMath.toRadians(-45),
  roll: 0
}

2. 改用Viewer实例的flyTo方法 #

Cesium的Viewer.flyTo会自动处理渲染循环和相机状态，比直接操作camera更稳定：

moveToDebugBtn.addEventListener("click", () => {
  console.log("调用flyTo...");
  viewer.flyTo({
    destination: Cartesian3.fromDegrees(-117.16, 32.71, 15000.0),
    orientation: {
      heading: CesiumMath.toRadians(0),
      pitch: CesiumMath.toRadians(-45),
      roll: 0
    },
    duration: 3,
    complete: () => console.log("飞行完成"),
    cancel: () => console.log("飞行被取消")
  });
});

添加complete和cancel回调可排查飞行是否被触发或中断。

3. 手动触发渲染更新 #

即使启用了默认渲染循环，也可在点击事件中手动请求渲染，确保相机状态及时更新：

moveToDebugBtn.addEventListener("click", () => {
  viewer.camera.flyTo({
    // 原有参数
  });
  viewer.scene.requestRender();
});

内容的提问来源于stack exchange，提问作者J'e