欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Openlayers实现扩散的动态点(水纹效果)

程序员文章站 2022-07-03 08:37:15
本文实例为大家分享了openlayers实现扩散的动态点的具体代码,供大家参考,具体内容如下在openlayers中制作危险源标识可以需要动态扩散的点(有很多种方法 可以加入jpg动图,也可以写css...

本文实例为大家分享了openlayers实现扩散的动态点的具体代码,供大家参考,具体内容如下

在openlayers中制作危险源标识可以需要动态扩散的点(有很多种方法 可以加入jpg动图,也可以写css动画) 这里提供一种思路用openlayer自带的方法写 并给予详细的方法注释供初学者学习 (所有jar包都是在线的代码可以复制过去直接用)

<!doctype html>
<html>
 <head>
  <title>icon symbolizer</title>
  <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" rel="external nofollow" type="text/css">
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestanimationframe,element.prototype.classlist,url"></script>
  <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
  <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" >
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
   #map {
    position: relative;
   }
   #popup {
    cursor: pointer;
   }
  </style>
 </head>
 <body>
  <div id="map" class="map"></div>
 <div id="styletype">
  
 </div>
  <script>
    //水纹扩散
 var bingmap = new ol.layer.tile({
   source :new ol.source.xyz({
   crossorigin: 'anonymous',
    url:'http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}'
    })
 });
 var map = new ol.map({
    layers: [bingmap],
    target: 'map',
    view: new ol.view({
     center: ol.proj.transform([112.91, 28.21], 'epsg:4326', 'epsg:3857'),
     zoom: 5
    })
   });

   var source = new ol.source.vector({
    wrapx: false
   });
   var vector = new ol.layer.vector({
    source: source
   });
   map.addlayer(vector);

   function addrandomfeature() {
    var geom = new ol.geom.point(ol.proj.fromlonlat([112.91, 28.21]));
    var feature = new ol.feature(geom);
    source.addfeature(feature);
   }

   var duration = 1000;


   function flash(feature) {
    var start = new date().gettime();
 //进行地图水波渲染
    var listenerkey = map.on('postcompose', animate);
    
    function animate(event) {
  //获取几何图形
     var vectorcontext = event.vectorcontext;
  //获取当前渲染帧状态
     var framestate = event.framestate;
  //添加一个openlayers.geometry几何对象
     var flashgeom = feature.getgeometry().clone();
  //渲染帧状已占时间
     var elapsed = framestate.time - start;
  //已占比率
     var elapsedratio = elapsed / duration;
     // radius半径为5结束为30
     var radius = ol.easing.easeout(elapsedratio) * 25 + 5;
  //不透渐变消失
     var opacity = ol.easing.easeout(1 - elapsedratio);
     //circle样式
     var style = new ol.style.style({
      image: new ol.style.circle({
       radius: radius,
       stroke: new ol.style.stroke({
        color: 'rgba(255, 0, 0, ' + opacity + ')',
        width: 1 + opacity
       })
      })
     });
     //给几何图形添加样式
     vectorcontext.setstyle(style);
  //将几何体渲染到画布中
     vectorcontext.drawgeometry(flashgeom);
     if (elapsed > duration) {
      start = framestate.time ;
      ;
     }
     //请求地图渲染(在下一个动画帧处)
     map.render();
    }
   }
   //数据源添加图层
   source.on('addfeature', function(e) {
    flash(e.feature);
   });

  addrandomfeature() 
   </script>
 </body>
</html>

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