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 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
IE iframe的onload方法分析小结
2010/01/07 Javascript
javascript工具库代码
2012/03/29 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
javascript 闭包详解
2015/07/02 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python日期操作学习笔记
2008/10/07 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
保护环境倡议书500字
2014/05/19 职场文书
医学检验专业自荐信
2014/09/18 职场文书
怎样写观后感
2015/06/19 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
Python 中 Shutil 模块详情
2021/11/11 Python
Python IO文件管理的具体使用
2022/03/20 Python