Openlayers实现点闪烁扩散效果


Posted in Javascript onSeptember 24, 2020

本文实例为大家分享了Openlayers实现点闪烁扩散效果的具体代码,供大家参考,具体内容如下

点闪烁样式:

Openlayers实现点闪烁扩散效果

DOM的样式实现

/**橙色点扩散闪烁样式*/
.point_animation{
 background: #ff9900;
 width: 6px;
 height: 6px;
 border: 2px #ff9900 solid;
 border-radius: 50%;
 position: absolute;
}
.point_animation p, .point_animation span{
 position: absolute;
 width: 4px;
 height: 4px;
 animation: point_animation 1.5s infinite;
 box-shadow: 0px 0px 1px #ff9900; 
 margin: 0px;
 border-radius: 50%;
}
.point_animation span{
 animation-delay: 0.8s;
}
@keyframes point_animation{
 10% {
 transform: scale(1);
 }
 100% {
 transform: scale(8);
 }
}
/**红色点扩散闪烁样式*/
.css_animation{
 height:50px; 
 width:50px;
 border-radius: 25px; 
 background: rgba(255, 0, 0, 0.9);
 transform: scale(0);
 animation: mypoint 3s;  
 animation-iteration-count: infinite;
}
@keyframes mypoint{
 to{
 transform: scale(1.5);
 background: rgba(0, 0, 0, 0);
 }
}

在地图上添加点—采用overlay添加DOM元素

需要用到Openlayers中的overlay元素,官方对于如何使用overlay做出了相关API说明

///创建overlay,element传入的是存在于web中的DOM元素
var popup = new ol.Overlay({
 element: document.getElementById('popup')
});
popup.setPosition(coordinate);//设置overlay的位置
map.addOverlay(popup);//讲overlay添加到地图上

具体代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>点扩散</title>
 <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
  <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
 <style>
 .point_animation{
  background: #ff9900;
  width: 6px;
  height: 6px;
  border: 2px #ff9900 solid;
  border-radius: 50%;
  position: absolute;
 }

 .point_animation p, .point_animation span{
  position: absolute;
  width: 4px;
  height: 4px;
  animation: point_animation 1.5s infinite;
  box-shadow: 0px 0px 1px #ff9900; 
  margin: 0px;
  border-radius: 50%;
 }
 .point_animation span{
  animation-delay: 0.8s;
 }
 @keyframes point_animation{
  10% {
  transform: scale(1);
  }
  100% {
  transform: scale(8);
  }
 }
 .css_animation{
  height:50px; 
  width:50px;
  border-radius: 25px; 
  background: rgba(255, 0, 0, 0.9);
  transform: scale(0);
  animation: mypoint 3s;   
  animation-iteration-count: infinite;
 }
 @keyframes mypoint{
  to{
  transform: scale(1.5);
  background: rgba(0, 0, 0, 0);
  }
 }
 </style>
</head>
 
<body>
 <div id="container"></div>
 <script type="text/javascript">
 var baseLayer = new ol.layer.Tile({
  source: new ol.source.XYZ({
  url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
  }),
 });
 
 var map = new ol.Map({
  layers: [baseLayer],
  view: new ol.View({
  center: [104.5602,32.4070],
  projection: 'EPSG:4326',
  zoom: 4,
  extent: [-180, -90, 180, 90]
  }),
  target: "container",
  interactions:ol.interaction.defaults({
  doubleClickZoom: false
  }),
  controls:ol.control.defaults({
  zoom:false,
  attribution: false,
  }),
 });
 setFlashPoint()
 function setFlashPoint(){
  //第一种样式
  var element = document.createElement("div");
  element.className = "point_animation";
  var p = document.createElement("p");
  var span = document.createElement("span");
  element.appendChild(p);
  element.appendChild(span);
  var point_overlay = new ol.Overlay({
  element: element,
  positioning: 'center-center',
  });
  map.addOverlay(point_overlay);
  point_overlay.setPosition([120,30]);
  //第二种样式
  var ele = document.createElement("div");
  ele.className = "css_animation";
  var point_overlay2 = new ol.Overlay({
  element: ele,
  positioning: 'center-center',
  });
  map.addOverlay(point_overlay2);
  point_overlay2.setPosition([110,30]);
 }
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
Vue 去除路径中的#号
Apr 19 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 #Javascript
vue3.0生命周期的示例代码
Sep 24 #Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 #Javascript
Vue3不支持Filters过滤器的问题
Sep 24 #Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 #Javascript
vue实现日历表格(element-ui)
Sep 24 #Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 #Javascript
You might like
第十二节 类的自动加载 [12]
2006/10/09 PHP
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
php扩展开发入门demo示例
2019/09/23 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
python 使用值来排序一个字典的方法
2018/11/16 Python
基于python历史天气采集的分析
2019/02/14 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
python实现简单井字棋游戏
2020/03/04 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
2015年三年级班主任工作总结
2015/05/21 职场文书
借条如何写
2015/05/26 职场文书
监护人证明
2015/06/19 职场文书
高中历史教学反思
2016/02/19 职场文书
浅谈Python魔法方法
2021/06/28 Java/Android
Python中第三方库Faker的使用详解
2022/04/02 Python