介绍//定义底图
var baseLayer=new ol.layer.Vector ({
renderMode: & # 39;图像# 39;
来源:新ol.source.Vector ({
url: & # 39;/数据/shengjie.geojson& # 39;
格式:新ol.format.GeoJSON ()
}),
风格:新ol.style.Style ({
填写:新ol.style.Fill ({
颜色:& # 39;# 0 a122a& # 39;
}),
中风:新ol.style.Stroke ({
颜色:& # 39;# 6 e6e6e& # 39;
宽度:1
}）
}）
}）
var=new ol.View视图({
中心:[108.7,34.8],
变焦:4
投影:“EPSG: 4326“;
}）;
var=new ol.Map地图({
目标:& # 39;地图# 39;
视图:视图
层(baseLayer):
}）//定义一个矢量图层,用于打点
var pointAnimationLayer=new ol.layer.Vector ({
来源:新ol.source.Vector (),
风格:新ol.style.Style ({
图片:新ol.style.Circle ({
填写:新ol.style.Fill ({
颜色:& # 39;# E6E6E6& # 39;
}),
半径:4
}）
}）
}）
map.addLayer (pointAnimationLayer);//随机写的点坐标
var点=[]
points.push ([112.4, 33.5]);
points.push ([103.8, 23.7]);
points.push ([89.7, 41.6]);//将点添加到图层
点。forEach(元素=比;{
var英尺=new ol.Feature ({
几何:新ol.geom.Point(元素)
}）;
pointAnimationLayer.getSource () .addFeature(英尺);
}）;//地图渲染事件,回调动画
map.on (& # 39; postcompose& # 39;,动画);//样式中的半径变量,通过不断刷新点样式的半径来实现点动态扩散
var半径=1;//动画
函数动画(事件){
如果(半径祝辞=20){
半径=0
}
var透明度=(20 -半径)*(1/20);//不透明度
var pointStyle=new ol.style.Style ({
图片:新ol.style.Circle ({
半径,半径,
中风:新ol.style.Stroke ({
颜色:& # 39;rgba (255255 0 & # 39;+不+ & # 39;)& # 39;
宽:2 -半径/10
}）
}）
}）
.getFeatures var=pointAnimationLayer.getSource特性()();
var vectorContext=event.vectorContext;
vectorContext.setStyle (pointStyle);
特性。forEach(元素=比;{
var几何学=element.getGeometry ();
vectorContext.drawGeometry(几何学);
}）;
半径=半径+ 0.3;//触发地图的postcompose事件
map.render ();
} map.on (& # 39; postcompose& # 39;,动画); map.render ();
这篇文章主要介绍了openlayers4实现点动态扩散的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
<强>原理:强连续刷新地图,并且刷新时,修过点样式的半径大小,来实现扩散效果;
<>强实现
利用地图的渲染事件:postcompose来连续刷新
之前实现地图动画都是用setinterval()方法来实现,这次拓展下视野,采用Openlayers内部的方法。主要有两步操作:
postcompose事件第一次触发是在地图初始化时,后续的触发都由动画方法中的map.render()来完成。
感谢你能够认真阅读完这篇文章,希望小编分享openlayers4实现点动态扩散的方法内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!
