Question

我想实现一个“跟踪”地图视图，其中当前位置不在地图中心，而是距底部的地图高度的1/4（例如标准导航系统处于跟踪模式）。我发现它可以与[centerOn]（https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#centerOn）一起使用，将当前GPS坐标定义为“坐标”，将“位置”定义为地图高度的宽度/ 2和1/4。

现在，我要向其中添加动画，以使GPS更新之间具有平滑的过渡。

我用[animate]（https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#animate）进行了尝试，从动画的角度来看，它看起来确实不错，但是不能放在1/4高度。知道如何将两者结合吗？

Answer 1

一种方法是使地图div溢出，以使中心出现在可见部分的高度的1/4

var map = new ol.Map({
    target: 'map',
    layers:  [new ol.layer.Tile({ source: new ol.source.OSM()})],
    view: new ol.View({
        center: ol.proj.fromLonLat([2.3442, 48.8635]),
        zoom: 6
    })
});

  <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
  <style>
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.map {
    position: absolute;
    width: 100%;
    height: calc(100% *3/2);
}
   .map div.ol-attribution {
    bottom: calc(100%/3 + .5em);
}
  </style>
  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>

另一种方法，使用法线贴图，您可以使用centerOn获取以某个位置为中心的真实地图中心，立即撤消更改，然后重复使用animate：

var oldCenter = view.getCenter();
view.centerOn(gpsCoordinates, size, [size[0]/2, size[1]*3/4]);
var newCenter = view.getCenter();
view.setCenter(oldCenter);
view.animate({center: newCenter});

如何将视图位置与动画结合？

1 个答案: