onaci / leaflet-velocity

Visualise velocity data on a leaflet layer
https://onaci.github.io/leaflet-velocity/
Other
594 stars 213 forks source link

EPSG 4326 projection support? #15

Open Begio opened 7 years ago

Begio commented 7 years ago

Hello,

I am interested in using your plugin in order to represent data of automatic weather stations interpolating them on a grid. I have achieved good outcomes with Leaflet without further problems. However, upon trying to use a different map projection from the one that Leaflet uses by default (Web Mercator EPSG3857), I do not manage to obtain any results, I only got wrong vertical lines. I would like to know if you could help me editing your script so that I can use it with EPSG 4326 projection.

Find attached two images:

Web Mercator EPSG3857 https://imgur.com/MqbwGsR https://imgur.com/B86uBQb EPSG 4326 projection https://imgur.com/NmRXUTI

Nevertheless, I've partly managed to solve the problem by modifying the H parameter in the function "distortion" from windy.js.

var H = Math.pow(10, -5.2) ; with a value around 3, particles appear in movement.

https://imgur.com/TKD0dw8

The problem is that the canvas image created does not adjust to the interpolated values in windy.js, that is to say, the grid of values adjusts perfectly to (latitude, longitude, value) but the canvas image is put above these latlon values (literally the problem lies on the latitude (height), not the longitude (width)), although the movement of the particles and their intensity are correct. It's like if the image wasn't correctly fit in the map in the 4326 projection and keeps the Web Mercator.

Do you have any idea about what could be happening regarding to the generated canvas bounds? Maybe the distortion function is not correct in another projection apart from Web Mercator? Where and how could I change the mercator projection to 4326? I guess it lies in the invert (x, y, windy) function.

I've also seen that the function includes a variable called "projection" which is defined in the 274 line and I don't know where could it be used nor the function it has.

I look forward to your response.

Many thanks in advance.

Kind regards,

danwild commented 7 years ago

Hi @Begio, I haven't really looked into support for EPSG:4326 yet.

Nor do I have any suitable 4326 data on hand for testing, perhaps you could put up an example with some data?

Also - cambecc wrote the core animation functionality, so probably worth raising with him?

Begio commented 6 years ago

Hi @danwild! Thanks for your answer. I discovered modifying "lat" variable where "invert(x, y, windy)" is defined to, it do the trick: lat = rad2deg(windy.north) + y / windy.height * rad2deg(mapLatDelta); with var mapLatDelta = windy.south - windy.north;

You can visualize the results fine until zoom 6 with Web Mercator projection. At zoom 5 image canvas just don't adjust to map. However, with EPSG4326 looks good at all zoom levels and this is what I want, to get native projection from satellite and another meteorology products.

And I was close to forget it, variable "H" should be modified too:

before // var H = Math.pow(10, -5.2); After // var H = 5;

I attach a zip file with your main demo but modified to be able to use in your computer. If you have any quastion, please don't hesitate to ask me. Thanks for your awesome plugin. demo-danwild.zip

PacoDu commented 6 years ago

Thanks Begio for sharing :) I have the same use case for EPSG4326 projection and your fix worked. It would be nice if leaflet-velocity could manage multiple projection (maybe with proj4).

Anyway thanks for leaflet-velocity and for EPSG4326 patch ;).

qbcbyb commented 5 years ago

@Begio Thanks! You resolved my problem.