cari

Rumah >hujung hadapan web >tutorial js >使用openlayers4如何实现点的扩散？

使用openlayers4如何实现点的扩散？

亚连
亚连asal
2018-06-11 10:18:261877semak imbas

这篇文章主要为大家详细介绍了基于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> 
  <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>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在JS中如何改变单物体透明度

在JS中如何实现通过拖拽改变物体大小

在vue中使用cli如何实现重构多页面脚手架

Atas ialah kandungan terperinci 使用openlayers4如何实现点的扩散？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：移动端项目自动转换为remArtikel seterusnya：vue-cli做出跨域请求

Artikel berkaitan

Lihat lagi