基于openlayers4实现点的扩散效果
程序员文章站
2022-04-29 12:15:01
本文实例为大家分享了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>
<div id="map" style="width: 100%;height: 100%"></div>
<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_div = document.createelement('div');
point_div.classname = 'css_animation';
point_overlay = new ol.overlay({
element:point_div,
positioning:'center-center'
});
map.addoverlay(point_overlay);
point_overlay.setposition([12950000, 4860000]);
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 详解node child_process模块学习笔记
下一篇： 用最少的JS代码写出贪吃蛇游戏