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

r囧r小猫 2023-09-30 12:59 3阅读 0赞

## 场景 ##

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

[Leaflet快速入门与加载OSM显示地图\_霸道流氓气质的博客-CSDN博客\_leaflet 显示地图][Leaflet_OSM_-CSDN_leaflet]

在上面的基础上怎样实现水流模拟效果。

![42c646f6e1694f4f9966d4038792d0cf.gif][]

水流模拟，即一条线从起点出发，随着时间不断变长，直至到达终点。

Leaflet提供了setLatLngs()方法，供用户修改线坐标，再结合JavaScript定时器，不断地修改线坐标，达到

线动态变长的效果。

插件地址：

[htthttps://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim][htthttps_github.com_IvanSanchez_Leaflet.Polyline.SnakeAnim]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi ][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、下载插件并引入依赖和水流路线数据

2、路径数据再插件仓库中有

获取线的数据

//线坐标数组
            var latlngs = new Array();
            //获取线数据
            for (var i = 0, len = route.length; i < len; i++) {
                latlngs.push(new L.LatLng(route[i][0], route[i][1]));
            }

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_19_color_FFFFFF_t_70_g_se_x_16][]

3、也可以用如下路径数据

var route=[[34.268043518066406,90.56607055664062],[34.32582092285156,91.21858215332031],[34.242210388183594,91.82025146484375],[34.129150390625,91.99998474121094],[34.23942565917969,92.16552734375],[34.19970703125,92.60163879394531],[34.11914825439453,92.64970397949219],[34.077484130859375,92.82191467285156],[34.09288787841797,92.94024658203125],[34.235260009765625,93.19273376464844],[34.210540771484375,93.65830993652344],[34.25720977783203,93.80691528320312],[34.55137634277344,94.05218505859375],[34.57470703125,94.25469970703125],[34.75665283203125,94.54774475097656],[34.68072509765625,94.921630859375],[34.58137512207031,95.002197265625],[34.454986572265625,95.30662536621094],[34.48442840576172,95.33331298828125],[34.34886932373047,95.4830322265625],[34.327484130859375,95.56358337402344],[34.23109436035156,95.57025146484375],[34.21165466308594,95.66746520996094],[33.890541076660156,95.9246826171875],[33.76304626464844,96.17802429199219],[33.784156799316406,96.21218872070312],[33.72081756591797,96.26052856445312],[33.765541076660156,96.37162780761719],[33.68415832519531,96.40052795410156],[33.58637237548828,96.61996459960938],[33.547210693359375,96.69662475585938],[33.39276123046875,96.74607849121094],[33.32026672363281,96.85246276855469],[33.315818786621094,97.01469421386719],[33.21942901611328,97.01803588867188],[32.8438720703125,97.38441467285156],[32.77720642089844,97.38414001464844],[32.672210693359375,97.46441650390625],[32.34248352050781,98.21080017089844],[32.24553680419922,98.2169189453125],[31.983600616455078,98.44969177246094],[31.89804458618164,98.44662475585938],[31.879432678222656,98.40997314453125],[31.570823669433594,98.62274169921875],[31.354442596435547,98.87718200683594],[31.229713439941406,98.7774658203125],[31.31110382080078,98.64442443847656],[31.227489471435547,98.60662841796875],[30.98415756225586,98.79997253417969],[30.89443588256836,98.7774658203125],[30.74498748779297,98.9527587890625],[30.679157257080078,98.90580749511719],[29.933048248291016,99.04913330078125],[29.675548553466797,98.98385620117188],[29.24997329711914,99.09640502929688],[28.71609878540039,99.11607360839844],[28.518600463867188,99.17941284179688],[28.431659698486328,99.15553283691406],[28.121051788330078,99.39851379394531],[27.850826263427734,99.4588623046875],[27.760272979736328,99.43801879882812],[27.323326110839844,99.6483154296875],[27.040828704833984,99.93302917480469],[26.882770538330078,99.96580505371094],[26.94943618774414,100.0596923828125],[27.16666030883789,100.0577392578125],[27.33443832397461,100.23523712158203],[27.510272979736328,100.18551635742188],[27.825271606445312,100.29692077636719],[27.843048095703125,100.4013671875],[27.801105499267578,100.43329620361328],[27.51055145263672,100.44217681884766],[27.43749237060547,100.53941345214844],[27.219711303710938,100.53968811035156],[27.189712524414062,100.43496704101562],[27.138885498046875,100.48857116699219],[26.818603515625,100.45303344726562],[26.78777313232422,100.38996887207031],[26.361103057861328,100.44940185546875],[26.317214965820312,100.4072036743164],[26.214157104492188,100.44830322265625],[26.198047637939453,100.93885803222656],[26.309158325195312,101.05580139160156],[26.415267944335938,101.45525360107422],[26.51694107055664,101.44412231445312],[26.59054946899414,101.5083236694336],[26.593883514404297,101.61414337158203],[26.55971908569336,101.68357849121094],[26.602550506591797,101.79888916015625],[26.583602905273438,101.83997344970703],[26.344158172607422,101.94190979003906],[26.181446075439453,101.87702941894531],[25.993045806884766,101.82803344726562],[25.97110366821289,101.86469268798828],[25.988601684570312,102.066650390625],[26.08159637451172,102.10711669921875],[26.224716186523438,102.25080871582031],[26.374713897705078,102.56468200683594],[26.344993591308594,102.62386322021484],[26.261661529541016,102.60246276855469],[26.21860122680664,102.67579650878906],[26.35332489013672,102.98052978515625],[26.54110336303711,103.05940246582031],[27.024993896484375,102.8721923828125],[27.121936798095703,102.91468811035156],[27.27527618408203,102.88246154785156],[27.412769317626953,102.94551086425781],[27.373882293701172,102.99385070800781],[27.42046356201172,103.14105224609375],[27.525272369384766,103.17829895019531],[27.834716796875,103.49968719482422],[27.978046417236328,103.56552124023438],[27.97693634033203,103.50496673583984],[28.11943817138672,103.44830322265625],[28.26638412475586,103.63609313964844],[28.207763671875,103.71053314208984],[28.318607330322266,103.87523651123047],[28.52721405029297,103.78996276855469],[28.663043975830078,103.84774780273438],[28.60443878173828,103.9516372680664],[28.66193389892578,104.24858093261719],[28.621654510498047,104.30580139160156],[28.638320922851562,104.45858764648438],[28.77971649169922,104.60025024414062],[28.82666015625,104.81693267822266],[28.777488708496094,104.91829681396484],[28.836380004882812,104.98441314697266],[28.821659088134766,105.01997375488281],[28.758323669433594,105.01109313964844],[28.711936950683594,105.10106658935547],[28.723602294921875,105.14775085449219],[28.782772064208984,105.15303039550781],[28.746658325195312,105.25025939941406],[28.790550231933594,105.35051727294922],[28.853042602539062,105.36551666259766],[28.897525787353516,105.4404067993164],[28.905548095703125,105.55274963378906],[28.95998764038086,105.55329895019531],[28.96805191040039,105.58997344970703],[28.884716033935547,105.62857055664062],[28.923046112060547,105.76664733886719],[28.813655853271484,105.83268737792969],[28.877487182617188,105.90164184570312],[28.958602905273438,105.81858825683594],[29.045547485351562,105.873291015625],[29.100826263427734,106.02385711669922],[29.093605041503906,106.13996887207031],[29.16082000732422,106.11551666259766],[29.29110336303711,106.24801635742188],[29.28860092163086,106.36441040039062],[29.388877868652344,106.455810546875],[29.400264739990234,106.51997375488281],[29.469711303710938,106.4921875],[29.610820770263672,106.58580017089844],[29.568607330322266,106.68385314941406],[29.614715576171875,106.75080871582031],[29.584434509277344,106.83553314208984],[29.820545196533203,107.07553100585938],[29.690269470214844,107.16552734375],[29.742767333984375,107.30496215820312],[29.724327087402344,107.39659118652344],[29.83249282836914,107.48026275634766],[29.880542755126953,107.45802307128906],[29.90054702758789,107.49079895019531],[29.844436645507812,107.61247253417969],[29.876937866210938,107.71803283691406],[30.00860595703125,107.84998321533203],[30.207489013671875,107.94217681884766],[30.32748794555664,108.07274627685547],[30.35999298095703,108.08941650390625],[30.43582534790039,108.22441101074219],[30.728878021240234,108.41773986816406],[30.820270538330078,108.40080261230469],[30.94666290283203,108.62439727783203],[30.936935424804688,108.98663330078125],[31.022216796875,109.60830688476562],[30.998600006103516,109.65496826171875],[31.068328857421875,109.94998168945312],[31.01971435546875,110.24358367919922],[31.029155731201172,110.54469299316406],[30.843048095703125,111.13691711425781],[30.506378173828125,111.42607116699219],[30.415267944335938,111.44551086425781],[30.40888214111328,111.51553344726562],[30.309711456298828,111.50276184082031],[30.268325805664062,111.55191040039062],[30.31072998046875,111.61399841308594],[30.3841552734375,111.65997314453125],[30.42388153076172,111.85442352294922],[30.282493591308594,112.01387023925781],[30.303043365478516,112.21469116210938],[30.236103057861328,112.27359008789062],[30.123043060302734,112.18995666503906],[30.07721710205078,112.20691680908203],[30.064716339111328,112.33164978027344],[29.95026397705078,112.42301940917969],[29.72665786743164,112.37162780761719],[29.841659545898438,112.57190704345703],[29.714431762695312,112.59970092773438],[29.712215423583984,112.63246154785156],[29.823322296142578,112.66219329833984],[29.782215118408203,112.76052856445312],[29.75888442993164,112.68663024902344],[29.738323211669922,112.69912719726562],[29.737197875976562,112.78338623046875],[29.787216186523438,112.86885070800781],[29.773887634277344,112.90857696533203],[29.69332504272461,112.921630859375],[29.773601531982422,113.02024841308594],[29.685928344726562,112.99628448486328],[29.640270233154297,112.90940856933594],[29.588045120239258,112.90492248535156],[29.47582244873047,112.9346923828125],[29.516937255859375,113.03164672851562],[29.44082260131836,113.05079650878906],[29.496686935424805,113.08438110351562],[29.463661193847656,113.12581634521484],[29.73487091064453,113.38129425048828],[29.875568389892578,113.58786010742188],[29.951934814453125,113.66441345214844],[29.923324584960938,113.76219177246094],[30.018735885620117,113.8837661743164],[30.086654663085938,114.06385803222656],[30.118324279785156,114.06886291503906],[30.194992065429688,113.96163940429688],[30.183048248291016,113.8649673461914],[30.213321685791016,113.85357666015625],[30.282772064208984,113.90635681152344],[30.28915786743164,113.95802307128906],[30.225269317626953,114.03053283691406],[30.2536563873291,114.06648254394531],[30.338489532470703,114.09911346435547],[30.447906494140625,114.19434356689453],[30.521207809448242,114.2687759399414],[30.562763214111328,114.27883911132812],[30.58916473388672,114.30415344238281],[30.6083927154541,114.31598663330078],[30.651927947998047,114.36942291259766],[30.661823272705078,114.40108489990234],[30.66973876953125,114.43868255615234],[30.671340942382812,114.488037109375],[30.670162200927734,114.50216674804688],[30.66427993774414,114.51747131347656],[30.647789001464844,114.53749084472656],[30.594799041748047,114.56694030761719],[30.580665588378906,114.57752990722656],[30.57242202758789,114.58811950683594],[30.568893432617188,114.60343933105469],[30.568893432617188,114.63758850097656],[30.57477569580078,114.68232727050781],[30.581844329833984,114.70472717285156],[30.610107421875,114.75772094726562],[30.61246109008789,114.77656555175781],[30.610107421875,114.79774475097656],[30.60657501220703,114.80952453613281],[30.594799041748047,114.81777954101562],[30.584197998046875,114.82246398925781],[30.568893432617188,114.82365417480469],[30.531204223632812,114.82246398925781],[30.517074584960938,114.81777954101562],[30.482925415039062,114.81658935546875],[30.46761703491211,114.81777954101562],[30.45348358154297,114.82365417480469],[30.439353942871094,114.83424377441406],[30.415802001953125,114.86369323730469],[30.407554626464844,114.89666748046875],[30.404022216796875,114.91433715820312],[30.39813232421875,114.95201110839844],[30.402843475341797,114.96379089355469],[30.40637969970703,114.98970031738281],[30.404022216796875,115.00619506835938],[30.380470275878906,115.04975891113281],[30.371051788330078,115.06271362304688],[30.34396743774414,115.07565307617188],[30.325122833251953,115.07919311523438],[30.307456970214844,115.07212829589844],[30.261531829833984,115.06034851074219],[30.240324020385742,115.06400299072266],[30.222515106201172,115.06993865966797],[30.210641860961914,115.0877456665039],[30.206684112548828,115.1194076538086],[30.208662033081055,115.1471176147461],[30.20470428466797,115.17877197265625],[30.190853118896484,115.20252227783203],[30.15325355529785,115.25001525878906],[30.141382217407227,115.26188659667969],[30.09784698486328,115.2955322265625],[30.074100494384766,115.3034439086914],[30.04045867919922,115.30937957763672],[30.026607513427734,115.31333923339844],[29.998903274536133,115.34697723388672],[29.957345962524414,115.38655853271484],[29.94151496887207,115.39447021484375],[29.909854888916016,115.40238952636719],[29.892044067382812,115.41228485107422],[29.874235153198242,115.42613220214844],[29.860382080078125,115.45185852050781],[29.852466583251953,115.47164916992188],[29.84455108642578,115.50727081298828],[29.842573165893555,115.53893280029297],[29.84455108642578,115.58444213867188],[29.852466583251953,115.61808776855469],[29.854446411132812,115.65568542480469],[29.84455108642578,115.68536376953125],[29.82674217224121,115.71306610107422],[29.791122436523438,115.75264739990234],[29.775291442871094,115.78233337402344],[29.735713958740234,115.87335968017578],[29.73175621032715,115.90303802490234],[29.735713958740234,115.9525146484375],[29.743629455566406,115.98812866210938],[29.75676727294922,116.02432250976562],[29.768226623535156,116.04396057128906],[29.77722930908203,116.06362915039062],[29.786235809326172,116.11355590820312],[29.790325164794922,116.14875793457031],[29.790325164794922,116.18885803222656],[29.789663314819336,116.26048278808594],[29.792787551879883,116.26829528808594],[29.800600051879883,116.27922821044922],[29.817787170410156,116.30110931396484],[29.84591293334961,116.33079528808594],[29.85372543334961,116.34329223632812],[29.863101959228516,116.38391876220703],[29.87247657775879,116.47298431396484],[29.886539459228516,116.50111389160156],[29.89904022216797,116.52455139160156],[29.909976959228516,116.53392028808594],[29.931852340698242,116.54486083984375],[29.955291748046875,116.55110931396484],[29.975603103637695,116.56048583984375],[29.997478485107422,116.58080291748047],[30.013105392456055,116.60267639160156],[30.0318546295166,116.64173889160156],[30.045917510986328,116.69330596923828],[30.059810638427734,116.73665618896484],[30.07428741455078,116.76083374023438],[30.096660614013672,116.78910827636719],[30.141414642333984,116.83149719238281],[30.172035217285156,116.85269165039062],[30.245044708251953,116.89744567871094],[30.282726287841797,116.91275024414062],[30.314525604248047,116.91159057617188],[30.342788696289062,116.90333557128906],[30.361629486083984,116.90097045898438],[30.378116607666016,116.90333557128906],[30.404022216796875,116.91159057617188],[30.422863006591797,116.92098999023438],[30.468795776367188,116.97280883789062],[30.491168975830078,117.010498046875],[30.495954513549805,117.0292739868164],[30.497081756591797,117.04106140136719],[30.496320724487305,117.08832550048828],[30.5003604888916,117.1592025756836],[30.5057373046875,117.18231964111328],[30.51511001586914,117.20398712158203],[30.523773193359375,117.21177673339844],[30.546398162841797,117.22639465332031],[30.565898895263672,117.23030090332031],[30.590274810791016,117.22932434082031],[30.602951049804688,117.22737121582031],[30.618549346923828,117.22151184082031],[30.633174896240234,117.22055053710938],[30.645851135253906,117.22541809082031],[30.65365219116211,117.23419189453125],[30.660480499267578,117.24978637695312],[30.677047729492188,117.28781127929688],[30.68680191040039,117.31317138671875],[30.705326080322266,117.41165161132812],[30.717029571533203,117.45553588867188],[30.788204193115234,117.6671142578125],[30.797954559326172,117.68757629394531],[30.8125057220459,117.70973205566406],[30.83820343017578,117.71829986572266],[30.952409744262695,117.73542785644531],[30.995237350463867,117.73828125],[31.03520965576172,117.73542785644531],[31.092313766479492,117.75541687011719],[31.118009567260742,117.77254486083984],[31.132286071777344,117.80680847167969],[31.132286071777344,117.83535766601562],[31.118009567260742,117.8610610961914],[31.098024368286133,117.87533569335938],[31.08660316467285,117.88675689697266],[31.07803726196289,117.90959930419922],[31.08089256286621,117.93529510498047],[31.089458465576172,117.96099090576172],[31.106590270996094,117.97811889648438],[31.129430770874023,117.98097229003906],[31.172258377075195,117.98097229003906],[31.195100784301758,118.00096130371094],[31.206520080566406,118.0180892944336],[31.2664794921875,118.14086151123047],[31.286466598510742,118.18939971923828],[31.29788589477539,118.30646514892578],[31.309307098388672,118.32359313964844],[31.326438903808594,118.32930755615234],[31.360700607299805,118.32645416259766],[31.400672912597656,118.32073974609375],[31.44635581970215,118.31788635253906],[31.469196319580078,118.32359313964844],[31.5006046295166,118.33787536621094],[31.583404541015625,118.37784576416016],[31.617666244506836,118.4035415649414],[31.64336395263672,118.41496276855469],[31.67762565612793,118.42353057861328],[31.70332145690918,118.42353057861328],[31.729019165039062,118.43209075927734],[31.80419921875,118.47250366210938],[31.870506286621094,118.51148986816406],[31.983604431152344,118.61875915527344],[32.013832092285156,118.64410400390625],[32.07427978515625,118.68992614746094],[32.10548400878906,118.71820068359375],[32.14546203613281,118.7591552734375],[32.15814208984375,118.78451538085938],[32.166908264160156,118.81181335449219],[32.171791076660156,118.836181640625],[32.167884826660156,118.86251831054688],[32.16593933105469,118.89956665039062],[32.168861389160156,118.9161376953125],[32.20103454589844,119.00975036621094],[32.2343864440918,119.0630874633789],[32.24009323120117,119.08878326416016],[32.231529235839844,119.15731048583984],[32.218536376953125,119.36288452148438],[32.22930908203125,119.38710021972656],[32.2313232421875,119.4039306640625],[32.231529235839844,119.49136352539062],[32.21803283691406,119.55903625488281],[32.21269226074219,119.56719207763672],[32.20970916748047,119.56920623779297],[32.19064712524414,119.61310577392578]]

4、创建线图层并添加起始点标注，启动模拟

//创建线图层
            path = L.polyline(latlngs, { snakingSpeed: 30 });
            //在起点处添加一个标注
            map.addLayer(L.marker(latlngs[0]));
            //在终点处添加一个标注
            map.addLayer(L.marker(latlngs[len - 1]));
            //将线图层添加至地图中
            map.addLayer(path);
            //启动模拟
            path.snakeIn();

5、完整示例代码

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>leaflet水流模拟</title>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
        <style>
            html,
            body,
            #map {
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    
    <body>
        <div id="map"></div>
        <script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
        <script type="text/javascript" src="./js/L.Polyline.SnakeAnim.js"></script>
        <script type="text/javascript" src="./data/route.js"></script>
        <script type="text/javascript">
            var map = L.map('map').setView([36.09, 120.35], 5);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: ''
            }).addTo(map);
            //线坐标数组
            var latlngs = new Array();
            //获取线数据
            for (var i = 0, len = route.length; i < len; i++) {
                latlngs.push(new L.LatLng(route[i][0], route[i][1]));
            }
            //创建线图层
            path = L.polyline(latlngs, { snakingSpeed: 30 });
            //在起点处添加一个标注
            map.addLayer(L.marker(latlngs[0]));
            //在终点处添加一个标注
            map.addLayer(L.marker(latlngs[len - 1]));
            //将线图层添加至地图中
            map.addLayer(path);
            //启动模拟
            path.snakeIn();
        </script>
    </body>
    
    </html>

[Leaflet_OSM_-CSDN_leaflet]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880
[42c646f6e1694f4f9966d4038792d0cf.gif]: https://img-blog.csdnimg.cn/42c646f6e1694f4f9966d4038792d0cf.gif
[htthttps_github.com_IvanSanchez_Leaflet.Polyline.SnakeAnim]: https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/9504faf5890244f2bec3942efc1c15f6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_19,color_FFFFFF,t_70,g_se,x_16