【Leaflet.Polyline.SnakeAnim插件水流效果】

Leaflet中使用Leaflet.Polyline.SnakeAnim插件实现水流分流效果

定义好地图

// mapDiv为id名字,setView参数1: 地图中心坐标位置 参数2: 地图加载级别(数字越大,地图加载越近)
this.map = L.map('mapDiv').setView([33.6528734492,104.7626939500], 5)

引入插件

链接: L.Polyline.SnakeAnim.js

import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import './L.Polyline.SnakeAnim'

解决循环调用snakeIn报错问题 Unhandled Rejection (TypeError): coordinates must be finite numbers
snakeIn方法内修改一下，增加setTimeout：

 setTimeout(() => {
      this._latlngs = [[this._snakeLatLngs[0][0], this._snakeLatLngs[0][0]]]
      this._update()
      this._snake()
      this.fire('snakestart')
    })

定义无分支河流

private lineStyle={
      color: '#82e7ff',
      opacity: 0.5,
      snakingSpeed: 50,
      weight: 6
    }
onnormalRiver=(river: any) => {
      // 创建线图层
      const pathNormal = L.polyline(river, {
        color: this.lineStyle.color,
        opacity: this.lineStyle.opacity,
        snakingSpeed: this.lineStyle.snakingSpeed,
        weight: this.lineStyle.weight,
        callback: () => {
          this.map.removeLayer(pathNormal)
          this.onnormalRiver(river)
        }
      })
      pathNormal.addTo(this.map)
      pathNormal.snakeIn()
    }

经纬度的二维数组

river=[[
      32.0270932518109,
      119.89737325152
    ],
    [
      32.0221802110627,
      119.879102991019
    ],
    [
      32.0211425125728,
      119.874826715614
    ],
    [
      32.0196112601789,
      119.872287260999
    ],
    [
      32.0145209075597,
      119.86831300831
    ],
    [
      32.012394594061,
      119.863966502524
    ],
    [
      32.0118721182309,
      119.863199512125
    ],
    [
      32.0084465811528,
      119.857073921856
    ],
    [
      32.0072591256129,
      119.849835255678
    ],
    [
      32.0049843196381,
      119.846426267173
    ],
    [
      31.9991923826313,
      119.843670770873
    ],
    [
      31.996675784381,
      119.842679755997
    ],
    [
      31.9926546370278,
      119.841096380454
    ],
    [
      31.987317202966,
      119.838994926973
    ],
    [
      31.9739535772944,
      119.833641474032
    ],
    [
      31.972354115429,
      119.833165262386
    ],
    [
      31.9685982908565,
      119.831619900706
    ],
    [
      31.966113835086,
      119.83065388109
    ],
    [
      31.9604296114677,
      119.828443917004
    ],
    [
      31.95800373084,
      119.827601223715
    ]]

定义有分支河流

private lineStyle={
      color: '#82e7ff',
      opacity: 0.5,
      snakingSpeed: 50,
      weight: 6
    }
    private treeLay=[]
    onRiverTree = (p: any, num: number) => {
      p.map((v: any) => {
        const subpath = L.polyline(v.path, {
          color: this.lineStyle.color,
          opacity: this.lineStyle.opacity,
          snakingSpeed: this.lineStyle.snakingSpeed,
          weight: this.lineStyle.weight,
          callback: () => {
            if (this.treeLay.length === num) {
              setTimeout(() => {
                this.removeLayers(this.treeLay)
                this.treeLay = []
                this.onRiverTree(mainriversTree, num)
              }, 2000)
            }
            if (v.children && v.children.length > 0) {
              this.onRiverTree(v.children, num)
            }
            // this.removeLayers([subpath])
            // this.onRiverTree(mainriversTree)
          }
        })
        // @ts-ignore
        this.treeLay.push(subpath)
        subpath.addTo(this.map)
        subpath.snakeIn()
      })
    }

经纬度树型结构

p=[{
      'name': '1',
      'path': [
        [
          32.0270932518109,
          119.89737325152
        ],
        [
          32.0221802110627,
          119.879102991019
        ],
        [
          32.0211425125728,
          119.874826715614
        ],
        [
          32.0196112601789,
          119.872287260999
        ],
        [
          32.0145209075597,
          119.86831300831
        ]
      ],
      'children': [
        {
          'name': '1-1',
          'path': [
            [
              31.70956123,
              119.7130963
            ],
            [
              31.71074239,
              119.7103873
            ],
            [
              31.7119258,
              119.7065988
            ],
            [
              31.71921155,
              119.6812736
            ],
            [
              31.71993841,
              119.6789956
            ],
            [
              31.72203779,
              119.6743398
            ]
          ],
          'children': []
        },
        {
          'name': '1-2',
          'path': [
            [
              31.70789319,
              119.7169217
            ],
            [
              31.70785947,
              119.716999
            ],
            [
              31.70666223,
              119.7296511
            ],
            [
              31.7065296,
              119.7320702
            ],
            [
              31.70674952,
              119.7333263
            ],
            [
              31.70809575,
              119.7363443
            ],
            [
              31.71054369,
              119.740176
            ],
            [
              31.71195896,
              119.7423914
            ]
          ],
          'children': []
        },
        {
          'name': '1-3',
          'path': [
            [
              31.64631899,
              119.6834265
            ],
            [
              31.645535,
              119.6809715
            ],
            [
              31.6461712,
              119.6772337
            ],
            [
              31.65100258,
              119.6730661
            ],
            [
              31.65232023,
              119.6707973
            ],
            [
              31.65785501,
              119.6641357
            ],
            [
              31.66394967,
              119.6617739
            ]
          ],
          'children': []
        }
      ]
    }]
//num就是p树形结构中一共几条线，上述例子中为：4