基于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 相关文章推荐
基于jquery的动态创建表格的插件
Apr 05 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
jQuery filter函数使用方法
May 19 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
zTree节点文字过多的处理方法
Nov 24 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
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
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
Python绘制股票移动均线的实例
2019/08/24 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
python3爬取torrent种子链接实例
2020/01/16 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
银河香水:Galaxy Perfume
2019/03/25 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
电子狗项圈:eDog Australia
2019/12/04 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
文员个人求职自荐信
2013/09/21 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
记账会计岗位职责
2014/06/16 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
借名购房协议书范本
2014/10/06 职场文书
公司辞职信模板
2015/05/13 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python
Golang 链表的学习和使用
2022/04/19 Golang