leaflet实现点击线段高亮与线段动画

1、 获取geoJSON数据，绘制到地图中,此时透明的设置为0隐藏，至于geoJSON数据是怎么处理的请移步到 leaflet简单使用

//绘制河流线段
drawRiveLineData(states) {
  // states：处理过后的 geoJSON 数据
  let self = this
  this.riverGeoJson = L.geoJSON(states, {
    style: function(feature) {
      // 设置样式
      return {
        opacity: 0, //边框隐藏
        weight: 10, //宽度
        fillOpacity: 0 //背景隐藏
      }
    },
    onEachFeature: self.lineStringClick //添加线段点击事件
  })
  //解释下为什么不直接使用geoJSON而使用layerGroup添加到map呢
  //因为只有layerGroup才能使用setZIndex 设置层级
  //riverLineLayerArr 存放每个layer的数组
  let layerGroup = L.layerGroup(this.riverLineLayerArr) //添加图层
  layerGroup.setZIndex(999) //设置图层层级
  layerGroup.addTo(this.map) //添加到map中
}

二、为每个layer添加点击事件 

//添加点击事件
lineStringClick(feature, layer) {
   //feature：geoJSON 数据中每个layer携带的参数信息
   this.riverLineLayerArr.push(layer) //添加记录每个layer
   //为每个layer添加事件
   layer.on({
      click: e => {
          let layer = e.target
          //清除其它样式
          this.riverLineLayerArr.forEach(item => {
              //清除河流样式
              this.riverGeoJson.resetStyle(item)
          })
          //添加样式
          layer.setStyle({
            weight: 8,
            color: '#76933C',
            opacity: 1
          })
          //图层保持在最顶层
          if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            layer.bringToFront()
          }
       }
    })
},

效果如下

3、实现河流动画，用的是 L.Polyline.AntPath 插件

处理数据，我这是多条线段，如果单个线段，可以直接new L.Polyline.AntPath().addTo(this.map)添加到map中

//斑马动画数据处理
zebraAnimationData() {
  //新建antPath图层并添加数据
  let antPathArr = []
  this.riverGeoArr.forEach(item => {
    //格式：[[],[],[]]
    //实例化
    var polyline = new L.Polyline.AntPath(item, {
      paused: false, //暂停  初始化状态
      reverse: false, //方向反转
      delay: 1000, //延迟，数值越大效果越缓慢
      dashArray: [20, 50], //间隔样式
      weight: 5, //线宽
      opacity: 0.8, //透明度
      color: '#27AFFF', //颜色
      pulseColor: '#FFF' //块颜色
    })
    antPathArr.push(polyline)
  })
  //新建图层 featureGroup 可以同时添加marker河line
  this.zebraAnimationLayer = L.featureGroup(antPathArr) //新建antPath图层
  this.zebraAnimationLayer.addTo(this.map)
},

 效果如下