效果图:
(红圈往外扩散消失。类似echarts的效果:https://echarts.baidu.com/examples/editor.html?c=effectScatter-bmap)
参考链接:
https://openlayers.org/en/latest/examples/feature-animation.html
https://blog.csdn.net/u014529917/article/details/52514204
这里是通过OpenLayers自带的postcompose事件来实现动画效果
页面标签:
<!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"> <meta content=always name=referrer> <title>OpenLayers 3地图示例</title> <link href="/test/gis/css/ol.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/test/gis/js/ol.js" charset="utf-8"></script> </head> <body> <div id="map" style="width: 100%"></div> <div> <svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet"> <circle id="mycircle" cx="400" cy="300" r="50" /> <svg> </div> <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <div id="popup-content"></div> </div> <script> // 获取到popup的节点 var container = document.getElementById('popup'); var content = document.getElementById('popup-content'); var closer = document.getElementById('popup-closer'); var point=new ol.Feature({ geometry: new ol.geom.Point([0,0]) }); var pointLayer=new ol.layer.Vector({ source:new ol.source.Vector() }); point.setStyle(new ol.style.Style({ image:new ol.style.Circle({ radius:10, fill:new ol.style.Fill({ color:'red' }), stroke:new ol.style.Stroke({ color:'#ff8c66', size:1 }) }) })); var source = pointLayer.getSource() // 创建地图 var map2=new ol.Map({ // 设置地图图层 layers: [ // 创建一个使用Open Street Map地图源的瓦片图层 new ol.layer.Tile({source: new ol.source.OSM()}), //矢量图层 pointLayer ], // 设置显示地图的视图 view: new ol.View({ center: [20, 0], zoom: 2 // 并且定义地图显示层级为2 }), // 让id为map的div作为地图的容器 target: 'map' }); var maxRadius=16; var speed=0.1; var baseR=10; var activeR=baseR; function flash(feature) { var start = new Date().getTime(); var listenerKey = map2.on('postcompose', animate); function animate(event) { activeR=activeR+speed; var vectorContext = event.vectorContext; var elapsedRatio = (activeR-baseR) / (maxRadius-baseR); var flashGeom = feature.getGeometry().clone(); var radius = ol.easing.easeOut(elapsedRatio) * (maxRadius-baseR) + baseR; var opacity = ol.easing.easeOut(1 - elapsedRatio); var style = new ol.style.Style({ image: new ol.style.Circle({ radius: radius, stroke: new ol.style.Stroke({ color: 'rgba(255, 140, 102, ' + opacity + ')', width: 0.1 +opacity }) }) }); vectorContext.setStyle(style); vectorContext.drawGeometry(flashGeom); if (activeR > maxRadius) { activeR=baseR; } map2.render(); } } source.on('addfeature', function(e) { flash(e.feature); }); source.addFeature(point); </script> </body> </html>
如果想再像一点,可以添加多个圆。
<!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"> <meta content=always name=referrer> <title>OpenLayers 3地图示例</title> <link href="/test/gis/css/ol.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/test/gis/js/ol.js" charset="utf-8"></script> </head> <body> <div id="map" style="width: 100%"></div> <div> <svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet"> <circle id="mycircle" cx="400" cy="300" r="50" /> <svg> </div> <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <div id="popup-content"></div> </div> <script> // 获取到popup的节点 var container = document.getElementById('popup'); var content = document.getElementById('popup-content'); var closer = document.getElementById('popup-closer'); var point=new ol.Feature({ geometry: new ol.geom.Point([0,0]) }); var pointLayer=new ol.layer.Vector({ source:new ol.source.Vector() }); point.setStyle(new ol.style.Style({ image:new ol.style.Circle({ radius:10, fill:new ol.style.Fill({ color:'red' }), stroke:new ol.style.Stroke({ color:'#ff8c66', size:1 }) }) })); var source = pointLayer.getSource() // 创建地图 var map2=new ol.Map({ // 设置地图图层 layers: [ // 创建一个使用Open Street Map地图源的瓦片图层 new ol.layer.Tile({source: new ol.source.OSM()}), //矢量图层 pointLayer ], // 设置显示地图的视图 view: new ol.View({ center: [20, 0], zoom: 2 // 并且定义地图显示层级为2 }), // 让id为map的div作为地图的容器 target: 'map' }); var maxR=22;//扩散的最大半径 var speed=0.05;//扩散速度 var baseR=10;//基准半径 var activeR=baseR;//第一个圈的当前半径 var activeR2=baseR+4;//第二个圈的当前半径 var activeR3=baseR+8;//第三个圈的当前半径 function flash(feature) { var start = new Date().getTime(); var listenerKey = map2.on('postcompose', animate); function animate(event) { activeR=activeR+speed; activeR2=activeR2+speed; activeR3=activeR3+speed; var vectorContext = event.vectorContext; //三个圆的扩散进度 var elapsedRatio = (activeR-baseR) / (maxR-baseR); var elapsedRatio2 = (activeR2-baseR) / (maxR-baseR); var elapsedRatio3 = (activeR3-baseR) / (maxR-baseR); var flashGeom = feature.getGeometry().clone(); //三个半径 var radius = ol.easing.linear(elapsedRatio) * (maxR-baseR) + baseR; var radius2 = ol.easing.linear(elapsedRatio2) * (maxR-baseR) + baseR; var radius3 = ol.easing.linear(elapsedRatio3) * (maxR-baseR) + baseR; //三个圆的透明度 var opacity = ol.easing.easeOut(1 - elapsedRatio); var opacity2 = ol.easing.easeOut(1 - elapsedRatio2); var opacity3 = ol.easing.easeOut(1 - elapsedRatio3); var style = new ol.style.Style({ image: new ol.style.Circle({ radius: radius, stroke: new ol.style.Stroke({ color: 'rgba(255, 140, 102, ' + opacity + ')', width: 0.1 +opacity }) }) }); vectorContext.setStyle(style); vectorContext.drawGeometry(flashGeom); //画第二个圆 vectorContext.drawFeature( new ol.Feature({ geometry: flashGeom }), new ol.style.Style({ image: new ol.style.Circle({ radius: radius2, stroke: new ol.style.Stroke({ color: 'rgba(255, 140, 102,'+opacity2+')', width: 0.1 +opacity2 }) }) }) ); //画第三个圆 vectorContext.drawFeature( new ol.Feature({ geometry: flashGeom }), new ol.style.Style({ image: new ol.style.Circle({ radius: radius3, stroke: new ol.style.Stroke({ color: 'rgba(255, 140, 102,'+opacity3+')', width: 0.1 +opacity3 }) }) }) ); //循环点 if (activeR > maxR) { activeR=baseR; } if (activeR2 > maxR) { activeR2=baseR; } if (activeR3 > maxR) { activeR3=baseR; } map2.render(); } } source.on('addfeature', function(e) { flash(e.feature); }); source.addFeature(point); </script> </body> </html>
相关推荐
NULL 博文链接:https://xiaying-hefei.iteye.com/blog/430531
该脚本能够实现openlayers-Cesium二三维联动效果的功能
1,openlayers3 +geosever2.13.1,加载shp 图层组。 2,绘制点闪烁、扩散、动画
资源下载不可直接运行,下载前可查看博客:https://blog.csdn.net/KK_bluebule/article/details/125694548 资源可供参考,因为只是一个vue页面和json测试数据
1、实现图片地图,图片地图比例尺 2、绘制点的路径 3、绘制多边形,定位不规则多边形中心点,显示名称 4、多边形编辑 5、地图全屏,地图截图 6、点是否在区域中判定 7、暂停,播放,向前,向后20s,倍速播放控制路径...
内容概要:通过带着读者手写...阅读建议:此资源以开发绘制扇形及环形学习其原理地图容器,不仅是代码编写实现也更注重内容上的需求分析和方案设计,所以在学习的过程要结合这些内容一起来实践,并调试对应的代码。
本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程,供大家参考,具体内容如下 第一步:安装vue-cli cnpm install -g @vue/cli 第二步:新建一个项目 1.新建项目 (vue-openlayers为项目名),并...
OpenLayers 3 地图框选 Draw 画多边形 Polygon 获取坐标
可直接运行,简易的openlayers发布离线瓦片数据的DEMO,压缩包中包含了一部分地区的街道地图瓦片数据。
OpenLayers地图要素tooltip[文字提示],对要素进行动态提示
openlayers 实现在地图上添加文字标注。为图片注记添加文本标签
基于openlayers 3开发代码,配合太乐地图下载离线地图使用
openLayers 在地图上添加一个点并保存 39 openLayers 各个参数的意义 42 geoserver能搞出这种风格的图来吗? 43 关于SLD的线切割后的设置 43 GEOSERVE 标注铁路,使用 SLD 44 geoserver 发布.shp 中文乱码问题 怎么...
使用openlayers加载离线地图实例,可通过mui打包成app。简单,易上手
openlayers 调用百度地图
1) 部署到tomcat6的webapps下面。 2) 将world.mbtiles放到D:/gisdata/mbtiles/目录下。 3) 在浏览器输入:(世界地图,图层0-7) http://localhost:8080/MbTileService/local_tiles.html
openlayers 加载天地图示例
openlayers3以上版本,地图中选择要素后自定义右键功能
webgis开发,文件里包含用openlayers3加载百度地图、天地图、高德地图、google地图等源代码,很全很实用。
OpenLayers3加载谷歌地图,加载谷歌地图显示,实现效果很好,放大比例尺也能看得清楚。文章链接:https://blog.csdn.net/Gary_888/article/details/89914290