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: [00],
          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>

 

posted @ 2022-07-14 15:10  devgis  阅读(296)  评论(0编辑  收藏  举报