Home >Web Front-end >JS Tutorial >How to achieve point diffusion using openlayers4?

How to achieve point diffusion using openlayers4?

亚连Original: 2018-06-11 10:18:261876browse

This article mainly introduces the diffusion effect of implementation points based on openlayers4 in detail. It has certain reference value. Interested friends can refer to it.

The examples in this article share the implementation points of openlayers4 with everyone. The diffusion effect is for your reference. The specific content is as follows

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Title</title> 
  <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" rel="external nofollow" type="text/css">  
  <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->  
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>  
  <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script> 
  <style> 
    .css_animation{ 
      height:100px; 
      width:100px; 
      border-radius: 50%; 
      background: rgba(255, 0, 0, 0.9); 
      transform: scale(0); 
      animation: myfirst 3s; 
      animation-iteration-count: infinite; 
    } 
    @keyframes myfirst{ 
      to{ 
        transform: scale(2); 
        background: rgba(0, 0, 0, 0); 
      } 
    } 
 
  </style> 
</head> 
<body> 
  <p id="map" style="width: 100%;height: 100%"></p> 
  <script> 
    var map = new ol.Map({ 
      layers:[new ol.layer.Tile({ 
        source:new ol.source.OSM() 
      })], 
      target:&#39;map&#39;, 
      view:new ol.View({ 
        center: [12950000, 4860000], 
        zoom:7 
      }) 
    }); 
 
    var point_p = document.createElement(&#39;p&#39;); 
    point_p.className = &#39;css_animation&#39;; 
    point_overlay = new ol.Overlay({ 
      element:point_p, 
      positioning:&#39;center-center&#39; 
    }); 
    map.addOverlay(point_overlay); 
 
    point_overlay.setPosition([12950000, 4860000]); 
  </script> 
</body> 
</html>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to change the transparency of a single object in JS

##How to change the size of an object by dragging in JS

How to use cli in vue to reconstruct multi-page scaffolding

The above is the detailed content of How to achieve point diffusion using openlayers4?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Mobile projects are automatically converted to remNext article：Mobile projects are automatically converted to rem

See more

How to achieve point diffusion using openlayers4?

Related articles