如何用css3做openLayers3的闪烁效果

最近在做地图上的一个故障指示器,  要求有故障时,此指示器会呈现不同的展现样式, 用闪烁最好了!

但openLayers3中没有闪烁的效果,所以就借助CSS3的动画效果了,反正openLayers3也是使用了h5+css的,它们通用。

最终的效果是:

第一步:

在你的地图HTML文件中加一个div:

<!-- 故障指示器的闪烁 -->
<div id="css_animation"></div>

就这么一条哦!不要怀疑呢!

第二步:给这个div写css3的样式
<style>

/** 地图上的故障处理器显示效果*/
#css_animation{
    height:50px;
    width:50px;
    border-radius: 25px;
    background: rgba(255, 0, 0, 0.9);
    transform: scale(0);
    animation: myfirst 3s;
    animation-iteration-count: infinite;
}
@keyframes myfirst{
    to{
        transform: scale(2);
        background: rgba(0, 0, 0, 0);
    }
}

</style>

这两步做好后,你用chrom和360浏览器浏览应该有一个红色的扩散的效果,如果没有,你要换浏览器了。

如何把它弄到地图上去呢?只需要
 

var point_div = document.getElementById("css_animation");
var point_overlay = new ol.Overlay({
    element: point_div,
    positioning: 'center-center'
});
map.addOverlay(point_overlay);
point_overlay.setPosition([114.04911, 30.32815833]);

就可以了。

解释这段代码:首先,var point_div = document.getElementById("css_animation");获得具有动画效果的HTML元素;然后将其赋予 overlay 的 element 参数,overlay 还有一个参数是 positioning: 'center-center',表示 HTML 元素相对于 overlay 的定位点的方位,”center-center” 表示元素中心对准定位点中心;最后 map.addOverlay(point_overlay); 将 overlay 添加到地图中,此时的 overlay 是不可见的,最后一行:point_overlay.setPosition([11468382.41282299,3502038.887913635]);设置了 overlay 可见元素(也就是具有动画的元素)的位置,这样动画元素就设置到相应的点了。

这样,我们就实现了原来文章开头的效果。

学到了什么呢? 学到了openLayers3地图与h5+css3相结合的办法:如果想把H5和CSS的效果与地图相结合,可以那么,可以先做好HTML元素的效果,然后,用地图上的什么东西,把它当成一个element加入进去,它就进入了地图了。呵呵!

我们把html的dom加到openlayers以后又需要删除,该怎么删除呢?

openlayers已经给我们提供好参数了,通过getOverlays()可以获取到map上的所有overlays 代码如下

map.getOverlays().clear();

 

此文来源于:https://blog.csdn.net/qingyafan/article/details/49848455的实践成功!

 

阅读更多
换一批

没有更多推荐了,返回首页