openlayers4实现点动态扩散
本文实例为大家分享了openlayers4实现的点动态扩散的具体代码，供大家参考，具体内容如下
原理：连续刷新地图，并且刷新时，修过点样式的半径大小，来实现扩散效果；
//定义底图
varbaseLayer=newol.layer.Vector({
renderMode:'image',
source:newol.source.Vector({
url:'/data/shengjie.geojson',
format:newol.format.GeoJSON()
}),
style:newol.style.Style({
fill:newol.style.Fill({
color:'#0A122A'
}),
stroke:newol.style.Stroke({
color:'#6E6E6E',
width:1
})
})
})
varview=newol.View({
center:[108.7,34.8],
zoom:4,
projection:"EPSG:4326"
});
varmap=newol.Map({
target:'map',
view:view,
layers:[baseLayer]
})
//定义一个矢量图层，用于打点
varpointAnimationLayer=newol.layer.Vector({
source:newol.source.Vector(),
style:newol.style.Style({
image:newol.style.Circle({
fill:newol.style.Fill({
color:'#E6E6E6'
}),
radius:4
})
})
})
map.addLayer(pointAnimationLayer);
//随机写的点坐标
varpoints=[]
points.push([112.4,33.5]);
points.push([103.8,23.7]);
points.push([89.7,41.6]);
//将点添加到图层
points.forEach(element=>{
varft=newol.Feature({
geometry:newol.geom.Point(element)
});
pointAnimationLayer.getSource().addFeature(ft);
});
//map渲染事件，回调动画
map.on('postcompose',animation);
//样式中的半径变量，通过不断刷新点样式的半径来实现点动态扩散
varradius=1;
//动画
functionanimation(event){
if(radius>=20){
radius=0
}
varopacity=(20-radius)*(1/20);//不透明度
varpointStyle=newol.style.Style({
image:newol.style.Circle({
radius:radius,
stroke:newol.style.Stroke({
color:'rgba(255,255,0'+opacity+')',
width:2-radius/10
})
})
})
varfeatures=pointAnimationLayer.getSource().getFeatures();
varvectorContext=event.vectorContext;
vectorContext.setStyle(pointStyle);
features.forEach(element=>{
vargeom=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()来完成。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。