基于openlayers4实现点的扩散效果-偶像资源网

本文实例为大家分享了openlayers4实现点的扩散效果，供大家参考，具体内容如下

<!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> 
  <div id=\"map\" style=\"width: 100%;height: 100%\"></div> 
  <script> 
    var map = new ol.Map({ 
      layers:[new ol.layer.Tile({ 
        source:new ol.source.OSM() 
      })], 
      target:\'map\', 
      view:new ol.View({ 
        center: [12950000, 4860000], 
        zoom:7 
      }) 
    }); 
 
    var point_div = document.createElement(\'div\'); 
    point_div.className = \'css_animation\'; 
    point_overlay = new ol.Overlay({ 
      element:point_div, 
      positioning:\'center-center\' 
    }); 
    map.addOverlay(point_overlay); 
 
    point_overlay.setPosition([12950000, 4860000]); 
  </script> 
</body> 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

基于openlayers4实现点的扩散效果

请登录后发表评论