Leaflet重叠polyline点击后如何调用bringToFront置顶显示

解决方案 #

你找到的示例是Ember框架封装的Leaflet组件专属写法，在普通cshtml页面的原生Leaflet开发场景下不需要用这种语法，直接调用Leaflet原生API即可实现需求。

Leaflet的所有矢量图层（包括Polyline）原生内置bringToFront()方法，调用后会将当前图层移到所有同类型图层的最顶层，避免被遮挡。你可以直接在现有修改样式的逻辑中补充调用该方法：

function changeMapLineColour() {
  // 省略其他逻辑
  for(let i = 0; i < lines.length; i++) {
    lines[i].setStyle({
      color: "white",
      weight: 4
    })
    // 新增一行，将当前polyline移到顶层
    lines[i].bringToFront()
  }
}

更简洁的优化方案 #

如果同一分组的polyline数量较多，建议用Leaflet的FeatureGroup来管理同组所有polyline，后续修改样式、调整层级都可以直接对整个分组操作，不需要循环单个元素：

1. 初始化分组时将同组所有polyline加入FeatureGroup

// 初始化时处理
var lineGroup = L.featureGroup(lines).addTo(mymap);
// 点击事件绑定在分组或者对应的marker上均可

2. 点击事件中直接对整个分组操作

function changeMapLineColour() {
  // 省略其他逻辑
  lineGroup.setStyle({
    color: "white",
    weight: 4
  })
  // 整个分组直接移到顶层
  lineGroup.bringToFront()
}

内容的提问来源于stack exchange，提问作者tj26