【前端小记】--OpenLayers--3.地图实现点位闪烁（由内而外扩散圆）

尤记昨日书

已于 2023-05-06 17:39:04 修改

阅读量1.3k

点赞数 4

分类专栏：前端小记 OpenLayers 文章标签：前端

于 2023-05-06 13:52:45 首次发布

xiaohui

本文链接：https://blog.csdn.net/am_xiao_hui/article/details/130523615

版权

本文介绍了如何在OpenLayers地图中创建一个点位闪烁的动画效果，具体实现是通过利用Openlayers的postcompose事件，不断改变圆的半径以达到由内而外扩散的视觉动画。

摘要由CSDN通过智能技术生成

需求描述

在Openlayers地图的中，绘制一个点位闪烁动画的效果，说是闪烁，其实就是一个由内而外扩散的圆，如下：

点位闪烁

解决思路

实现这个需求的时候，我们可以利用Openlayers自带的postcompose事件，只要地图进行渲染就会触发这个事件，也就是说，只要我们改变图层的feature或其他东西，就会让地图重新渲染。所以利用这一点，如果我们在postcompose里面一直改变圆的半径，就会循环成动画的效果。
我在加这个图层时，封装了一个函数，传入map（地图）、layer（图层）、record（点位）。

import {
    Feature } from 'ol';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector';
import {
    Stroke,  Circle, Style } from 'ol/style.js';
import {
    Point } from 'ol/geom';
import {
    transform } from 'ol/proj';
import {