首页 > 解决方案 > 在 Leaflet Motion Plugin 中捕获 Motion End 事件

问题描述

我目前正在使用传单,传单运动插件来为折线设置动画。

现在我需要在动作动画完成后显示一个弹出窗口。

我怎样才能捕捉到动作结束事件。

从文档中,我可以看到 L.Motion.Event.Ended 事件将在动作结束后触发。

但我无法得到这个动作结束事件。

任何人都可以帮助捕捉传单运动中的运动结束事件。

标签: javascriptanimationeventsleaflet

解决方案


刚刚想通了。创建运动对象后,您可以像这样监听它:

var route = L.motion.polyline(pol, {
    color: "steelblue",// + Math.floor(Math.random()*16777215).toString(16),
    weight:4
  }, 
  {          
    auto:false,
    duration:this.route_speed
  },
  {
    removeOnEnd: true,
    icon: L.divIcon({
      className: 'custom-div-icon',
      html: "<i class='fas fa-map-pin' style='color:red; font-size: 20px;'></i>",
      iconSize: [30, 42],
      iconAnchor: [5, 20]
    })
  }).addTo(this.map);

this.routes.push(route);

route.on('motion-started', (e) => {
  console.log("START")
})

route.on('motion-ended', (e) => {
  console.log("END")
})

推荐阅读