leaflet-velocity风场粒子效果及数据处理

一，后台给到的数据

{"msg": "success","code": 200,"data": {"startLat": 39.3,"endlat": 41.2,"latdel": 0.099999994,"startLon": 115.3,"endLon": 117.50001,"values": "","londel": 0.099999994,"vs": [[-0.06, -0.09, -0.16, -0.15, 0.15, 0.99, 1.6, 1.95, 2.15, 2.3, 2.45, 2.65, 2.79, 2.77, 2.68, 2.71, 2.71, 2.48, 2.2, 2.09, 2.28, 2.61, 2.69],[-0.3, 0.1, 0.35, 0.13, 0.01, 0.28, 0.86, 1.54, 2.05, 2.27, 2.44, 2.56, 2.65, 2.7, 2.62, 2.64, 2.59, 2.41, 2.25, 2.25, 2.4, 2.54, 2.59],[-0.42, 0.03, 0.26, 0.06, 0.08, 0.11, 0.19, 0.91, 1.49, 2.05, 2.37, 2.43, 2.52, 2.54, 2.52, 2.35, 2.23, 2.1, 2.06, 2.11, 2.16, 2.2, 2.37],[-0.03, -0.12, -0.35, -0.29, 0.31, 0.38, 0.3, 0.44, 1, 1.8, 2.18, 2.33, 2.39, 2.44, 2.36, 2.33, 2.32, 2.3, 2.2, 2.08, 1.99, 1.89, 1.89],[0.05, -0.16, -0.33, 0.18, 0.76, 0.82, 0.36, -0.01, 0.44, 0.98, 1.47, 1.86, 1.99, 2.12, 2.18, 2.26, 2.34, 2.26, 1.95, 1.73, 1.72, 1.76, 1.6],[-0.34, -0.28, 0.2, 0.99, 1.46, 1.05, 0.39, 0.02, 0.06, 0.27, 0.62, 1.08, 1.48, 1.8, 1.97, 1.97, 1.91, 1.58, 1.07, 0.68, 0.77, 0.99, 1.09],[0, 0.1, 0.64, 1.47, 1.13, 0.57, 0.16, 0.03, 0.03, 0.18, 0.36, 0.69, 1.17, 1.51, 1.73, 1.87, 1.88, 1.67, 1.09, 0.48, 0.03, -0.18, -0.1],[1.27, 1.4, 1.58, 1.26, 0.34, -0.21, -0.43, -0.35, -0.39, -0.34, -0.01, 0.36, 0.68, 0.93, 1.36, 1.85, 2.07, 2.01, 1.64, 1.04, 0.2, -0.56, -0.84],[1.88, 1.97, 1.75, 1.11, 0.61, 0.29, -0.06, -0.48, -0.9, -0.85, -0.4, 0.01, 0.27, 0.53, 1.2, 1.66, 1.74, 1.49, 1.11, 0.79, 0.43, 0.03, -0.38],[0.27, 0.34, 0.39, 0.56, 1.01, 1.29, 1.02, 0.25, -0.32, -0.53, -0.62, -0.48, -0.37, 0.02, 0.81, 1.65, 2.13, 1.73, 1.26, 0.75, 0.44, 0.59, 0.51],[-0.46, -0.51, -0.52, -0.33, 0.04, 0.43, 0.57, 0.56, 0.49, 0.21, -0.42, -0.77, -0.83, -0.35, 0.32, 1.42, 2.43, 3.01, 2.98, 1.95, 1.23, 1.21, 1.56],[0.26, 0.17, -0.1, -0.46, -0.7, -0.8, -0.56, 0.09, 0.67, 0.67, 0.39, 0.12, 0.09, 0.42, 0.62, 0.9, 1.39, 2.38, 2.96, 2.94, 2.63, 2.32, 2.63],[0.95, 0.98, 0.85, 0.58, 0.27, 0.01, -0.07, 0.24, 0.6, 0.89, 1.35, 1.62, 1.88, 2.03, 1.72, 1.04, 0.47, 0.48, 1.07, 2.58, 3.57, 3.57, 3.19],[0.41, 0.43, 0.67, 1.04, 1.25, 1.2, 0.97, 0.72, 0.67, 0.93, 1.44, 1.94, 2.24, 2.25, 2.21, 1.98, 1.42, 0.57, 0.63, 1.88, 3.13, 3.66, 2.96],[0.05, -0.07, 0.04, 0.27, 0.42, 0.49, 0.66, 0.79, 0.9, 1.01, 0.89, 0.73, 0.52, 0.52, 1.08, 2.36, 3.19, 2.61, 1.88, 1.55, 2.31, 2.98, 2.81],[1.28, 1.04, 0.78, 0.43, 0.06, -0.02, 0.25, 0.71, 1.12, 1.05, 0.64, 0.31, 0.09, 0.01, 0.55, 1.9, 2.95, 3.04, 1.88, 1.56, 2.41, 3.34, 3.5],[3.14, 2.97, 2.03, 1.23, 0.81, 0.74, 0.65, 0.66, 0.89, 0.81, 0.73, 0.88, 1.22, 1.28, 1.35, 1.65, 2.42, 2.53, 2.07, 2.35, 3.21, 4.01, 2.9],[3.15, 3.14, 1.91, 1.03, 0.92, 1.15, 0.81, 0.53, 0.43, 0.61, 0.95, 1.63, 2.27, 2.45, 2.09, 2.13, 2.72, 3.24, 3.66, 3.61, 3.67, 2.97, 0.92],[2.75, 2.49, 1.43, 0.25, 0.32, 0.53, 0.52, 0.38, 0.46, 0.95, 1.44, 1.92, 2.33, 2.29, 2.1, 2.27, 2.91, 4.1, 4.64, 4.46, 3.7, 2.54, 1.01],[4.16, 3.52, 2.04, 0.95, 0.68, 0.82, 0.83, 0.83, 1.09, 1.44, 1.63, 1.8, 1.91, 1.89, 1.68, 1.53, 2.1, 3.07, 3.91, 4.36, 4.11, 3.61, 3.22]],"us": [[-0.04, 0.13, 0.21, 0.17, 0.08, 0, -0.12, -0.19, -0.21, -0.12, -0.1, -0.33, -0.43, -0.51, -0.58, -0.65, -0.54, -0.34, -0.36, -0.54, -0.52, -0.33, -0.23],[-0.3, -0.41, -0.4, -0.32, -0.1, 0.19, 0.29, 0.09, -0.24, -0.23, -0.24, -0.33, -0.49, -0.61, -0.64, -0.63, -0.55, -0.48, -0.59, -0.72, -0.63, -0.48, -0.36],[-0.1, -0.14, -0.2, -0.2, -0.18, 0.02, 0.38, 0.22, -0.15, -0.37, -0.44, -0.41, -0.43, -0.44, -0.53, -0.61, -0.66, -0.71, -0.81, -0.83, -0.8, -0.74, -0.62],[0.12, 0.41, 0.65, 0.56, 0.12, 0.1, 0.19, 0.19, 0.08, -0.09, -0.28, -0.38, -0.46, -0.53, -0.62, -0.73, -0.84, -0.94, -1, -0.97, -0.99, -0.99, -0.93],[-0.2, 0.16, 0.57, 0.64, 0.54, 0.24, -0.07, -0.16, -0.02, 0.11, 0.02, -0.33, -0.6, -0.76, -0.83, -0.89, -0.99, -1.16, -1.25, -1.21, -1.14, -1.09, -1.07],[-0.32, 0.13, 0.59, 0.93, 0.86, 0.21, -0.35, -0.59, -0.42, -0.1, -0.03, -0.26, -0.49, -0.66, -0.92, -1.12, -1.32, -1.57, -1.75, -1.69, -1.47, -1.3, -1.25],[0.25, 0.86, 1.37, 1.45, 0.67, -0.11, -0.55, -0.6, -0.37, -0.1, -0.08, -0.2, -0.32, -0.54, -1.04, -1.51, -1.93, -2.28, -2.53, -2.51, -2.19, -1.79, -1.58],[0.33, 1, 1.39, 0.82, -0.25, -0.76, -0.64, -0.44, -0.22, -0.11, -0.14, -0.42, -0.64, -0.89, -1.19, -1.63, -2.06, -2.42, -2.74, -2.81, -2.55, -2.08, -1.79],[-0.05, 0.17, 0.41, -0.01, -0.71, -0.81, -0.64, -0.44, -0.42, -0.52, -0.71, -1.01, -1.28, -1.4, -1.46, -1.69, -1.98, -2.29, -2.49, -2.46, -2.18, -1.85, -1.55],[-0.17, -0.04, 0.02, -0.36, -0.82, -0.84, -0.53, -0.59, -0.92, -1.19, -1.31, -1.31, -1.35, -1.32, -1.32, -1.57, -2.13, -2.37, -2.22, -1.77, -1.45, -1.31, -1.11],[-0.04, -0.02, -0.39, -1.11, -1.71, -1.65, -1.3, -1.15, -1.2, -1.28, -1.35, -1.36, -1.25, -0.87, -0.38, -0.5, -1.07, -1.58, -1.71, -1.48, -1.13, -0.8, -0.32],[-0.15, -0.4, -1.03, -1.74, -2.15, -2.18, -1.91, -1.44, -1.17, -1.12, -1.19, -1.19, -1.02, -0.34, 0.36, 0.84, 0.93, 0.39, -0.42, -1.11, -1.22, -0.32, 0.91],[-0.38, -0.58, -0.66, -0.65, -0.62, -0.81, -0.94, -0.87, -0.82, -0.87, -0.89, -0.81, -0.58, -0.06, 0.4, 1.05, 1.61, 1.7, 1.14, -0.06, -0.81, 0.21, 1.51],[-0.21, 0.04, 0.24, 0.4, 0.46, 0.26, -0.04, -0.36, -0.48, -0.49, -0.32, -0.05, 0.16, -0.01, -0.24, 0.16, 1.07, 2.12, 2.14, 1.17, 0.48, 0.57, 1.63],[0.13, 0.74, 0.76, 0.35, -0.28, -0.54, -0.42, -0.39, -0.35, -0.21, 0, 0.11, 0.12, -0.14, -0.27, -0.24, 0.5, 1.46, 1.41, 1.08, 0.91, 1.18, 1.75],[0.44, 1.42, 1.38, 0.46, -0.72, -1.06, -0.86, -0.59, -0.42, -0.2, -0.06, -0.09, -0.14, -0.08, 0.4, 0.81, 0.91, 0.55, 0.07, 0.56, 1.47, 2.26, 2.43],[0.91, 1.89, 1.87, 0.47, -0.67, -0.96, -0.89, -0.87, -0.8, -0.33, 0.27, 0.55, 0.28, 0.31, 0.79, 1.33, 1.33, 0.37, 0.09, 1.08, 2.51, 3.08, 2.07],[1.61, 2.25, 1.1, -0.59, -1.69, -1.4, -1.1, -1.13, -1.02, -0.14, 1.25, 1.59, 1.18, 0.55, 0.4, 0.76, 0.67, 0.38, 0.65, 1.91, 2.77, 2.29, 0.61],[2.23, 2.23, 0.57, -1.79, -2.73, -1.73, -1.01, -0.81, -0.68, 0.67, 1.72, 1.79, 0.93, 0.02, -0.25, -0.21, 0.08, 0.48, 1.28, 1.99, 2.09, 1.53, 0.4],[2.38, 2.48, 0.15, -1.91, -2.27, -1.08, -0.41, -0.29, 0.33, 1.64, 2, 0.97, -0.17, -0.78, -0.82, -0.69, -0.1, 0.75, 1.6, 1.82, 1.8, 1.71, 1.59]]}
}

