Cesium JS按钮切换功能失效：无法持续更新相机定位

你的代码存在几个核心问题，导致点击无反应、无法实现持续更新相机位置的需求：

1. myFunction 仅被定义但从未被主动调用，没有触发执行的逻辑
2. myFunction 内的状态判断逻辑颠倒，应该在 buttonState 为 true 时执行相机定位
3. 没有绑定Cesium的渲染循环事件，无法实现"持续更新位置"的功能

以下是修复后的完整代码：

// 获取按钮元素
const camButton = document.getElementById("camButton");
// 状态控制变量
let buttonState = false;
// 保存tick事件引用，用于后续移除监听
let tickEventHandler = null;

// 按钮点击事件回调
camButton.addEventListener("click", () => {
  buttonState = !buttonState;
  
  if (buttonState) {
    // 开启模式：绑定Cesium时钟tick事件，每帧执行位置更新
    tickEventHandler = viewer.clock.onTick.addEventListener(() => {
      updateCameraPosition();
    });
    // 首次点击立即执行一次定位
    updateCameraPosition();
  } else {
    // 关闭模式：移除tick事件监听，停止更新
    if (tickEventHandler) {
      viewer.clock.onTick.removeEventListener(tickEventHandler);
      tickEventHandler = null;
    }
  }
});

// 相机位置更新函数
function updateCameraPosition() {
  // 校验payload数据有效性，避免报错
  if (!payload?.geometry?.coordinates) return;
  
  const [lon, lat] = payload.geometry.coordinates;
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(lon, lat, 5000000),
    // 可选：缩短飞行时长，避免频繁定位导致卡顿
    duration: 0.5
  });
}

关键修改说明： #

• 利用 viewer.clock.onTick 绑定Cesium的渲染循环事件，确保每帧都检查并更新相机位置
• 点击按钮时切换状态，开启模式绑定事件、关闭模式移除事件，避免不必要的性能消耗
• 修正状态判断逻辑，仅在开启状态（buttonState = true）时执行相机更新
• 添加payload数据有效性校验，避免因数据未加载或格式错误导致报错
• 简化按钮状态切换逻辑，用 buttonState = !buttonState 替代冗余的if-else判断

内容的提问来源于stack exchange，提问作者BrayanP500