Openlayers实现扩散的动态点(水纹效果)


Posted in Javascript onAugust 17, 2020

本文实例为大家分享了Openlayers实现扩散的动态点的具体代码,供大家参考,具体内容如下

在openlayers中制作危险源标识可以需要动态扩散的点(有很多种方法 可以加入jpg动图,也可以写css动画) 这里提供一种思路用openlayer自带的方法写 并给予详细的方法注释供初学者学习 (所有jar包都是在线的代码可以复制过去直接用)

<!DOCTYPE html>
<html>
 <head>
  <title>Icon Symbolizer</title>
  <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" rel="external nofollow" type="text/css">
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
  <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
  <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" >
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
   #map {
    position: relative;
   }
   #popup {
    cursor: pointer;
   }
  </style>
 </head>
 <body>
  <div id="map" class="map"></div>
 <div id="styleType">
  
 </div>
  <script>
    //水纹扩散
 var bingMap = new ol.layer.Tile({
   source :new ol.source.XYZ({
   crossOrigin: 'anonymous',
    url:'http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}'
    })
 });
 var map = new ol.Map({
    layers: [bingMap],
    target: 'map',
    view: new ol.View({
     center: ol.proj.transform([112.91, 28.21], 'EPSG:4326', 'EPSG:3857'),
     zoom: 5
    })
   });

   var source = new ol.source.Vector({
    wrapX: false
   });
   var vector = new ol.layer.Vector({
    source: source
   });
   map.addLayer(vector);

   function addRandomFeature() {
    var geom = new ol.geom.Point(ol.proj.fromLonLat([112.91, 28.21]));
    var feature = new ol.Feature(geom);
    source.addFeature(feature);
   }

   var duration = 1000;


   function flash(feature) {
    var start = new Date().getTime();
 //进行地图水波渲染
    var listenerKey = map.on('postcompose', animate);
    
    function animate(event) {
  //获取几何图形
     var vectorContext = event.vectorContext;
  //获取当前渲染帧状态
     var frameState = event.frameState;
  //添加一个OpenLayers.Geometry几何对象
     var flashGeom = feature.getGeometry().clone();
  //渲染帧状已占时间
     var elapsed = frameState.time - start;
  //已占比率
     var elapsedRatio = elapsed / duration;
     // radius半径为5结束为30
     var radius = ol.easing.easeOut(elapsedRatio) * 25 + 5;
  //不透渐变消失
     var opacity = ol.easing.easeOut(1 - elapsedRatio);
     //Circle样式
     var style = new ol.style.Style({
      image: new ol.style.Circle({
       radius: radius,
       stroke: new ol.style.Stroke({
        color: 'rgba(255, 0, 0, ' + opacity + ')',
        width: 1 + opacity
       })
      })
     });
     //给几何图形添加样式
     vectorContext.setStyle(style);
  //将几何体渲染到画布中
     vectorContext.drawGeometry(flashGeom);
     if (elapsed > duration) {
      start = frameState.time ;
      ;
     }
     //请求地图渲染(在下一个动画帧处)
     map.render();
    }
   }
   //数据源添加图层
   source.on('addfeature', function(e) {
    flash(e.feature);
   });

  addRandomFeature() 
   </script>
 </body>
</html>

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

Javascript 相关文章推荐
Jquery ui css framework
Jun 28 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
怎么清空javascript数组
May 11 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
openLayer4实现动态改变标注图标
Aug 17 #Javascript
openlayers4实现点动态扩散
Aug 17 #Javascript
Vue实现计算器计算效果
Aug 17 #Javascript
vue-model实现简易计算器
Aug 17 #Javascript
Vue实现手机计算器
Aug 17 #Javascript
Vuex实现购物车小功能
Aug 17 #Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 #jQuery
You might like
4.与数据库的连接
2006/10/09 PHP
php print EOF实现方法
2009/05/21 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
php笔记之:php数组相关函数的使用
2013/04/26 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
Django基础知识与基本应用入门教程
2018/07/20 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
AUC计算方法与Python实现代码
2020/02/28 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
python 批量将中文名转换为拼音
2021/02/07 Python
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
函授毕业个人自我评价
2014/02/20 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
离职证明标准格式
2014/09/15 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
职位证明模板
2015/06/23 职场文书
我的中国梦主题班会
2015/08/14 职场文书
《颐和园》教学反思
2016/02/19 职场文书
经销商会议开幕词
2016/03/04 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
python tkinter实现定时关机
2021/04/21 Python
Python实现简单的俄罗斯方块游戏
2021/09/25 Python
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技