介绍/* *橙色点扩散闪烁样式*/.point_animation {
背景:# ff9900;
宽度:6 px;
身高:6 px;
边界:2 px # ff9900固体;
这个特性:50%;
位置:绝对的;
}
.point_animation p, .point_animation跨度{
位置:绝对的;
宽度:4 px;
高度:4 px;
动画:point_animation 1.5 s无限;
不必:0 px 0 px 1 px # ff9900;
保证金:0 px;
这个特性:50%;
}
.point_animation跨度{
animation-delay: 0.8秒;
}
@keyframes point_animation {
10% {
变换:规模(1);
}
100% {
变换:规模(8);
}
}/* *红色点扩散闪烁样式*/.css_animation {
高度:50 px;
宽度:50 px;
border - radius: 25 px;
背景:rgba (255, 0, 0, 0.9);
变换:规模(0);
动画:mypoint 3 s;
animation-iteration-count:无限;
}
@keyframes mypoint {
,{
变换:规模(1.5);
背景:rgba (0, 0, 0, 0);
}
} ///创建叠加,元素传入的是存在于网络中DOM的元素
var弹出=new ol.Overlay ({
元素:. getelementbyid(& # 39;弹出# 39;)
});
popup.setPosition(坐标);//设置覆盖的位置
map.addOverlay(弹出);//讲覆盖添加到地图上 & lt; !DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title>点扩散& lt;/title>
& lt;链接rel=皊tylesheet"https://www.yisu.com/zixun/href=" https://openlayers.org/en/v3.20.1/css/ol.css " type=" text/css ">
这期内容当中小编将会给大家带来有关使用Openlayers实现一个点闪烁扩散效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
点闪烁样式:
<强> DOM的样式实现
在地图上添加点——采用覆盖添加DOM元素
需要用到Openlayers中的覆盖元素,官方对于如何使用叠加做出了相关API说明
具体代码
