如何在OpenLayers3动画功能

var point = new ol.Feature({
    geometry: new ol.geom.Point([0, 0])),
    name: 'test',
});

可以使用下面的代码:

http://acanimal.github.io/thebookofopenlayers3/chapter06_02_markers_overlays.html

使用ol.Overlay(s)和css来显示动画。

我不知道有什么简单的方法可以通过特征/矢量层实现类似的东西。

我已经实现了脉动动画，使用map.on('postcompose')事件。解决方案如下:

var animate = function (pulsateCount) {
    var style = point.getStyle(),
        image = style.getImage(),
        r = image.getRadius(),
        currR = r,
        maxR = 2 * r,
        sign = 1;
    vectorLayer.getSource().removeFeature(point);
    var pulsate = function (event) {
        var vectorContext = event.vectorContext;
        if (currR > maxR) {
            sign = -1;
            pulsateCount--;
        } else if (currR < r) {
            sign = 1;
            if (!pulsateCount) {
                map.un('postcompose', pulsate);
                vectorLayer.getSource().addFeature(point);
                return;
            }
        }
        currR += sign * 0.1;
        vectorContext.drawFeature(point, new ol.style.Style({
            image: new ol.style.Circle({
                radius: currR,
                fill: image.getFill(),
                stroke: image.getStroke()
            })
        }));
        map.render();
    };
    map.on('postcompose', pulsate);
};

和小提琴。它工作得很好，但它看起来像一个黑客，所以我不喜欢它。我想应该有更干净的解决办法，但我找不到。我的答案是实际的OpenLayers v3.0.0-beta.5

我使用setInterval来改变ol.Overlay的位置。

这是一个活塞演示

像Philipp一样，我也使用下面的链接作为动画功能的参考。

http://www.acuriousanimal.com/thebookofopenlayers3/chapter06_02_markers_overlays.html

这是一个JSFiddle演示。它基本上是给div添加一个CSS3动画类，并将其附加到一个开放的图层叠加。

CSS

.pulsate {
  border: 10px solid red;
  background: tranparent;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  height: 50px;
  width: 50px;
  -webkit-animation: pulse 1s ease-out;
  -moz-animation: pulse 1s ease-out;
  animation: pulse 1s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  position: absolute;
  top: -25px;
  left: -25px;
  z-index: 1;
  opacity: 0;
}
@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(0);
    opacity: 0.0;
  }
  25% {
    -moz-transform: scale(0);
    opacity: 0.1;
  }
  50% {
    -moz-transform: scale(0.1);
    opacity: 0.3;
  }
  75% {
    -moz-transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    -moz-transform: scale(1);
    opacity: 0.0;
  }
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.0;
  }
  25% {
    -webkit-transform: scale(0);
    opacity: 0.1;
  }
  50% {
    -webkit-transform: scale(0.1);
    opacity: 0.3;
  }
  75% {
    -webkit-transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 0.0;
  }
}

JS

 var map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        center: ol.proj.transform([-87.623177, 41.881832], 'EPSG:4326', 'EPSG:3857'),
        zoom: 8
      })
    });
var dummyFeature = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-87.89760243,
        41.89884569
      ]
    },
    "id": 12345,
    "properties": {
      "owner": "ABC",
      "mta": 3
    }
  }]
};
function pointToProj(coordinates) {
  var lon = parseFloat(coordinates[0]);
  var lat = parseFloat(coordinates[1]);
  return ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857');
}
function pulsatingCircleAnimation(coor) {
  var element = document.createElement('div');
  element.setAttribute('class', 'pulsate');
  var coorProjection = pointToProj(coor);
  return new ol.Overlay({
    element: element,
    position: coorProjection,
    positioning: 'center-center',
    offset: [1, 1]
  });
}
//Adds the animated div to the ol overlay and returns the same
function addAnimation(feature) {
  var coordinates;
  var overlay;
  coordinates = feature.geometry.coordinates;
  overlay = pulsatingCircleAnimation(coordinates);
  map.addOverlay(overlay);
}

addAnimation(dummyFeature.features[0]);
map.updateSize();