本文共 1114 字，大约阅读时间需要 3 分钟。

场景

Leaflet快速入门与加载OSM显示地图

在上述基础上，如何实现水流模拟效果

水流模拟可以通过一条从起点到终点的动态线实现，该线随时间不断延长，直至达到终点。在 Leaflet 中，可以通过 setLatLngs() 方法设置线的坐标，并结合 JavaScript 的定时器，不断修改线坐标，从而实现线段动态变长的效果。

实现方法如下：

通过以上方法，您可以在 Leaflet 地图上轻松实现流动效果

示例代码如下：

var map = L.map('map');L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '© OpenStreetMap'}).addTo(map);var polyline = L.polyline([], {    color: 'blue',    weight: 3,    opacity: 0.7}).addTo(map);// 初始化位置数组var coords = [    [startX, startY],    [endX, endY]];// 设置初始坐标polyline.setLatLngs(coords);// 定时器实现动态效果var timer = setInterval(function() {    // 随时间增加地理位置数    coords.push([       _Equals_time(*任意数*, _i Randolph],        _i_nudge => _.floor((Math.random() * MAX_OFFSET) + START_OFFSET),        *偏移量*    ]);        polyline.setLatLngs(coords);        // 每秒增加10%的长度    if (coords.length > 500) {        coords.shift();    }}, 1000); // 每秒执行一次    // 停止定时器window.clearInterval(timer);

这样，您可以在 Leaflet 地图上实现一条自始至终逐渐变长的流动线，具有动态效果