(本篇文章前提是了解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, // 重点是这里
}),
});
...
总结一下:这里主要就是学习实现的思路,代码写来写去也就是那样