Shulou(Shulou.com)06/01 Report--

Earth NullSchool .

The feature of this website is wind chart. There is a visual wind chart before, which has been mentioned before, and the technical implementation principle of wind chart is introduced in detail. Today, let's give a detailed introduction to this website. Similarly, replying to "worldwind" in the official account will provide the source code Demo of the site.

As above is a dynamic effect of the website, those who are interested can visit the website to get a general idea. The author posted his own source code on github (slightly different from the website code). The weather data come from NCEP. I remember that the AQICN US data introduced last week also came from the website. After checking, the organization should be regarded as the National Weather Service of the United States: National Centers for Environmental Prediction.

Learn from the lessons of the previous article and get to the point. Of course, if you want to understand the principle of the wind chart, you can take a look at the visual wind chart written before, you need to have some understanding of the data and ideas of the wind chart, otherwise this article may have some difficulty in understanding.

As shown above, Mode supports Air (wind chart), Ocean (ocean current), Chem (chemical), Particulates (particulate matter), Height points to different heights, Overlay indicates overlay layers, such as wind chart + temperature, ocean current + wave height, etc., and Control is the timeline control, such as historical data. Click to view different data effects, it is not difficult to find the url specification of the corresponding data.

The meteorological data is in epak format, binary stream, and the data specification is provided in the code. The following is the data specification and the corresponding JSON attributes:

From the converter attribute, the data comes from netcdf, and this format was also mentioned in the previous Berkeley Earth, and the original data is in grib form. As far as I understand it, there should be a grib2netcdf2epak process that provides the corresponding conversion tools. As for why to circle, I searched about and found that one is probably good or bad, but it doesn't seem to be absolute, so I won't talk about it here.

Personally, what takes me the longest time is how to get the data by localhost, because it is a HTTPS service, and it is restricted by Referer, which is definitely a problem for me as a Java rookie, but on the other hand, it is God giving me a chance to learn JavaWeb. Spent a lot of time, but also consulted the research and development of two awesome people, and finally realized a Java version of Proxy under Jetty+Servlet, is the most rewarding place this time, the code is presented, see laugh.

With the local proxy service, simply modify the source code, let it go proxy, and achieve the deployment of localhost, two parameters: url and type.

During the initialization of the map, a global grid is constructed, which is a 2:1 rectangle, and the following is the projected spherical grid effect, which is mainly used to obtain the position of any point on the earth, and then to obtain the corresponding wind speed (XQuery Y). This method provides two ways: proximity interpolation and bilinear interpolation, which is encapsulated in the rectangularGrid function.

Then, we start to request meteorological data, and the parsing process is encapsulated in the decodeEpak function: get the corresponding JSON attributes. The global wind chart is 720cm 360 in size, with an accuracy of 0.5 ℃. Each point has two components, X and Y, vectors in X and Y directions, meters.

Everything is ready except for the east wind. There are two points here, first, panning does not have any effect, this is because when the bounds changes, it needs to be re-interpolated according to the updated region, the amount of calculation is relatively large, and the value of interpolation is guaranteed in accuracy, clear, so this is a trade-off. Second, there is not only a wind map, but also a grid base map, the following blue-green effect picture, look carefully, and the trend of the wind is consistent, at the same time, when the mouse click, you can get the attribute values of the corresponding location.

The interpolation process of the wind field vector is realized in the interpolateField mode, the logic here is as follows: 1: create the mask corresponding to the current window, as pictured above, all areas are black (0memo 0re0), only the color of the corresponding region of the earth is (255,0Power0,1); 2 randomly generate wind particles, each particle has five attributes, position (XY), wind speed (UV) and life cycle (t) 3 similar to a scan line, traversing each pixel in the visual area, judging whether it is within the valid range through the mask, and if the point is valid, obtain its corresponding longitude and latitude; 4 take the global grid as the index, obtain the wind field Field corresponding to this point, save it to the corresponding vector field wind field, and use it for the later wind map effect 5 according to the intensity of the wind field, the color intensity of the current point is set according to the color table, and saved in the mask mask, so that the mask is used to judge whether the area is visible during the update, and after the update, it is used to display the map effect, which can be regarded as two uses of one picture. As above is the core of the initialization, there are a lot of small details, such as the wind direction, on the plane, the two vectors of XY are straight lines, while on the sphere, to adjust to the corresponding longitude and latitude, is the curve (distortion function).

Then, each frame is updated in real time according to the principle of the wind chart: the current position of the wind particles, the position of the next frame is obtained according to the wind speed of the current position, and the animate.draw begins after the data update (createField::field.move). This part is clearly introduced in the principle of the wind diagram, and the train of thought is completely the same. Here, we just correspond to the key points and the corresponding function, and the key is to think. If you wish to debug it yourself, it will be clear at a glance.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.