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:261777parcourir
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:'map',
view:new ol.View({
center: [12950000, 4860000],
zoom:7
})
});
var point_p = document.createElement('p');
point_p.className = 'css_animation';
point_overlay = new ol.Overlay({
element:point_p,
positioning:'center-center'
});
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!