如何用css3做openLayers3的闪烁效果

谁践踏了优雅 2022-05-10 06:42 583阅读 0赞

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

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

最终的效果是：

![70][]

第一步：

在你的地图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][https_blog.csdn.net_qingyafan_article_details_49848455]的实践成功！

[70]: /images/20220510/3b7300eb92414bb5980779ebdd31e211.png
[https_blog.csdn.net_qingyafan_article_details_49848455]: https://blog.csdn.net/qingyafan/article/details/49848455