当 flyToBounds 方法缩放多边形时多边形边缘冻结

Question

我正在使用 flytobounds 方法加载带动画的多边形。但是这里有个小问题

正如您在 gif 和 jsfiddle 示例中看到的那样，在缩放多边形时，多边形边缘会冻结，直到获得最佳缩放级别。

我该如何解决这个动画问题？或者是否有任何替代方法来替换“flytobounds”方法。

İf gif 样本不清晰。

你可以在 jsfiddle 上检查这个错误。我相信 jsfiddle 样本清晰然后 gif。 https://jsfiddle.net/esjtfL0y/1/

    var circle = L.circle([51.508, -0.11], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    weight: 2,
    radius: 500
}).addTo(map);

setTimeout(function(){
map.flyToBounds(circle.getBounds(), { 'duration': 7.5 })
}, 1000);

Answer 1

您可以监听 move 事件，然后在地图上触发 viewreset 以“重新加载”图层。

const reRenderFunction = ()=>{
  map.fire('viewreset');
};

setTimeout(function(){
  map.flyToBounds(circle.getBounds(), { 'duration': 7.5 })
  
  map.on('move',reRenderFunction)

  // remove the reload listener after 7.5 seconds
  setTimeout(()=>{
    map.off('move',reRenderFunction);
  },7500);
}, 1000);

当 flyToBounds 方法缩放多边形时多边形边缘冻结

when flyToBounds method zooming polygon polygonal edges freezing

html

javascript

google-static-maps

leaflet

google-mutant