二，leaflet-velocity 所需要的数据

[{"header": {"parameterUnit": "m.s-1","parameterNumber": 2,"dx": 1.0,"dy": 1.0,"parameterNumberName": "eastward_wind","la1": -7.5,"la2": -28.5,"parameterCategory": 2,"lo2": 156.0,"nx": 14,"ny": 22,"refTime": "2017-02-01 23:00:00","lo1": 143.0},"data": [0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,4.170000076293945,2.9800000190734863,2.5799999237060547,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,5.400000095367432,4.360000133514404,3.859999895095825,3.5799999237060547,3.440000057220459,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,3.3399999141693115,3.9100000858306885,3.9000000953674316,3.890000104904175,3.7799999713897705,6.46999979019165,5.840000152587891,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.20000000298023224,-0.03999999910593033,0.9300000071525574,1.5199999809265137,2.390000104904175,3.930000066757202,4.25,3.069999933242798,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-1.850000023841858,-2.4700000286102295,-2.2899999618530273,-1.309999942779541,0.2800000011920929,1.0299999713897705,0.7400000095367432,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-3.9000000953674316,-3.1500000953674316,-3.569999933242798,-3.5999999046325684,-2.819999933242798,-2.509999990463257,-2.9600000381469727,-3.2200000286102295,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-3.880000114440918,-4.5,-4.960000038146973,-5.090000152587891,-4.949999809265137,-4.679999828338623,-4.789999961853027,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-5.300000190734863,-5.590000152587891,-5.659999847412109,-5.489999771118164,-5.550000190734863,-5.400000095367432,-5.429999828338623,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-5.389999866485596,-5.800000190734863,-6.179999828338623,-6.059999942779541,-5.570000171661377,-5.880000114440918,-6.5,-7.239999771118164,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-6.210000038146973,-6.699999809265137,-6.789999961853027,-7.059999942779541,-7.670000076293945,-7.789999961853027,-8.130000114440918,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-7.420000076293945,-7.489999771118164,-7.239999771118164,-7.889999866485596,-8.079999923706055,-7.909999847412109,-7.559999942779541,-7.360000133514404,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-7.940000057220459,-7.260000228881836,-7.590000152587891,-7.920000076293945,-7.630000114440918,-7.710000038146973,-7.480000019073486,-7.21999979019165,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-6.539999961853027,-7.400000095367432,-7.519999980926514,-7.28000020980835,-7.769999980926514,-7.480000019073486,-7.389999866485596,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-6.760000228881836,-6.659999847412109,-6.889999866485596,-7.559999942779541,-7.389999866485596,-7.639999866485596,-8.069999694824219,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-5.710000038146973,-6.420000076293945,-6.880000114440918,-7.079999923706055,-7.380000114440918,-7.71999979019165,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-5.900000095367432,-6.510000228881836,-6.460000038146973,-6.710000038146973,-6.599999904632568,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-5.260000228881836,-5.71999979019165,-5.829999923706055,-6.059999942779541,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-4.260000228881836,-4.5,-5.360000133514404,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-2.859999895095825,-2.75,-3.869999885559082,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-0.8199999928474426,-1.7699999809265137,-2.25,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.20999999344348907,-1.4199999570846558,-1.25]},{"header": {"parameterUnit": "m.s-1","parameterNumber": 3,"dx": 1.0,"dy": 1.0,"parameterNumberName": "northward_wind","la1": -7.5,"la2": -28.5,"parameterCategory": 2,"lo2": 156.0,"nx": 14,"ny": 22,"refTime": "2017-02-01 23:00:00","lo1": 143.0},"data": [0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-3.880000114440918,-3.759999990463257,-3.5799999237060547,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-1.2599999904632568,-0.25,-1.75,-3.430000066757202,-4.690000057220459,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-0.8799999952316284,-0.7300000190734863,-1.1699999570846558,-2.680000066757202,-4.329999923706055,-3.1700000762939453,-1.059999942779541,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-0.5099999904632568,-0.38999998569488525,-0.550000011920929,-1.2799999713897705,-3.0399999618530273,-2.75,-0.7200000286102295,1.4500000476837158,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.8799999952316284,1.2999999523162842,-0.5299999713897705,-1.9700000286102295,-1.3899999856948853,-0.75,-0.12999999523162842,0.0,0.0,0.0,0.0,0.0,0.0,0.0,1.9700000286102295,2.059999942779541,1.3700000047683716,0.019999999552965164,-0.6700000166893005,-0.47999998927116394,0.4399999976158142,1.340000033378601,0.0,0.0,0.0,0.0,0.0,0.0,0.0,3.880000114440918,2.5299999713897705,1.159999966621399,0.6800000071525574,0.6399999856948853,0.8799999952316284,1.2000000476837158,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,3.190000057220459,1.2899999618530273,1.3799999952316284,1.5700000524520874,1.7999999523162842,2.0199999809265137,2.2100000381469727,0.0,0.0,0.0,0.0,0.0,0.0,0.0,4.329999923706055,2.299999952316284,2.440000057220459,2.3499999046325684,2.259999990463257,1.2599999904632568,1.7799999713897705,1.600000023841858,0.0,0.0,0.0,0.0,0.0,0.0,0.0,2.9200000762939453,2.690000057220459,2.7799999713897705,2.390000104904175,1.5399999618530273,1.4500000476837158,1.9299999475479126,0.0,0.0,0.0,0.0,0.0,0.0,0.0,2.809999942779541,3.359999895095825,3.3499999046325684,2.3399999141693115,1.940000057220459,1.7999999523162842,2.359999895095825,3.2200000286102295,0.0,0.0,0.0,0.0,0.0,0.0,0.0,3.4200000762939453,2.990000009536743,1.3200000524520874,1.1799999475479126,1.7999999523162842,2.609999895095825,3.259999990463257,4.139999866485596,0.0,0.0,0.0,0.0,0.0,0.0,0.0,3.440000057220459,1.6299999952316284,1.4199999570846558,1.2100000381469727,1.7100000381469727,2.6700000762939453,2.2799999713897705,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,1.3600000143051147,1.4500000476837158,1.1799999475479126,1.6299999952316284,1.5299999713897705,1.9800000190734863,2.1500000953674316,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-0.1899999976158142,-0.30000001192092896,0.6800000071525574,0.25,0.3700000047683716,1.0499999523162842,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-1.8600000143051147,-0.9399999976158142,-0.7300000190734863,-0.28999999165534973,-0.5,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-3.4800000190734863,-2.9200000762939453,-2.140000104904175,-1.590000033378601,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-4.510000228881836,-3.809999942779541,-3.059999942779541,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-6.559999942779541,-4.96999979019165,-4.449999809265137,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-7.840000152587891,-6.809999942779541,-5.869999885559082,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,-9.369999885559082,-8.289999961853027,-7.130000114440918]}
]

