Cesium如何捕获地图缩小事件并在指定高度阈值切换影像图层

你当前的代码存在两个可优化的点，会导致功能不稳定：

• camera.changed 事件会在相机位置、角度每次变动时高频触发，没有状态判断的情况下会反复执行删除、新增图层的逻辑，容易造成地图卡顿、图层加载异常
• 直接取下标为0的图层删除的逻辑不稳定，如果后续有新增其他图层的操作，可能误删非底图的内容

推荐采用预加载双图层+状态锁的方案实现，性能更稳定，不会出现反复加载的问题：

var viewer = new Cesium.Viewer("cesiumContainer", {
  // 初始化时关闭默认底图，方便自己管理图层
  baseLayer: false
});
var camera = viewer.camera;
// 预加载两个需要切换的底图
// 低高度显示的影像层
var highDetailLayer = viewer.imageryLayers.addImageryProvider(
  new Cesium.IonImageryProvider({ assetId: 3812, maximumLevel : 5 })
);
// 高高度显示的影像层，assetId可替换为你需要的底图资源
var lowDetailLayer = viewer.imageryLayers.addImageryProvider(
  new Cesium.IonImageryProvider({ assetId: 2 })
);
// 初始隐藏低高度才显示的高精度层
highDetailLayer.show = false;
// 状态锁，避免同一状态下反复执行切换逻辑
var isHighDetailActive = false;
const SWITCH_THRESHOLD = 4251907;

camera.changed.addEventListener(function() {
  var height = Cesium.Cartographic.fromCartesian(camera.position).height;
  // 高度低于阈值且当前显示的是低精度层，才执行切换
  if (height < SWITCH_THRESHOLD && !isHighDetailActive) {
    lowDetailLayer.show = false;
    highDetailLayer.show = true;
    isHighDetailActive = true;
  } 
  // 高度高于阈值且当前显示的是高精度层，才执行切换
  else if (height >= SWITCH_THRESHOLD && isHighDetailActive) {
    lowDetailLayer.show = true;
    highDetailLayer.show = false;
    isHighDetailActive = false;
  }
  console.log('当前相机高度：', height);
});

优化建议：可以给阈值设置±500米的缓冲区间，避免相机高度在阈值附近小幅浮动时频繁触发图层切换。

如果你确实需要动态增删图层而不是预加载，只需要在切换逻辑里加图层存在性判断，只有对应图层不存在的时候才执行增删操作即可，避免重复执行逻辑。

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