（本篇文章前提是了解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, // 重点是这里
}),
});
...总结一下：这里主要就是学习实现的思路，代码写来写去也就是那样
标签：style,let,color,OpenLayers,rgba,new,图层,255,加载 From： https://blog.csdn.net/kyh419/article/details/141467197