openlayers 雷达回波的实现

前言：本文不包含html 跟css代码 ，相关的样式调整自行编写并且处理，主要是实现一个完整的流程：点击播放，地图上响应得显示贴好的图片。首先给部分截图说明。

这里稍微解释下为啥默认是最后一个，因为公司领导这么说，我也不知道就照着来呗，要改也不是什么难题。

相关实现

观察一下相关要素，有active-class ， 动态生成的时间，上一个回波，下一个回波，开始播放。我们一个个介绍。

首先该注意interval的处理，在interval 期间禁止再次点击避免过程中因为函数依赖于组件中的状态而导致出现bug。

点击回波播放获取到相关的色块的dom节点，动态的移除添加active-class，

// 雷达回波播放  实现两个功能 一个是用户的交互、 一个是地图的叠加层的加载
    playradar: function () {
      // 实际上就是在叠加层上画张图片 同时通过interval轮询 改变图片地址。
      let candraw = this.radarStatus;
      if (!candraw) {
        this.$message("在自动播放期间禁止重复点击");
        return;
      }
      this.radarStatus = false;
      let index = 0;

      // api 需要的数据 处理 extent，imgsrc  startTime 应该是通过之前的展示数据获取的不在这请求的。
      // 注意到一个细节 每次自动播放都会有数据被推入存储数组 故增加一个状态表示当前是否该push进去

      let rectDoms = document.getElementsByClassName("rect");
      rectDoms[this.radarIndex].classList.remove("rect-active");

      this.radarPlayShow = true;
      //this.drawradarToMap(index);

      let inter = setInterval(() => {
        // 交互事件
        this.radartooltipDom.style.left = this.offsetArray[index] + "px";
        this.radarplaytime = this.radarTimeArray[index];
        if (index - 1 >= 0) {
          rectDoms[index - 1].classList.remove("rect-active");
        }
        rectDoms[index].classList.add("rect-active");
        //this.drawradarToMap(index);
        if (index == 19) {
          // 清楚定时器，同时表示radar按钮可用了。
          clearInterval(inter);
          this.radarStatus = true;
          this.radarIndex = 19;
          this.firstPush = false;
          return;
        }
        index++;
      }, 200);
    },

// 地图中 绘制叠加层 绘制图片
    /**
     * 测试中采用index  方便我图片的展示主要是为了功能的初步实现
     */
    drawradarToMap: function (index) {
      // var bounds = [72.985, 17.006, 134.416, 54.815];
      var extent = [
        63.9796331669,
        14.7451916711,
        140.1812559169,
        55.4673388687,
      ];
      let imageLayer = this.imageLayer;
      let url = "http://localhost:8888/testfiles/" + index + ".jpg";
      let imagesource = new ImageStatic({
        url,
        imageExtent: extent,
        projection: "EPSG:4326",
      });
      imageLayer.setSource(imagesource);
      imageLayer.changed();
    },
其中imageLayer 依赖于 一个函数进行生成 ，在这个节点上我觉得数据与行为分离比较好处理，故：
// 雷达相关的参数生成:::::::::::::::
    radarParamsGenerate: function () {
      // 时间的生成
      let startTime = new Date("2021-4-26");
      const distance = 14;
      let startLeft = -27;
      this.offsetArray.push(startLeft);
      for (let i = 0; i < 20; i++) {
        startTime = new Date(startTime.valueOf() + 1000 * 60 * 6);
        this.radarTimeArray.push(dateOperation.formatDateToHour(startTime));
        this.offsetArray.push(startLeft + distance);
        startLeft += distance;
      }
      let image = new ImageLayer();
      image.set("radarLayer", true);
      this.imageLayer = image;
      this.map2d.addLayer(image);
    },

其中distance、startleft 是 相关dom操作的数值，这个可以自己看看，只做思路的阐述。保存一个timeArray，offsetArray ，一个用于对tooltip 组件进行数据的改变，一个用于对tooltip组件的位置用于控制，同时创建一个图片图层，保存进当前组件中。将该图片绘制到地图中需要一个经纬度范围数组extent，这里注意一下：根据projection。新建一个ImageStatic让image图层加进去，changed说明改变视图。

上一个

// 雷达回波  上一个 为了避免重复的点击产生bug的情况 注意处理 在interval期间 锁死雷达按键事件
    prevradar: function () {
      let candraw = this.radarStatus;
      if (!candraw) {
        this.$message("在自动播放期间禁止重复点击");
        return;
      }
      if (this.radarIndex == 0) {
        this.$message("没有上一个雷达回波了");
        return;
      }
      let curIndex = this.radarIndex - 1;
      this.drawradarToMap(curIndex);
      let rectDoms = document.getElementsByClassName("rect");
      this.radartooltipDom.style.left = this.offsetArray[curIndex] + "px";
      this.radarplaytime = this.radarTimeArray[curIndex];
      rectDoms[curIndex + 1].classList.remove("rect-active");
      rectDoms[curIndex].classList.add("rect-active");
      this.radarIndex = curIndex;
    },

