小程序远景怎样_openlayers4完成点动态扩散

2021-01-05 11:48 jianzhan
openlayers4实现点动态扩散       这篇文章主要为大家详细介绍了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: "E凡科抠图G:4326"
var map = new ol.Map({
 target: 'map',
 view: view,
 layers: [baseLayer]

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; //pose事件 map.render(); }

实现

pose来连续刷新
之前实现地图动画都是用window.setInterval()方法来实现,这次拓展下视野,采用Openlayers内部的方法。主要有两步操作:

1、事件注册

map.on('pose',animation);

pose事件

map.render();

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