openlayers 3 闪烁扩散效果
<!DOCTYPE html> <html> <head> <title>Custom Animation</title> <link rel="stylesheet" href="http://openlayers.org/en/v3.13.0/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/v3.13.0/build/ol.js"></script> </head> <body> <div id="map" class="map"></div> <script> var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM({ wrapX: false }) }) ], controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }), target: 'map', view: new ol.View({ center: [0, 0], zoom: 1 }) }); var source = new ol.source.Vector({ wrapX: false }); var vector = new ol.layer.Vector({ source: source }); map.addLayer(vector); function addRandomFeature() { var x = Math.random() * 360 - 180; var y = Math.random() * 180 - 90; var geom = new ol.geom.Point(ol.proj.transform([x, y], 'EPSG:4326', 'EPSG:3857')); var feature = new ol.Feature(geom); source.addFeature(feature); } var duration = 3000; function flash(feature) { 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; // radius will be 5 at start and 30 at end. var radius = ol.easing.easeOut(elapsedRatio) * 25 + 5; var opacity = ol.easing.easeOut(1 - elapsedRatio); var flashStyle = new ol.style.Circle({ radius: radius, snapToPixel: false, stroke: new ol.style.Stroke({ color: 'rgba(255, 0, 0, ' + opacity + ')', width: 1 }) }); vectorContext.setImageStyle(flashStyle); vectorContext.drawPointGeometry(flashGeom, null); if (elapsed > duration) { ol.Observable.unByKey(listenerKey); return; } // tell OL3 to continue postcompose animation map.render(); } listenerKey = map.on('postcompose', animate); } source.on('addfeature', function(e) { flash(e.feature); }); window.setInterval(addRandomFeature, 1000); </script> </body> </html>
专业从事基于C#,WinForm ,WPF,Silverlight,WCF以及MS Sql Server 2000/2005/2008/2012 Oracle 9i/10g/11g数据库系统的ERP,CRM,企业进销存等各种数据库管理系统开发。Asp.net,Asp.net mvc,Webservice,WCF, Webapi等服务程序开发。
基于Oracle MySQL MSSql postgresql各种数据库的管理系统数据同步服务。以及基于MapXtreme, Arcgis Engine ,以及基于Arcgis for silverlight/Javascript的WebGIS等相关的GIS系统二次开发。基于Windows 10 Mobile的移动端开发方案。针对各种系统的二次开发维护,并提供相关开发的技术性支持,如程序BUG解决,应用系统架构,技术难题攻克等相关技术服务。
联系方式: QQ :80163278(devgis) 邮箱:devgis@qq.com