Of Stack

Openlayers realizes the dynamic point of diffusion (water pattern effect)

  • 2021-08-06 20:39:58
  • OfStack

In this paper, we share the specific code of Openlayers to realize the dynamic point of diffusion for your reference. The specific contents are as follows

In openlayers, making hazard identification can need dynamic diffusion points (there are many ways to add jpg animation, or write css animation). Here, we provide a way to write with openlayer's own method and give detailed method comments for beginners to learn (all jar packages are online codes that can be copied and used directly in the past) 


<!DOCTYPE html>
<html>
 <head>
  <title>Icon Symbolizer</title>
  <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" rel="external nofollow" type="text/css">
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
  <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
  <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" >
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
   #map {
    position: relative;
   }
   #popup {
    cursor: pointer;
   }
  </style>
 </head>
 <body>
  <div id="map" class="map"></div>
 <div id="styleType">
  
 </div>
  <script>
    // Diffusion of water lines 
 var bingMap = new ol.layer.Tile({
   source :new ol.source.XYZ({
   crossOrigin: 'anonymous',
    url:'http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}'
    })
 });
 var map = new ol.Map({
    layers: [bingMap],
    target: 'map',
    view: new ol.View({
     center: ol.proj.transform([112.91, 28.21], 'EPSG:4326', 'EPSG:3857'),
     zoom: 5
    })
   });

   var source = new ol.source.Vector({
    wrapX: false
   });
   var vector = new ol.layer.Vector({
    source: source
   });
   map.addLayer(vector);

   function addRandomFeature() {
    var geom = new ol.geom.Point(ol.proj.fromLonLat([112.91, 28.21]));
    var feature = new ol.Feature(geom);
    source.addFeature(feature);
   }

   var duration = 1000;


   function flash(feature) {
    var start = new Date().getTime();
 // Render map water waves 
    var listenerKey = map.on('postcompose', animate);
    
    function animate(event) {
  // Get geometry 
     var vectorContext = event.vectorContext;
  // Gets the current rendered frame status 
     var frameState = event.frameState;
  // Add 1 A OpenLayers.Geometry Geometric object 
     var flashGeom = feature.getGeometry().clone();
  // Time spent rendering frames 
     var elapsed = frameState.time - start;
  // Percentage already occupied 
     var elapsedRatio = elapsed / duration;
     // radius The radius is 5 End with 30
     var radius = ol.easing.easeOut(elapsedRatio) * 25 + 5;
  // Impenetrable gradient disappearance 
     var opacity = ol.easing.easeOut(1 - elapsedRatio);
     //Circle Style 
     var style = new ol.style.Style({
      image: new ol.style.Circle({
       radius: radius,
       stroke: new ol.style.Stroke({
        color: 'rgba(255, 0, 0, ' + opacity + ')',
        width: 1 + opacity
       })
      })
     });
     // Add styles to geometry 
     vectorContext.setStyle(style);
  // Render geometry to canvas 
     vectorContext.drawGeometry(flashGeom);
     if (elapsed > duration) {
      start = frameState.time ;
      ;
     }
     // Request map rendering (below 1 Animation frames) 
     map.render();
    }
   }
   // Add Layer to Data Source 
   source.on('addfeature', function(e) {
    flash(e.feature);
   });

  addRandomFeature() 
   </script>
 </body>
</html>
Related articles: