Question

有人可以建议我如何更改示例中的动画，使其从终点（折线的终点）开始而不是从起点开始吗？我试图更改下面的代码：

Start

以下是小提琴：https://jsfiddle.net/31rr5r0v/203/

Answer 1

您可以这样做

var i = path.length - 1,
  interval;
var animation = function() {

  if (i == -1) {
    i = path.length - 1;
  }

  marker.setPosition(path[i]);
  i--;
};

将i设置为path.length - 1并递减

var
  sourceFeatures = new ol.source.Vector(),
  layerFeatures = new ol.layer.Vector({
    source: sourceFeatures
  });

var lineString = new ol.geom.LineString([]);

var layerRoute = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [
      new ol.Feature({
        geometry: lineString
      })
    ]
  }),
  style: [
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        width: 3,
        color: 'rgba(0, 0, 0, 1)',
        lineDash: [.1, 5]
      }),
      zIndex: 2
    })
  ],
  updateWhileAnimating: true
});


var map = new ol.Map({
  target: 'map',
  view: new ol.View({
    center: [-5483805.05, -1884105.39],
    zoom: 16,
    minZoom: 2,
    maxZoom: 20
  }),
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM(),
      opacity: 0.85
    }),
    layerRoute, layerFeatures
  ]
});

var markerEl = document.getElementById('geo-marker');
var marker = new ol.Overlay({
  positioning: 'center-center',
  offset: [0, 0],
  element: markerEl,
  stopEvent: false
});
map.addOverlay(marker);

var
  fill = new ol.style.Fill({
    color: 'rgba(255,255,255,1)'
  }),
  stroke = new ol.style.Stroke({
    color: 'rgba(0,0,0,1)'
  }),
  style1 = [
    new ol.style.Style({
      image: new ol.style.Icon(({
        scale: .7,
        opacity: 1,
        rotateWithView: false,
        anchor: [0.5, 1],
        anchorXUnits: 'fraction',
        anchorYUnits: 'fraction',
        src: '//cdn.rawgit.com/jonataswalker/map-utils/' + 'master/images/marker.png'
      })),
      zIndex: 5
    }),
    new ol.style.Style({
      image: new ol.style.Circle({
        radius: 6,
        fill: fill,
        stroke: stroke
      }),
      zIndex: 4
    })
  ];


//a simulated path
var path = [
  [-12660, 6711103],
  [-9070, 6713576],
  [-9755, 6713276],
  [-9755, 6713776],
  [-9755, 6714976]
];


var
  feature_start = new ol.Feature({
    geometry: new ol.geom.Point(path[0])
  }),
  feature_end = new ol.Feature({
    geometry: new ol.geom.Point(path[path.length - 1])
  });
feature_start.setStyle(style1);
feature_end.setStyle(style1);
sourceFeatures.addFeatures([feature_start, feature_end]);

lineString.setCoordinates(path);

//fire the animation
map.once('postcompose', function(event) {
  interval = setInterval(animation, 750);
});

var i = path.length - 1,
  interval;
var animation = function() {

  if (i == -1) {
    i = path.length - 1;
  }

  marker.setPosition(path[i]);
  i--;
};


map.getView().fit(lineString.getExtent());

html,
body,
#map {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#geo-marker {
  width: 10px;
  height: 10px;
  border: 1px solid #088;
  border-radius: 5px;
  background-color: #0b968f;
  opacity: 0.8;
}

<div id="map"></div>
<div id="geo-marker"></div>


<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css" type="text/css">

Openlayers动画更改起点

1 个答案: