Comment réaliser une diffusion ponctuelle en utilisant openlayers4 ?-js tutoriel-php.cn

Comment réaliser une diffusion ponctuelle en utilisant openlayers4 ?

亚连

Libérer： 2018-06-11 10:18:26

original

1835 Les gens l'ont consulté

Cet article présente principalement en détail l'effet de diffusion des points d'implémentation basés sur openlayers4. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Les exemples de cet article partagent les points d'implémentation d'openlayers4 avec tout le monde. . L'effet de diffusion est pour votre référence. Le contenu spécifique est le suivant

<!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>

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles associés :

Comment changer la transparence d'un seul objet en JS

Comment changer la taille d'un objet en glisser dans JS

Comment utiliser cli dans vue pour reconstruire un échafaudage multipage

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!