GIS front-end programming-route dynamic simulation

Route dynamic simulation

The leaflet-echarts3 plug-in is written based on Leaflet and combined with the powerful open source chart library ECharts (the plug-in download address is https://github.com/wandergis/leaflet-echarts3). This plug-in can realize cool route simulation. Function. Organize the cities that the route passes through in JSON data format, and then display the data through the setOption() method provided by ECharts. This example is written based on the leaflet-echarts3 plug-in, which provides a variety of base maps and 3 routes for users to dynamically switch. The route simulation from Beijing to other places is as shown in the figure.

The main implementation steps are as follows.
(1) Create an L.Map object and load the map basemap through the layer group control for users to switch between map basemaps.
(2) Set the data source and create JSON type route coordinate data and style parameters in the option.
(3) Call the setOption() method in ECharts to display route data.
code show as below:

Migration trajectory simulation

Leaflet.MovingMarKer.js is one of the commonly used migration trajectory simulation plug-ins for Leaflet. Based on this plug-in, a variety of migration trajectory simulation effects can be achieved (the plug-in download address is https://github.com/ewoken/Leaflet.MovingMarker). For example, the label moves along a line at a constant speed, the label moves around a circle in a circular motion, the label moves back and forth, etc. This example is written based on the Leaflet.MovingMarKer.js plug-in. When the mark is clicked, the movement along the line starts, and when the mark is clicked again, the movement is paused. The main implementation steps are as follows.
(1) Load the initialization function through the onload event in and create a div as the map container.
(2) In the initialization function, create a Map object and set parameters such as the display center and the current display level.
(3) Load a sky map through L.TileLayer for display.
(4) Create a MovingMarker object, listen to the mark click event, and start/pause the trajectory simulation in this event.
code show as below:

Flow simulation

Water flow simulation, that is, a line starts from the starting point and grows longer over time until it reaches the end point. It is not difficult to see that the core of realizing this function is how to make the drawn line gradually grow longer over time. Leaflet provides the setLatLngs() method for users to modify the line coordinates. Combined with the JavaScript timer, the line coordinates are continuously modified to achieve the effect of dynamically lengthening the line.
The leaflet.Polyline.SnakeAnim plug-in is written based on this idea. Through this plug-in, the water flow simulation function can be easily realized (the plug-in download address is https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim). First, create an L.Polyline object and use the snakingSpeed ​​parameter extended by the leaflet.Polyline.SnakeAnim plug-in to set the flow rate; secondly, add a Marker annotation to the starting point and end point of the line to identify the location of the starting point and end point; finally, call leaflet.Polyline The snakeIn() method provided by the .SnakeAnim plug-in turns on the water flow simulation state. The flow simulation process is shown in Figure 5-7. The completed flow simulation process is as

follows. The main implementation steps are as follows.
(1) Load the initialization function through the onload event in and create a div as the map container.
(2) In the initialization function, create a Map object and set parameters such as the display center and the current display level.
(3) Load a sky map through L.TileLayer for display.
(4) Create an L.Polyline object and set the line coordinates and water velocity.
(5) Add an L.Marker mark to the starting point and end point of the line.
(6) Open the water flow model through the snakeIn() method provided by the leaflet.Polyline.SnakeAnim plug-in.
The code is as follows


Map drawing, annotation and animation special effects are based on Leaflet and JavaScript scripting language, realizing many basic functions such as graphic drawing, map annotation, animation special effects and so on. These functions have a wide range of applications in WebGIS, and combined with business data, they can present a rich WebGIS application.