OpenLayers3入门篇-点的扩散效果

来源：互联网发布：spark submit python 编辑：程序博客网时间：2024/05/22 10:03

点的扩散效果原理与点在线上的运动类似，先根据传入的坐标先创建一个layer,然后绑定一个addfeature的事件（flush函数），在这个事件里面随着时间的推移不断的对这个layer的style进行设置从而动态的做出扩散的效果出来

function pointLight(pointC){map.removeLayer(vector2);pointCoord = pointC;var source = new ol.source.Vector({            wrapX: false        }); var  vector = new ol.layer.Vector({            source: source,                               });vector2 = vector;map.addLayer(vector2);var geom = new ol.geom.Point(ol.proj.transform(pointCoord,                'EPSG:4326', 'EPSG:3857'));       var feature = new ol.Feature(geom);             source.on('addfeature', function(e) {   flash(e.feature);      });    source.addFeature(feature);}//扩散的加载function flash(feat){  var feature = feat;      var start = new Date().getTime();      var listenerKey;            function animate(event){        var vectorContext = event.vectorContext;      var frameState = event.frameState;      var flashGeom = feature.getGeometry().clone();      var elapsed = frameState.time - start;      var elapsedRatio = elapsed / duration;            var radius = ol.easing.easeOut(elapsedRatio) * 25 + 5;      var opacity = ol.easing.easeOut(1 - elapsedRatio);                var style = new ol.style.Style({//设置样式              image: new ol.style.Circle({                radius: radius,                snapToPixel: false,                stroke: new ol.style.Stroke({                  color: 'rgba(255, 0, 0, ' + opacity + ')',                  width: 0.25 + opacity                })              })            });          vectorContext.setStyle(style);          vectorContext.drawGeometry(flashGeom);                    if (elapsed > duration) {              ol.Observable.unByKey(listenerKey);              map.removeLayer(vector2);              pointLight(pointCoord);              return;            }            // tell OL3 to continue postcompose animation                              map.render();                 }      //地图渲染事件         listenerKey = map.on('postcompose', animate);    }

0 1