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操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 Javascript
Javascript操作select控件代码实例
Feb 14 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
PHP图片上传代码
2013/11/04 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
python实现简单井字棋游戏
2020/03/04 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
司机的工作范围及职责
2013/11/13 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
JavaScript实现简单拖拽效果
2021/09/15 Javascript