recherche

Maison  >  Article  >  interface Web  >  Comment réaliser une diffusion ponctuelle en utilisant openlayers4 ?

Comment réaliser une diffusion ponctuelle en utilisant openlayers4 ?

亚连
亚连original
2018-06-11 10:18:261843parcourir

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>

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Les projets mobiles sont automatiquement convertis en remArticle suivant：Les projets mobiles sont automatiquement convertis en rem

Articles Liés

Voir plus