基于openlayers4实现点的扩散效果


Posted in Javascript onAugust 17, 2020

本文实例为大家分享了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" 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>

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

Javascript 相关文章推荐
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
深入理解javascript的执行顺序
Apr 04 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
js微信支付实现代码
Dec 22 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
JS判断数组里是否有重复元素的方法小结
May 21 Javascript
react使用CSS实现react动画功能示例
May 18 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 #Javascript
webpack引入eslint配置详解
Jan 22 #Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 #jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 #jQuery
JavaScript中EventLoop介绍
Jan 22 #Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 #Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 #Javascript
You might like
php 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
Python中DJANGO简单测试实例
2015/05/11 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
浅谈对yield的初步理解
2017/05/29 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
tensorflow常用函数API介绍
2020/04/19 Python
基于python实现删除指定文件类型
2020/07/21 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
苹果美国官方商城:Apple美国
2016/08/24 全球购物
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
综合素质的自我鉴定
2013/10/07 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
教师节活动总结
2014/08/29 职场文书
机关党员公开承诺书
2014/08/30 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