openlayers4实现点动态扩散


Posted in Javascript onAugust 17, 2020

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

原理:连续刷新地图,并且刷新时,修过点样式的半径大小,来实现扩散效果;

//定义底图
var baseLayer = new ol.layer.Vector({
 renderMode: 'image',
 source: new ol.source.Vector({
  url:'/data/shengjie.geojson',
  format: new ol.format.GeoJSON()
 }),
 style: new ol.style.Style({
  fill: new ol.style.Fill({
   color: '#0A122A'
  }),
  stroke: new ol.style.Stroke({
   color: '#6E6E6E',
   width: 1
  })
 })
})

var view = new ol.View({
 center: [108.7,34.8],
 zoom: 4,
 projection: "EPSG:4326"
});

var map = new ol.Map({
 target: 'map',
 view: view,
 layers: [baseLayer]
})


//定义一个矢量图层,用于打点
var pointAnimationLayer = new ol.layer.Vector({
 source: new ol.source.Vector(),
 style: new ol.style.Style({
  image: new ol.style.Circle({
   fill: new ol.style.Fill({
    color: '#E6E6E6'
   }),
   radius: 4
  })
 })
})
map.addLayer(pointAnimationLayer);

//随机写的点坐标
var points=[]
points.push([112.4,33.5]);
points.push([103.8,23.7]);
points.push([89.7,41.6]);

//将点添加到图层
points.forEach(element => {
 var ft = new ol.Feature({
  geometry: new ol.geom.Point(element)
 });
 pointAnimationLayer.getSource().addFeature(ft);
});

//map渲染事件,回调动画
map.on('postcompose',animation);

//样式中的半径变量,通过不断刷新点样式的半径来实现点动态扩散
var radius = 1;

//动画
function animation(event){
 if(radius >= 20){
  radius = 0
 }
 var opacity = (20 - radius) * (1 / 20) ;//不透明度
 var pointStyle = new ol.style.Style({
  image: new ol.style.Circle({
   radius:radius,
   stroke: new ol.style.Stroke({
    color: 'rgba(255,255,0' + opacity + ')',
    width: 2 - radius / 10
   })
  })
 })

 var features = pointAnimationLayer.getSource().getFeatures();
 
 var vectorContext = event.vectorContext;
 vectorContext.setStyle(pointStyle);
 features.forEach(element => {
  var geom = element.getGeometry();
  vectorContext.drawGeometry(geom);
 });
 radius = radius + 0.3;
 
 //触发map的postcompose事件
 map.render();
}

实现

利用map的渲染事件:postcompose来连续刷新
之前实现地图动画都是用window.setInterval()方法来实现,这次拓展下视野,采用Openlayers内部的方法。主要有两步操作:

1、事件注册

map.on('postcompose',animation);

2、在事件的回调函数中去触发postcompose事件

map.render();

postcompose事件第一次触发是在地图初始化时,后续的触发都由animation方法中的map.render()来完成。

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

Javascript 相关文章推荐
javascript 类方法定义还是有点区别
Apr 15 Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
动态加载jquery库的方法
Feb 12 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
Vue实现计算器计算效果
Aug 17 #Javascript
vue-model实现简易计算器
Aug 17 #Javascript
Vue实现手机计算器
Aug 17 #Javascript
Vuex实现购物车小功能
Aug 17 #Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 #jQuery
jQuery实现异步上传一个或多个文件
Aug 17 #jQuery
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 #Javascript
You might like
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
javascript 简练的几个函数
2009/08/29 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
jQuery实现简单评论区功能
2020/10/26 jQuery
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
Python可跨平台实现获取按键的方法
2015/03/05 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
Python IDLE清空窗口的实例
2018/06/25 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
python区分不同数据类型的方法
2019/10/14 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
基于opencv实现简单画板功能
2020/08/02 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
个人素质的自我评价分享
2013/12/16 职场文书
财务主管的岗位职责
2013/12/30 职场文书
小学教师节活动方案
2014/01/31 职场文书
中学生励志演讲稿
2014/04/26 职场文书
C++程序员求职信
2014/05/07 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
运动会方阵口号
2014/06/07 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
优秀大学生自荐信
2015/03/26 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB