Question

我想制作＆＃34;相机跟随＆＃34;在沿着路径移动时对特征的影响。使用requestAnimationFrame移动该功能，以下是示例代码：

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

我尝试了一些中心视图的选项。它有效，但问题是地图抖动。需要帮助摆脱抖动。

请参阅此OL示例 - http://openlayers.org/en/latest/examples/geolocation-orientation.html，查看地图抖动，按＆＃34;模拟＆＃34;

.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/ - 尝试使用setCenter moveFeature部分line 152函数（Route::get('user/logout', 'UserController@logout')->name('logout');）

以下是视频 - https://youtu.be/L96HgWZi6Lo

Answer 1

我认为问题在于您在每个帧动画中为vectorContext创建并绘制新功能。

相反，你应该创建一个特征并将其添加到vectorLayer一次，然后在每个帧动画中修改它的几何。

  //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/

Answer 2

问题是线上的点不是等距的，因此位置从一个跳到另一个，但没有任何东西。

请看这个例子来计算线上的点数：http://viglino.github.io/ol-ext/examples/animation/map.featureanimation.path.html

使用ol.featureAnimation.Path，如果您必须在位置更改时移动地图，只需在动画要素上收听更改事件以获取其当前位置：

geoMarker.on('change', function() {
  map.getView().setCenter(geoMarker.getGeometry().getCoordinates());
});

您可以在此处查看代码的实际示例：https://jsfiddle.net/Viglino/nhrwynzs/

Openlayers映射关于特征运动动画的动态居中的抖动

2 个答案: