Openlayers将抖动映射到要素运动动画的动态居中 [英] Openlayers map jitters on dynamic centering of feature movement animation

问题描述

我想在功能沿路径移动时使相机跟随"效果. 使用requestAnimationFrame移动功能，这是示例代码:

I want to make "camera follow" effect on feature while its moves along path. The feature is moved using requestAnimationFrame, here is the example code:

var lastFrame = +new Date;
var updateSlider = function () {
    var now = +new Date, deltaTime = now - lastFrame;
    trackValue += deltaTime;
    self.move(trackValue);
    lastFrame = now;
    self.Timer = requestAnimationFrame(updateSlider);
};
updateSlider();

.move = function (timestamp) {
 var point = LineString.getCoordinateAtM(timestamp);
 if(point) Feature.setCoordinate(point);
 this.followCamera();
};

我尝试了几种将视图居中的方法.它确实有效，但是问题是地图抖动了.在摆脱抖动方面需要帮助.

I tried a few options of centering the view. And it works, but the problem is that the map jitters. Need help on getting rid of the jitter.

查看此OL示例- http://openlayers.org/en/Latest/examples/geolocation-orientation.html ，要查看地图抖动，请按模拟"

See this OL example - http://openlayers.org/en/latest/examples/geolocation-orientation.html, to see map jitters, press "Simulate"

.followCamera = function() {
 var extent = Feature.getGeometry().getExtent();
 A) view.set('center', ol.extent.getCenter(extent);
 B) view.setCenter(ol.extent.getCenter(extent); 
 C) view.animate({center: ol.extent.getCenter(extent)});
 D) view.fit(extent) <- Not usable in my case, because i want to zoom in/out manually
};

您也可以尝试以下示例(取自ol示例)- https://jsfiddle.net/32z45kLo /5/-尝试在moveFeature函数(line 152)上使用和不使用setCenter部分

Also you can try this example (taken from ol examples) - https://jsfiddle.net/32z45kLo/5/ - try with and without setCenter part at moveFeature function (line 152)

这是视频- https://youtu.be/L96HgWZi6Lo

推荐答案

我认为问题在于您正在为每个帧动画创建并绘制一个新功能到vectorContext.

I think the problem is that you are creating and drawing a new feature to vectorContext at each frame animation.

相反，您应该创建一个特征并将其添加到vectorLayer中一次，然后在每个帧动画处修改其几何形状.

Instead you should create a feature and add it into a vectorLayer once, and then modify its geometry at each frame animation.

  //here you define the pinpoint feature and add it to the vectorLayer
  var feature = new ol.Feature();
  feature.setStyle(styles.geoMarker);
  vectorLayer.getSource().addFeature(feature);

  var moveFeature = function(event) {
    var vectorContext = event.vectorContext;
    var frameState = event.frameState;

    if (animating) {
      var elapsedTime = frameState.time - now;
      // here the trick to increase speed is to jump some indexes
      // on lineString coordinates
      var index = Math.round(speed * elapsedTime / 1000);

      if (index >= routeLength) {
        stopAnimation(true);
        return;
      }

      var currentPoint = new ol.geom.Point(routeCoords[index]);
      //here you modify the feature geometry instead of creating a new feature
      feature.setGeometry(currentPoint);
      map.getView().setCenter(routeCoords[index]);
    }
    // tell OpenLayers to continue the postcompose animation
    map.render();
  };

工作演示无抖动: https://jsfiddle.net/32z45kLo/80/

这篇关于Openlayers将抖动映射到要素运动动画的动态居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！