Openlayers如何实现点闪烁扩散效果?本篇文章小编给大家分享一下Openlayers实现点闪烁扩散效果代码,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
点闪烁样式:
DOM的样式实现
css;">/**橙色点扩散闪烁样式*/ .point_animation{ background: #ff9900; border: 2px #ff9900 solid; border-radius: 50%; position: absolute; } .point_animation p, .point_animation span{ position: absolute; animation: point_animation 1.5s infinite; box-shadow: 0px 0px 1px #ff9900; margin: 0px; border-radius: 50%; } .point_animation span{ animation-delay: 0.8s; } @keyframes point_animation{ 10% { transform: scale(1); } 100% { transform: scale(8); } } /**红色点扩散闪烁样式*/ .css_animation{ border-radius: 25px; background: rgba(255, 0, 0, 0.9); transform: scale(0); animation: mypoint 3s; animation-iteration-count: infinite; } @keyframes mypoint{ to{ transform: scale(1.5); background: rgba(0, 0, 0, 0); } }
在地图上添加点—采用overlay添加DOM元素
需要用到Openlayers中的overlay元素,官方对于如何使用overlay做出了相关API说明
///创建overlay,element传入的是存在于web中的DOM元素 var popup = new ol.Overlay({ element: document.getElementById('popup') }); popup.setPosition(coordinate);//设置overlay的位置 map.addOverlay(popup);//讲overlay添加到地图上
具体代码
点扩散