Openlayers实现扩散动态点的方法是什么-创新互联

Openlayers实现扩散动态点的方法是什么？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！

成都创新互联成立十载来，这条路我们正越走越好，积累了技术与客户资源，形成了良好的口碑。为客户提供成都网站建设、网站制作、网站策划、网页设计、域名注册、网络营销、VI设计、网站改版、漏洞修补等服务。网站是否美观、功能强大、用户体验好、性价比高、打开快等等，这些对于网站建设都非常重要，成都创新互联通过对建站技术性的掌握、对创意设计的研究为客户提供一站式互联网解决方案，携手广大客户，共同发展进步。

在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&#63;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&#63;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>

当前标题：Openlayers实现扩散动态点的方法是什么-创新互联
转载来源：https://www.cdcxhl.com/article22/dpcocc.html

成都网站建设公司_创新互联，为您提供企业建站、网站设计、网站收录、定制网站、企业网站制作、ChatGPT

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容