openlayers4 を使用してポイント拡散を実現するにはどうすればよいですか?-jsチュートリアル-php.cn

openlayers4 を使用してポイント拡散を実現するにはどうすればよいですか?

亚连

リリース： 2018-06-11 10:18:26

オリジナル

1852 人が閲覧しました

この記事では、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を使用してマルチの再構築を実装する方法-ページ足場

以上がopenlayers4 を使用してポイント拡散を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。