Как оживить функцию в OpenLayers3?

Question

Я использую openlayers3 и пытаюсь оживить ol.Feature:

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

Я хочу, чтобы эта точка пульсировала. В OpenLayers2 я использовал jQuery animate для свойства svgR. Как я могу сделать это в OpenLayers3? Я создал jsFiddle с демо.

Answer 1

Вы можете использовать код из:

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

который использует ol.Overlay(s) и css для отображения анимации.

Хотя я не знаю простого способа добиться чего-то подобного через векторный слой / векторный слой.

Answer 2

Я добился пульсирующей анимации, используя событие 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

Answer 3

Для анимации маркера на маршруте я использую setInterval изменить положение ol.Overlay,

Вот демоверсия плунжера.

Answer 4

Как и Филипп, я также использовал приведенную ниже ссылку в качестве ссылки для анимации функции.

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

Вот демоверсия JSFiddle. Это в основном добавление класса анимации CSS3 к div и присоединение его к наложению открытых слоев.

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();