openlayers4实现点动态扩散
网络编程 2021-07-04 14:06www.168986.cn编程入门
这篇文章主要为大家详细介绍了openlayers4实现的点动态扩散,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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('postpose',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的postpose事件 map.render(); }
实现
利用map的渲染事件postpose来连续刷新
之前实现地图动画都是用window.setInterval()方法来实现,这次拓展下视野,采用Openlayers内部的方法。主要有两步操作
1、事件注册
map.on('postpose',animation);
2、在事件的回调函数中去触发postpose事件
map.render();
postpose事件第一次触发是在地图初始化时,后续的触发都由animation方法中的map.render()来完成。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:openLayer4实现动态改变标注图标
下一篇:Vue实现计算器计算效果
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程