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 相关文章推荐
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 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
php 魔术方法使用说明
2009/10/20 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
python发送告警邮件脚本
2018/09/17 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
python 常见的反爬虫策略
2020/09/27 Python
提高python代码运行效率的一些建议
2020/09/29 Python
python+opencv实现车道线检测
2021/02/19 Python
T3官网:头发造型工具
2019/12/26 全球购物
公司管理建议书范文
2014/03/12 职场文书
商场周年庆活动方案
2014/08/19 职场文书
护理实习生带教计划
2015/01/16 职场文书
工作失误检讨书范文
2015/01/26 职场文书
黑白记忆观后感
2015/06/18 职场文书
浅谈Node的内存泄露问题
2022/05/06 NodeJs