简单点理解就是：通过监听控件的改变去新生成一个imagesource改变图片的url地址，同时更新map视图，这就是我的实现思路。

实例效果

新增修改 来自2021年6月15日

之后重构代码的时候发现这段写的差强人意（普及语文知识：大体上还算满意嘿嘿），但部分 仍然需要调整。这次的代码应该说更简洁清爽，且更符合vue框架内容的使用。
首先所需的雷达数据的生成 单独有一个生成函数 生成并保存至组件中

雷达数据生成

// 雷达相关的参数生成:::::::::::::::
    radarParamsGenerate: async function () {
      // 时间的生成
      const { data } = await getRadarData();

      const distance = 14;
      let startLeft = -1;
      this.offsetArray.push(startLeft);
      for (let i = 0; i < 20; i++) {
        this.radarTimeArray.push(
          dateOperation.formatDateToHour(new Date(data.times[i]))
        );
        this.offsetArray.push(startLeft + distance);
        startLeft += distance;
        // 如果是最后一个、 把当前的时间作为数据时间
        if (i == 19) {
          this.radarDatetime = dateOperation.formatDate(data.times[i]);
        }
      }
      let image = new ImageLayer();
      image.set("radarLayer", true);
      this.imageLayer = image;
      this.map2d.addLayer(image);
      // 根据要求 初始化的时候 放于最右边
      this.radarplaytime = this.radarTimeArray[19];
      this.radarImages = data.images;
    },

相关的初始化配置在这里就可以完成，这个生成函数做了如下事情：
1、控制初始的偏移left 跟每一格 块的代码的间隔
2、 由于我们在播放的途中 需要相应的移动tooltip组件，故需要把这个跟索引一一对应的偏移数组保存起来，这样子 当我们切换索引的时候 ，同步这个状态只需要简单的引用 而不需要计算。这也是我将这个数组保存在组件中的最大原因。显示在tooltip组件中的时间也是同理，不再赘述。

播放雷达

// 雷达回波播放  实现两个功能 一个是用户的交互、 一个是地图的叠加层的加载
    playradar: function () {
      // 实际上就是在叠加层上画张图片 同时通过interval轮询 改变图片地址。
      let candraw = this.radarStatus;
      if (!candraw) {
        clearInterval(this.radarInterval);
        this.radarStatus = true;
        this.radarPlayOrPause = !this.radarPlayOrPause;
        return;
      }
      this.radarControlWay = "";
      this.radarPlayOrPause = true;
      this.radarStatus = false;
      let index = this.radarIndex == 19 ? 0 : this.radarIndex;

      // api 需要的数据 处理 extent，imgsrc  startTime 应该是通过之前的展示数据获取的不在这请求的。

      this.radarPlayShow = true;
      this.drawradarToMap(index);

      let inter = setInterval(() => {
        // 交互事件
        this.radarLeft = this.offsetArray[index] + "px";
        this.radarplaytime = this.radarTimeArray[index];
        this.radarIndex = index;
        this.drawradarToMap(index);
        if (index == 19) {
          // 清楚定时器，同时表示radar按钮可用了。
          clearInterval(inter);
          this.radarStatus = true;
          this.radarIndex = 19;
          this.radarPlayOrPause = false;
          return;
        }
        index++;
      }, 1000);
      //  这里 暂停 显然需要保存这个定时器 将他进行清除
      this.radarInterval = inter;
    },

也许你会对一连串的this感到疑惑，别着急，观察下面组件。

下面5行 其实可以省略，这是我个人业务的需求，比如说点击某个块，相应的切换 才使用到 这5行变量。
观察上面代码的核心部分，其实就是通过interval定时器 根据索引 去修改组件显示的data 从而避免了之前操作dom的写法。本质上修改不大，但更符合vue的理念：数据更新，仅此而已。
下图是radar-tooltip组件的相关html代码

上一个、下一个 本质上等同于播放中的改变索引、只是加一减一的区别罢了。
接着补充一点，如果你感觉到强制刷新了缓存后（即用户第一次进入页面时，这个雷达回波显示并不顺畅），显而易见的，这是由于加载图片需要时间，这里跟代码本身并无关系，但我们一般是可以通过预加载的方式去优化的。