openlayers实现动态点水波纹效果

由

前言

之前使用arcgis for js写了点的水波纹效果，后来换openlayers的时候也需要写，网上找了些资源，发现都是差不多的，而且感觉也不太美观，就琢磨了好几天，终于写好了。

实现

<!DOCTYPE html>
<html>
  <head>
    <title>水波纹</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css"
      type="text/css"
    />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script>
    <style>
      #map {
        position: relative;
        height: 700px;
        width: 100%;
      }
      #popup {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="location"></div>
    <div id="map" class="map"></div>
    <script>
      //定义底图
      var baseLayer = new ol.layer.Tile({
        source: new ol.source.OSM({
          wrapX: false,
        }),
      });

      var view = new ol.View({
        center: [108.7, 34.8],
        zoom: 4,
        projection: "EPSG:4326",
      });
      const source = new ol.source.Vector({
        features: [
          new ol.Feature(new ol.geom.Point([93.49492, 35.41523])),
          new ol.Feature(new ol.geom.Point([115.84982, 40.0179])),
          new ol.Feature(new ol.geom.Point([118.12089, 35.37253])),
          new ol.Feature(new ol.geom.Point([114.78311, 28.90342])),
          new ol.Feature(new ol.geom.Point([110.57986, 29.91024])),
          new ol.Feature(new ol.geom.Point([109.668, 27.46252])),
        ],
      });

      //定义一个矢量图层，用于打点
      var pointAnimationLayer = new ol.layer.Vector({
        visible: true,
        source: source,
        style: new ol.style.Style({
          image: new ol.style.Circle({
            fill: new ol.style.Fill({
              color: "rgba(221,0,27)",
            }),
            radius: 4,
          }),
        }),
      });
      // 显示坐标的，可以通过这个观察经纬度 制作测试数据Feature
      const mousePositionControl = new ol.control.MousePosition({
        className: "custom-mouse-position",
        target: document.getElementById("location"),
        coordinateFormat: ol.coordinate.createStringXY(5),
        undefinedHTML: " ",
      });

      var map = new ol.Map({
        controls: ol.control
          .defaults({ attribution: false })
          .extend([mousePositionControl]),
        target: "map",
        view: view,
        layers: [baseLayer, pointAnimationLayer],
      });

      //map渲染事件，回调动画
      pointAnimationLayer.on('postrender',animation);

      var scale = 0.02;
      //动画
      function animation(event) {
        if (scale >= 1) {
            scale = 0.02;
        }
        var pointStyle = new ol.style.Style({
          image: new ol.style.Circle({
            radius: 20,
            scale: scale,
            fill: new ol.style.Fill({
              color: "rgba(221,0,27," + (1-scale) + ")",
            }),
          }),
        });
        var features = pointAnimationLayer.getSource().getFeatures();
        var vectorContext = ol.render.getVectorContext(event);
        vectorContext.setStyle(pointStyle);
        features.forEach((element) => {
          var geom = element.getGeometry();
          vectorContext.drawGeometry(geom);
          map.render();
        });
        scale = scale + 0.01;        
      }
    </script>
  </body>
</html>

效果