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 AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
jquery实现横向图片轮播特效代码分享
Nov 19 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 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 应用程序安全防范技术研究
2009/09/25 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
js实现简易计算器功能
2019/10/18 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
Python中获取对象信息的方法
2015/04/27 Python
python实现批量修改文件名代码
2017/09/10 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
一些Unix笔试题和面试题
2012/09/25 面试题
服装厂厂长职责
2013/12/16 职场文书
2014年班组长工作总结
2014/11/20 职场文书
决心书格式及范文
2019/06/24 职场文书