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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
Angular中$compile源码分析
Jan 28 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 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函数)
2006/10/09 PHP
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
php设计模式小结
2013/02/15 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
jQuery 表单验证扩展(四)
2010/10/20 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
使用K.function()调试keras操作
2020/06/17 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
Python中Qslider控件实操详解
2021/02/20 Python
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
网站域名和主机:Domain.com
2019/04/01 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
班组安全员工作职责
2014/02/01 职场文书
年级组长自我鉴定
2014/02/22 职场文书
中学生评语大全
2014/04/18 职场文书
社区矫正工作方案
2014/06/04 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
国际贸易实训总结
2015/08/03 职场文书