三，处理函数

function generateLeafletVelocityData (us, vs, startLat, endLat, latdel, startLon, endLon, londel) {const ny = us.lengthconst nx = us[0].lengthconst refTime = "2025-05-08 00:00:00" // 可动态生成// leaflet-velocity 要求纬度从北到南const latOrder = startLat < endLat? [...Array(ny).keys()].reverse()  // 从最大纬度向最小纬度: [...Array(ny).keys()]           // 从南到北function flatten (data) {const flat = []for (let j of latOrder) {for (let i = 0; i < nx; i++) {flat.push(data[j][i])}}return flat}const headerBase = {nx,ny,lo1: startLon,la1: Math.max(startLat, endLat),lo2: endLon,la2: Math.min(startLat, endLat),dx: londel,dy: latdel,refTime,parameterUnit: "m.s-1",}const uField = {header: {...headerBase,parameterCategory: 2,parameterNumber: 2,parameterNumberName: "Eastward wind"},data: flatten(us)}const vField = {header: {...headerBase,parameterCategory: 2,parameterNumber: 3,parameterNumberName: "Northward wind"},data: flatten(vs)}return [uField, vField]}

四，案例使用

// 打开一个GET请求xhr.open("GET", url, true)// 设置请求完成的处理函数xhr.onload = function () {if (xhr.status == 200) {// 请求成功var json = JSON.parse(xhr.responseText).dataconsole.log(json, 'data')let { us, vs, startLat, endlat, latdel, startLon, endLon, londel } = { ...json }const windData = generateLeafletVelocityData(us, vs, startLat, endlat, latdel, startLon, endLon, londel)var velocityLayer = L.velocityLayer({displayValues: true,displayOptions: {velocityType: "GBR Wind",position: "bottomleft",emptyString: "No wind data",showCardinal: true},data: windData,maxVelocity: 10})// 4. 添加到地图上velocityLayer.addTo(map)} else {// 请求失败console.error("请求失败，状态码：" + xhr.status)}}// 发送请求xhr.send()

五，案例效果