OpenLayers 3 之动态点扩散效果

最新推荐文章于 2025-04-17 09:48:12 发布

置顶

qingyafan

最新推荐文章于 2025-04-17 09:48:12 发布

阅读量1.4w

点赞数 10

分类专栏： WebGIS OpenLayers OpenLayers 文章标签： OpenLayers 点扩散效果地图事故点 WebGIS 地图动态点

本文链接：https://blog.csdn.net/qingyafan/article/details/49848455

版权

本文介绍了如何使用OpenLayers 3创建动态点扩散效果，以模拟地图上的事件影响范围。作者尝试了两种方法：一是通过设置动态GIF图片作为点样式，但未成功；二是结合CSS3动画，通过Popup实现预期的动态效果。文章提供了一个在雅安地震示例中应用此效果的情境，并给出了完整代码的GitHub链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当某个地方发生一些事情之后，如果我们添加一个静态点在地图上，并不能引起注意，那我们可以放置一个动态的点，类似于在水中投入一个石头，水波扩散的效果，象征发生的事件有一定的影响区域，那么，我们如何利用 OpenLayers3 做出这样的效果呢？我们要实现的效果如下图，之前雅安发生过地震，我们在雅安放置一个这样的点，表示雅安发生了地震。

实现点扩散效果图

图1 点扩散效果图

如何实现呢，我们首先想到，在矢量图层中添加一个点，对其赋予 ol.style.Icon 样式，然后将图片的 src属性赋值为一张 GIF 图片，那我们就进行尝试。

注：文章中例子的完整代码，我放在了 GitHub 中，想看的朋友可以到这个链接看一下： https://github.com/QingyaFan/openlayers3-examples 。

`ol.style.Icon`

我们首先初始化一个矢量图层，并添加 Icon 样式，并添加到地图中：

var gif_vector = new ol.layer.Vector({
    source: new ol.source.Vector(),
    style: new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [0.5, 45],
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixel',
            opacity: