Openlayer静态图片上图

实现效果图如下

实现思路

代码块如下

    var extent = [112.93, 24.232293, 118.975576, 30.4];
    var imgLayer = new ol.layer.Image({
      source: new ol.source.ImageStatic({
        url: require("../assets/img/wind.png"), // 根据需求添加
        imageExtent: extent
      })
    });

扩展效果

思路一：通过canvas裁减边界外多余部分

代码块(可参考)

    imgLayer.on("prerender", event => {
      this.clip(event, clipgeom);
    });
    imgLayer.on("postrender", event => {
      var ctx = event.context;
      ctx.restore();
    });

思路二：通过定时更新数据源实现动画效果

    let index = 0;
    setInterval(() => {
      if (index === imgs.length) {
        index = 0;
      }
      imgLayer.setSource(
        new new ol.source.ImageStatic({
          url: imgs[index], // 这里添加静态图片的地址
          imageExtent: extent
        })
      );
      index++;
    }, 1000);

效果图如下

注意事项：

  1、先获取左下角和右上角的坐标（本教程中以4326坐标系为例），获取坐标可百度ArcMap或者QGIS的空间校准的方法；
  2、静态图片不要太大，否则会影响加载效果（本文测试数据大小：250kb左右）。