Leaflet 中的动画 setView()答案

【问题标题】：Animated setView() in LeafletLeaflet 中的动画 setView()
【发布时间】：2016-03-22 23:37:24
【问题描述】：

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

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。

谢谢！

【问题讨论】：

标签： leaflet

【解决方案1】：

不幸的是，无法更改任何 setView 的持续时间，这会更改 Leaflet 0.7.7* 中的当前缩放级别。任何动画缩放的持续时间都被硬编码为 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中没有类似的。

【讨论】：

【解决方案2】：

另一种方式

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

【讨论】：