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 相关文章推荐
JQuery 绑定事件时传递参数的实现方法
Oct 13 Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
vant中的toast轻提示实现代码
Nov 04 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
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
Gird事件机制初级读本
2007/03/10 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
玩转方法:call和apply
2014/05/08 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
python求解水仙花数的方法
2015/05/11 Python
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
浅谈Python中的闭包
2015/07/08 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
《一件运动衫》教学反思
2014/02/19 职场文书
家长会学生演讲稿
2014/04/26 职场文书
招股说明书范本
2014/05/06 职场文书
法律专业求职信
2014/05/24 职场文书
法学求职信
2014/06/22 职场文书
励志演讲稿800字
2014/08/21 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
高中班主任评语
2014/12/30 职场文书
早会开场白台词大全
2015/06/01 职场文书
Python基础详解之描述符
2021/04/28 Python