当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 基于openlayers4实现点的扩散效果

基于openlayers4实现点的扩散效果

2018年01月31日  | 移动技术网IT编程  | 我要评论

本文实例为大家分享了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>

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网