欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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()来完成。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关标签: openlayers4 扩散