Leaflet 中的动画 setView()

Question

我的传单地图中有一个搜索栏，我希望地图在从搜索栏中选择时缓慢缩放和平移到标记。我可以让它缩放和平移但速度不慢。我想要的效果类似于您在 Google 地球中输入一个位置，然后 'flys' 从一个位置到下一个位置的视图。这是我的代码，它缩放到我的位置但速度不慢。

controlSearch = new L.Control.Search({layer:listOfMarkers, propertyName: 'IntersectionName', circleLocation:true,  position:'topleft'});
    map.addControl(controlSearch)

controlSearch.on('search_locationfound', function(e){
    map.setView(e.latlng,15, {animate:true, duration:10.0})
});

我正在使用传单 v0.7.7。

谢谢！

Answer 1

不幸的是，在 Leaflet 0.7.7* 中，无法更改任何 setView 更改当前缩放级别的持续时间。任何动画缩放的持续时间都被硬编码为 0.25 秒，并且因为 setView 接受 zoom/pan options，其中不包括 duration，您的 duration:10.0 将被忽略。

但是，setView 确实接受单独的平移和缩放选项，并且由于 pan options 确实包括持续时间，您可以在当前缩放级别 平滑平移 使用以下内容：

map.setView(e.latlng, map.getZoom(), {
  "animate": true,
  "pan": {
    "duration": 10
  }
});

我知道这不是您要找的东西，但离您更近了一步。

*在Leaflet 1.0b中，有一个flyTo method，它产生了你描述的效果，但在0.7.7中没有类似的东西。

Answer 2

另一种方式

map.flyTo(e.latlng, map.getZoom(), {
      animate: true,
      duration: 0.5
    });

Leaflet 中的动画 setView()

Animated setView() in Leaflet

leaflet