记录入门cesium——cesium全球动态贴图,使用场景气象、海冰分布时序

hint:

"@supermap/vue-iclient3d-webgl": "^1.0.9"

方案一:

imageList = [
        {image:require("../../static/Image_15.png")},
        {image:require("../../static/Image_16.png")},
        {image:require("../../static/Image_17.png")},
        {image:require("../../static/Image_18.png")},
        {image:require("../../static/Image_19.png")},
        {image:require("../../static/Image_20.png")},
        {image:require("../../static/Image_21.png")},
        {image:require("../../static/Image_22.png")},
        {image:require("../../static/Image_23.png")},
        {image:require("../../static/Image_24.png")},
        {image:require("../../static/Image_25.png")},
        {image:require("../../static/Image_26.png")},
        {image:require("../../static/Image_27.png")},
        {image:require("../../static/Image_28.png")},
        {image:require("../../static/Image_29.png")},
        {image:require("../../static/Image_30.png")}
      ]



setInterval(() =>{
      let newPic = that.imageList.shift()
      viewer.imageryLayers.remove()
      let c = viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
          url : newPic.image
      }));
      that.imageList.push(newPic)
      setTimeout(() =>{
        viewer.imageryLayers.remove(c)
      },430)
    },230)

结论:非常吃性能,切图太快了就不行。
方案二:
采用了CallbackProperty类回调函数延迟计算,它可以实时自我调用。要求:一定是全球贴图。

this.entities = viewer.entities.add({
      rectangle: {
            coordinates: Cesium.Rectangle.fromDegrees(
                    -180.0,
                    -90.0,
                    180.0,
                    90.0
                  ),
            granularity:Cesium.Math.RADIANS_PER_DEGREE*10,
            material: new Cesium.ImageMaterialProperty({
              image:new Cesium.CallbackProperty(() => {
                let newPic = imageList.shift()
                imageList.push(newPic)
                    return newPic.image;
                }, false)
            })
        }
    });

结论:最开始没有设置 granularity的时候,只有2帧率,改成默认值10倍以后有大概60帧率。

你可能感兴趣的:(cesium前端webgis)