vue+openlayers实现水波纹样式点（图层方式）

PS：以下所有的代码都是基于搭建好的环境后才能运行的

环境搭建，👉Vue+OpenLayers入门（加载OSM在线地图）

环境搭建好后，就可以开始愉快地写代码了。

step1：引入ol包里面需要用到的东西

import Feature from 'ol/Feature';
import {Point} from 'ol/geom';
import {Style, Fill, Stroke, Circle as CircleStyle} from 'ol/style';
import {Vector as VectorLayer} from 'ol/layer';
import VectorSource from 'ol/source/Vector';
import {fromLonLat} from 'ol/proj';

step2：新建图层

let pointFeature = new Feature({ // 新建一个点要素，此处地lonlat可以换成EPSG:3857下地任何坐标
  geometry: new Point(lonlat, 'XY'),
});
if (this.getLayerByName('dynamicLayer')) { // 判断地图上是否存在dynamicLayer这个图层，若存在，则清空图层上的要素后再添加要素
  this.getLayerByName('dynamicLayer').getSource().clear();
  this.getLayerByName('dynamicLayer').getSource().addFeature(pointFeature);
  return;
};
// 地图上不存在dynamicLayer时，新建dynamicLayer图层，并添加至地图
let dynamicPointLayer = new VectorLayer({
  source: new VectorSource({
    features: [pointFeature],
  }),
  name: 'dynamicLayer',
  zIndex: 2,
});
this.map.addLayer(dynamicPointLayer);

step3：绑定postcompose监听事件（重要）

let radius = 4; // radius一定要放在监听事件外面
let opacity = 1; // 波纹的透明度
this.map.on('postcompose', (event) => { // 给地图绑定事件，地图渲染后触发
  let dynamicFeatures = this.getLayerByName('dynamicLayer').getSource().getFeatures();
  opacity = (25 - radius) * (1 / 25) ; // 不透明度 radius为0时，不透明；radius为25时，透明
  dynamicFeatures.forEach((item) => {
    item.setStyle(new Style({
      image: new CircleStyle({
        radius: radius,
        stroke: new Stroke({
          color: 'rgba(255, 0, 0, '+ opacity +')', // 通过rgba控制波纹的产生和消失
          width: 2,
        }),
      })
    }));
  });
  radius = radius + 0.3;
  radius = radius >= 25 ? 4 : radius;
});
this.map.render(); // 触发地图绑定的postcompose事件

代码汇总：（addDynamicLayerToMap(lonlat)方法只需传入一个4326坐标系下的坐标便可使用）
例如：替换传入参数lonlat为 [104.70, 31.50]，

 /**
  * 通过图层名称获取图层
  * @param {String}
  * @returns {Layer}
 */
 getLayerByName(name) {
   let allLayers = this.map.getLayers().getArray();
   let layer = undefined;
   if (allLayers.length) {
     for (let i = 0; i < allLayers.length; i++) {
       if (allLayers[i].get('name') === name) {
         layer = allLayers[i];
         break;
       }
     }
   }
   return layer;
 },
/** 
 * 添加水波纹点图层到地图 
 * @param lonlat EPSG:4326
 * */
addDynamicLayerToMap(lonlat) {
  lonlat = fromLonLat(lonlat); // 将4326的坐标转换为3857的坐标
  let pointFeature = new Feature({
    geometry: new Point(lonlat, 'XY'),
  });
  if (this.getLayerByName('dynamicLayer')) {
    this.getLayerByName('dynamicLayer').getSource().clear();
    this.getLayerByName('dynamicLayer').getSource().addFeature(pointFeature);
    return;
  };
  let dynamicPointLayer = new VectorLayer({
    source: new VectorSource({
      features: [pointFeature],
    }),
    name: 'dynamicLayer',
    zIndex: 2,
  });
  this.map.addLayer(dynamicPointLayer);
  let radius = 4; // radius一定要放在监听事件外面
  let opacity = 1;
  this.map.on('postcompose', (event) => {
    let dynamicFeatures = this.getLayerByName('dynamicLayer').getSource().getFeatures();
    opacity = (25 - radius) * (1 / 25) ; // 不透明度 radius为0时，不透明；radius为25时，透明
    dynamicFeatures.forEach((item) => {
      item.setStyle(new Style({
        image: new CircleStyle({
          radius: radius,
          stroke: new Stroke({
            color: 'rgba(255, 0, 0, '+ opacity +')',
            width: 2,
          }),
        })
      }));
    });
    radius = radius + 0.3;
    radius = radius >= 25 ? 4 : radius;
    this.map.render(); // 重要
  });
},

效果图：