openlayers光圈扩散功能

上代码之间，可以直接浏览器运行

<!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>
  <script>
    //定义底图
var baseLayer = new ol.layer.Vector({
    renderMode: 'image',
    style: new ol.style.Style({
        fill: new ol.style.Fill({
          color: 'rgba(220,20,60)'
        }),
        stroke: new ol.style.Stroke({
          color: 'rgba(220,20,60)',
          width: 1
        })
    })
})

var view = new ol.View({
    center: [108.7,34.8],
    zoom: 4,
    projection: "EPSG:4326"
});

var map = new ol.Map({
    target: 'map',
    view: view,
    layers: [baseLayer]
})

//定义一个矢量图层，用于打点
var pointAnimationLayer = new ol.layer.Vector({
    source: new ol.source.Vector(),
    style: new ol.style.Style({
        image: new ol.style.Circle({
            fill: new ol.style.Fill({
                color: 'rgba(220,20,60)'
            }),
            radius: 6
        })
    })
})
map.addLayer(pointAnimationLayer);

//随机写的点坐标
var points=[]
points.push([112.4,33.5]);
points.push([103.8,23.7]);
points.push([89.7,41.6]);

//将点添加到图层
points.forEach(element => {
    var ft = new ol.Feature({
        geometry: new ol.geom.Point(element)
    });
    pointAnimationLayer.getSource().addFeature(ft);
});

//map渲染事件，回调动画
map.on('postcompose',animation);

//样式中的半径变量，通过不断刷新点样式的半径来实现点动态扩散
var radius = 1;
//动画
function animation(event){
    if(radius >= 20){
        radius = 0
    }
    var opacity =  (20 - radius) * (1 / 20) ;//不透明度
    var pointStyle = new ol.style.Style({
        image: new ol.style.Circle({
            radius:radius,
            stroke: new ol.style.Stroke({
                color: 'rgba(220,20,60' + opacity + ')',
                width: 4 - radius / 10
            })
        })
    })
    var features = pointAnimationLayer.getSource().getFeatures();
    var vectorContext = event.vectorContext;
    vectorContext.setStyle(pointStyle);
    features.forEach(element => {
        var geom = element.getGeometry();
        vectorContext.drawGeometry(geom);
    });
    radius = radius + 0.3;
    //触发map的postcompose事件
    map.render();
}

   </script>
 </body>
</html>
//功能图如下

 

posted @ 2021-05-21 09:50  武向前  阅读(601)  评论(0)  编辑  收藏  举报