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)
},
效果如下