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

1、cesium加载多个gif动图

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

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并贴图

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 

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: PHP中GET和POST方法的区别是什么？

在 PHP 中，GET 和 POST 是用于从客服务器托管网户端向服务器传递数据的两种常用的 HTTP 请求方法。它们之间的主要区别在于数据传递的方式和使用场景。 GET 方法： 数据传递方式： 使用 URL 参数传递数据，数据附加在 URL 后面，以 ? 开…