基于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 相关文章推荐
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
浅谈Node.js:理解stream
Dec 08 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 Javascript
swiper实现异形轮播效果
Nov 28 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 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 数组随机取值的简单实例
2016/05/23 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
鼠标图片振动代码
2006/07/06 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
初步理解Python进程的信号通讯
2015/04/09 Python
python在控制台输出进度条的方法
2015/06/20 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
Python单例模式实例详解
2017/03/01 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
python标准库os库的函数介绍
2020/02/12 Python
Python 使用office365邮箱的示例
2020/10/29 Python
python爬虫请求头的使用
2020/12/01 Python
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
大专生工程监理求职信
2013/10/04 职场文书
八年级历史教学反思
2014/01/10 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
环保建议书
2014/03/12 职场文书
公司寄语大全
2014/04/10 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
社区党员公开承诺书
2014/08/30 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
导游词之山东八大关
2019/12/18 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技