In the past, most of the requirements for migration diagrams and flow diagrams were made using icon component libraries such as echarts. This article shares with you how to use webgis technology to realize thematic maps such as migration maps and flow maps.
First of all, we need to clear up our ideas. The migration diagram shows that there is a flow from one point to multiple points (this flow is represented by lines) or a summary from multiple places to one place. That is, one-to-many or many-to-one, where many and one are city locations, that is, latitude and longitude coordinate points.
The first is how to realize the connection between points, and process it into an arc, the effect will be more beautiful. This requires the use of turf.js, a front-end spatial analysis library.
turf.js provides a function called: greatCircle, which can generate an arc based on a starting point and a destination. Although its arc is not very obvious, because its angle is relatively large, so if the distance is short, it is almost a straight line, in order to optimize this defect. We can cooperate with another function called: bezierSpline, this function is a Bezier curve function, it can make a polyline smoother, we put the result of greatCircle into bezierSpline to make this line more radian.
The second question is how to display the dynamic effects and names of these points, which requires the ability of our maobox itself. We can choose the method of drawing dynamic points on the canvas. For details, please refer to: