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 相关文章推荐
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
没有document.getElementByName方法
Aug 19 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 Javascript
vue各种事件监听实例(小结)
Jun 24 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
5.PHP的其他功能
2006/10/09 PHP
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php 验证码实例代码
2010/06/01 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
document.getElementById介绍
2011/09/13 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
javascript if条件判断方法小结
2014/05/17 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
python 6行代码制作月历生成器
2020/09/18 Python
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
老公爱的承诺书
2014/03/31 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
理财计划书
2014/08/14 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
sql字段解析器的实现示例
2021/06/23 SQL Server
redis数据结构之压缩列表
2022/03/21 Redis