OpenLayers如何设置图层闪烁效果并加载到地图上

        （本篇文章前提是了解openlayers具体使用方法）

        给图层增加闪烁效果，具体的实现思路其实就是从图层的style入手，通过设置两个不同的style并结合定时器，最后加载在地图上即可。

        当然，通过设置不同的style，不仅可以实现闪烁，还可以自定义实现，如大小缩放、颜色变换等等一系列效果。

以实现闪烁效果为例：

...
// 核心代码片段
// 设置第一个style
let styleA = new Style({
    fill: new Fill({
        color: "rgba(255, 0, 0, 0.9)",
    }),
    stroke: new Stroke({
        color: "rgba(255, 0, 0, 0.9)",
        width: 1,
    }),
    image: new CircleStyle({
        radius: 10,
        fill: new Fill({
            color: "rgba(255, 0, 0, 0.9)",
        }),
    }),
});
// 设置第二个style
let styleB = new Style({
    fill: new Fill({
        color: "rgba(255, 0, 0, 0.3)",
    }),
    stroke: new Stroke({
        color: "rgba(255, 0, 0, 0.5)",
        width: 1,
    }),
    image: new CircleStyle({
        radius: 10,
        fill: new Fill({
            color: "rgba(255, 0, 0, 0.3)",
        }),
      }),
    });
// 建立一个新图层
let layer = new VectorLayer({
    source: new VectorSource({
        features: features,
    }),
    style: styleA, // 这里初始先给一个style
});
// 实现闪烁效果
let flag = false;
const fun = () => {
    if (!flag) {
        layer.setStyle(styleA);
        flag = true;
    } else {
        layer.setStyle(styleB);
        flag = false;
    }
};
// 这里注意了，这个定时器因为会一直触发，得在有需要的地方clearInterval(this.timer)清除定时器
this.timer = setInterval(fun, 500);
// 最后添加到地图上OK
map.addLayer(layer);
...

大小缩放也顺便讲一下吧，这个一般运用到点图层的图标上：

...
// 设置scale字段实现图标大小缩放
let styleA = new Style({
    image: new Icon({
        anchor: [0.5, 0.5], // 这些属性的相关设置自己百度，这里不再赘述
        anchorOrigin: "top-right",
        offsetOrigin: "top-right",
        src: icon,
        scale: 0.8, // 重点是这里
    }),
});
let styleB = new Style({
    image: new Icon({
        anchor: [0.5, 0.5],
        anchorOrigin: "top-right",
        offsetOrigin: "top-right",
        src: icon,
        scale: 0.6, // 重点是这里
    }),
});
...

总结一下：这里主要就是学习实现的思路，代码写来写去也就是那样