cesium实现区域贴图及加载多个gif动图

1、cesium加载多个gif动图

Cesium的Billboard支持单帧纹理贴图,如果能够将gif动图进行解析,获得时间序列对应的每帧图片,然后按照时间序列动态更新Billboard的纹理,即可实现动图纹理效果。为此也找到了相对于好一点的第三方库libgif能够将gif转化为一帧帧图像,正好能够满足我们的需求!!!

javascript 复制代码
let gifImgList = [];
  data?.forEach((tag) => {
    let url = huangren;
    let gifDiv = document.createElement("div");
    let gifImg = document.createElement("img");

    // gif库需要img标签配置下面两个属性
    gifImg.setAttribute("rel:animated_src", url);
    gifImg.setAttribute("rel:auto_play", "1"); // 设置自动播放属性
    gifDiv.appendChild(gifImg);
    let superGif = new SuperGif({
      gif: gifImg,
    });
    gifImgList.push(superGif);
  });

  data?.forEach((tag, ind) => {
    gifImgList[ind].load(function () {
      onViewer.entities.add({
        _content: tag,
        position: new Cesium.Cartesian3.fromDegrees(
          Number(tag.longitude),
          Number(tag.latitude),
          100
        ),
        billboard: {
          //图标
          image: new Cesium.CallbackProperty(() => {
            // 转成base64,直接加canvas理论上是可以的,这里设置有问题
            return gifImgList[ind].get_canvas().toDataURL();
          }, false),
          scale: 0.25,
          // width: 36,
          // height: 36,
          //sizeInMeters: true,//以米为单位,近大远小
          //pixelOffset: new Cesium.Cartesian2(0,20), //设置左右、上下移动
          //rotation:1.58, //设置旋转角度
          //scaleByDistance: new Cesium.NearFarScalar(20000,1,8000000, 0.1), //设置近大远小
          //pixelOffsetScaleByDistance: new Cesium.NearFarScalar(20000,10,8000000,100), //设置偏移量
          // translucencyByDistance:new Cesium.NearFarScalar(20000,1,8000000,0), //设置透明
          // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
          //   20000,
          //   8000000
          // ), //限制区域显示与隐藏
          //水平方向
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          // 垂直方向
          verticalOrigin: Cesium.VerticalOrigin.BASELINE,
        },
      });
    });
  });

2、cesium加载geoJSON并贴图

javascript 复制代码
const dataSource = new Cesium.GeoJsonDataSource();
  dataSource
    .load("https://geo.datav.aliyun.com/areas_v3/bound/110000.json", {
      clampToGround: true,
    })
    .then(() => {
      onViewer.dataSources.add(dataSource);
      const entities = dataSource.entities.values;
      for (let i = 0; i < entities.length; i++) {
        const entity = entities[i];
        // 修改 entity 样式
        entity.polygon.material = new Cesium.ImageMaterialProperty({
          image: beijin,
        });
        entity.polygon.outline = false;
        // 添加 entity 的 polyline
        entity.polyline = {
          positions: entity.polygon.hierarchy._value.positions,
          width: 2,
          material: Cesium.Color.fromCssColorString("#ffff"),
          clampToGround: true,
        };
        // 获取一个 entity 的中心位置
        const center = Cesium.BoundingSphere.fromPoints(
          entity.polygon.hierarchy._value.positions
        ).center;
        // 设置中心位置
        entity.position = center;
        // 添加 text
        entity.label = {
          text: entity.properties.name,
          color: Cesium.Color.fromCssColorString("#fff"),
          font: "normal 32px MicroSoft YaHei",
          showBackground: true,
          scale: 0.5,
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT_CLICK,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          disableDepthTestDistance: 10000.0,
        };
      }

      // if (zoomto) {
      onViewer.zoomTo(dataSource);
      // }
    });

  return dataSource;
相关推荐
在下胡三汉5 天前
3dmax烘培插件3dmax法线贴图烘焙教程glb和gltf元宇宙灯光效果图烘焙烘焙光影贴图支持VR渲染器
vr·贴图
二川bro10 天前
第21节:环境贴图与PBR材质升级——构建电影级真实感渲染
材质·贴图
AndrewHZ11 天前
【三维渲染技术讨论】Blender输出的三维文件里的透明贴图在Isaac Sim里会丢失, 是什么原因?
算法·3d·blender·nvidia·贴图·具身智能·isaac sim
CG_MAGIC21 天前
主流 3D 模型格式(FBX/OBJ/DAE/GLTF)材质支持与转换操作指南
3d·渲染·动画·材质·贴图·3d 模型格式·材质支持与转换操作指南
渲吧-云渲染1 个月前
3ds MAX文件/贴图名称乱码?6大根源及解决方案
3d·贴图
CG_MAGIC1 个月前
3D 建模核心术语扫盲:拓扑、UV 展开、烘焙与 AO 贴图解析
3d·渲染·贴图·uv·拓扑·渲云渲染·ao 贴图
bug总结2 个月前
Three.js 实战:使用 PBR 贴图打造真实地面材质
材质·贴图
向宇it2 个月前
【实现100个unity特效】unity中使用ShaderGraph实现一个贴图UV循环移动滚动的指示效果
游戏·3d·unity·c#·游戏引擎·贴图·uv
小卡不对头2 个月前
电脑截图软件排行榜 Windows和mac电脑截图软件TOP10
windows·macos·电脑·笔记本电脑·贴图
Thomas_YXQ2 个月前
Unity URP法线贴图实现教程
开发语言·unity·性能优化·游戏引擎·unity3d·贴图·单一职责原则