Cesium动态贴自定义图片或gif

最新推荐文章于 2026-06-26 00:23:31 发布

转载最新推荐文章于 2026-06-26 00:23:31 发布 · 758 阅读

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/lovefengruoqing/article/details/120451612?ops_request_misc=&request_id=&biz_id=102&utm_term=cesium%E8%B4%B4%E5%9B%BE&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-4-120451612.142^v74^pc_new_rank,201^v

收录于

cesium

cesium贴图

该文章介绍了如何在Cesium地图中加载并显示GIF图片作为动态贴图层。通过创建自定义的SingleTileImageryProvider，结合gifler库处理每一帧，并调整视角至特定区域。

（项目需要功能）学习笔记

方法一：

body,
html,
div {
  margin: 0;
  padding: 0;
}
#cesiumContainer {
  display: flex;
  flex-direction: row;
  height: 100vh;
  width: 100vw;
}

let wrapper = document.querySelector("#cesiumContainer");

let config = {
  imageryProvider: new Cesium.TileMapServiceImageryProvider({
    url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII")
  }),
  navigationInstructionsInitiallyVisible: false,
  projectionPicker: false,
  creditContainer: null,
  animation: true, // 是否创建动画小器件，左下角仪表
  baseLayerPicker: false, // 是否显示图层选择器
  fullscreenButton: false, // 是否显示全屏按钮
  geocoder: false, // 是否显示geocoder小器件，右上角查询按钮
  homeButton: false, // 是否显示Home按钮
  infoBox: false, // 是否显示信息框
  sceneModePicker: true, // 是否显示3D/2D选择器
  selectionIndicator: false, // 是否显示选取指示器组件
  timeline: true, // 是否显示时间轴
  navigationHelpButton: false // 是否显示右上角的帮助按钮
};
const viewer = new Cesium.Viewer(wrapper, config);

let canvas = document.createElement("canvas");
let url =
  "https://media.giphy.com/media/VbEq7lhC0gVMFUX819/giphy-downsized.gif?cid=ecf05e471i9fq42unyxtjoci88jd019z2aana25ytggjay33&rid=giphy-downsized.gif&ct=g";
let gifImageLayerList = {};
let rectangle = Cesium.Rectangle.fromDegrees(...[92.07, 27.67, 118.66, 39.45]);

function onDrawFrame(ctx, frame) {
  let { data_offset } = frame;

  if (gifImageLayerList[data_offset]) {
    viewer.imageryLayers.raiseToTop(gifImageLayerList[data_offset]);
  } else {
    ctx.canvas.width = frame.width;
    ctx.canvas.height = frame.height;

    ctx.drawImage(frame.buffer, 0, 0);

    const provider = new Cesium.SingleTileImageryProvider({
      url: canvas.toDataURL(),
      rectangle
    });
    let layer = viewer.imageryLayers.addImageryProvider(provider);
    gifImageLayerList[data_offset] = layer;
  }
}

gifler(url).frames(canvas, onDrawFrame);

viewer.camera.flyTo({
  destination: rectangle,
  orientation: {
    // heading: 0,
    // pitch: Cesium.Math.toDegrees(-90),
    // roll: 0
    heading: 0,
    pitch: Cesium.Math.toRadians(-90),
    roll: 0.0
  }
});

https://blog.csdn.net/lovefengruoqing/article/details/120451612?ops_request_misc=&request_id=&biz_id=102&utm_term=cesium%E8%B4%B4%E5%9B%BE&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-4-120451612.142^v74^pc_new_rank,201^v4^add_ask,239^v2^insert_chatgpt&spm=1018.2226.3001.4187

标签

#前端