openlayers4实现点动态扩散
程序员文章站
2022-04-21 10:53:46
本文实例为大家分享了openlayers4实现的点动态扩散的具体代码,供大家参考,具体内容如下原理:连续刷新地图,并且刷新时,修过点样式的半径大小,来实现扩散效果;//定义底图var baselaye...
本文实例为大家分享了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()来完成。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。