17. A brief introduction to the principle and implementation of distance and area measurement in WebGIS and coordinate conversion¶
17.1. Background¶
In this chapter, we will discuss two other common tools in the basic toolbar: the Distance Measurement Tool Box Area Measurement Tool.
Distance measurement tools require the following functions:
a.With a mouse click, each click point is connected to a segment on the map
b.The actual distance represented by each segment indicates the actual distance represented by this segment
c.Double-click the mouse to stop this round measurement, indicating the total length of all segments
d.Allow the mouse to drag the map
The demand for area measurement tools is approximately the same as that of measurement tools and is described below:
a.With a mouse click, connect the click points to the surface on the map
b.Double-click the mouse to stop this round of measurement, indicating the total area of the appearance
c.Allow the mouse to drag the map
17.2. From the principle¶
In the completion of the above requirements, we first have to understand the core principles involved in this function, in fact, we in primary geometry of the distance formula and area formula.
Here I give a model diagram:
.. figure:: img/img_1.png
17.3. Distance conversion formula¶
L(AB)= Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
17.4. Polygon area conversion formula¶
First I’ll give the formula directly:
S（total）=Math.abs(0.5*(x1*y2-y1*x2+x2*y3-y2*x3+….+xn*y1-yn*x1)));
How on earth did this formula come about? I’ll talk to you here in a rough way.
17.4.1. Represent the triangle area with coordinate points¶
We all know the most common area formula in triangles.：S=1/2*a*h。
Another formula, Helen formula, was also mentioned in my previous article (stored procedures to determine the two-line coincident point):
S=Math.sqt((p*(p-a)*(p-b)*(p-c)))，其中p=1/2*(a+b+c)。
Here we continue to derive Helen’s formula, which we already knowA(x1,y1),B(x2,y2),C(x3,y3)。Then：
a=Math.sqt((x2-x3)*(x2-x3)+(y2-y3)*(y2-y3))，b and c are the same。
Substituting a, b, c, p, represented by coordinate points, into the Helen formula, we can derive another equivalent formula of the area in the coordinate system.：
S= Math.abs(0.5*(x1*y2-y1*x2+x2*y3-y2*x3+x3*y1-y3*x1));
17.4.2. Deriving the polygon area from the area of the triangle¶
As in the model, we set a P (x0,y0) point inside the polygon, and by connecting the endpoints in the polygon through the P-point, we can split the polygon into (n-2) triangles.
The area of the polygon becomes:
S(total)=S(PAB)+S(PBC)+S(PCD)+…+S(PNA);
Replace the area coordinate formula of a triangle, and finally you can work out a generic formula that cancels out the P-point coordinates:
S（total）=Math.abs(0.5*(x1*y2-y1*x2+x2*y3-y2*x3+….+xn*y1-yn*x1)));
17.4.3. Note¶
By deriving the formula, we can see that the formula is not valid for the area of the ring polygon.
17.5. Implementation process¶
17.6. Specific steps¶
The distance measurement and area measurement are implemented in much the same way.
a.Initialize three parameters，isDone is true，flag is false，isClick is false。
b.When mousedown, you first determine whether the done is true and, if so, clear the drawings that are already on the map. Record the startPoint at this time, and given three parameters, isDone is false, flag is true, isClick is true.
c.When mousemove, determine if the flag is true at this point. If true, the pan ningfunction is triggered. If it is false, first determine isdone true, if so, first empty all the previous points redraw, then determine is click true, and if so, draw the segment in real time with the mouse.
d.When the mouse mouseupUp, record the endpoint at this time, you can calculate the length of the segment at this time by startpoint and endpoint. Turn flag false to stop panning.
e.When the mouse doubleClick, change the isDone parameter to true, the flag change sly to false, and the isClick to false. Calculate the total distance or total area of the entire process.
17.7. Attention problems¶
Because this feature adds map translation, it is easy to draw point offsets when drawing in real time.
Regarding the trigger of the offset, I explained in more detail in the previous two chapters, and also provided a solution, if you do not understand, you can look back.
In the specific step, I mentioned that there is an empty redrawing process in the mouseMove event to prevent the impact of the map movement. Also, be sure to subtract the total offset when each point is drawn.
17.8. Effect display¶
Here are two effect maps of distance measurement and area measurement:
.. figure:: img/img_4.png
17.9. Further exploration¶
The above, we give the formula, are for the plane coordinates, that is, the coordinates of the projection conversion. If the coordinates we get are latitude and longitude coordinates, can this formula be used?
The answer is no. So we have to make our own projection conversion, the latitude and longitude coordinates into flat coordinates. This kind of conversion formula involves the principle is more complex, the implementation of the code is relatively difficult.
Currently, I have been exposed to conversions such as WGS84, BeJing54, XiAn80 and some places of their own geographic coordinate systems, which also involve four parameters and seven parameter methods. The specific process, in the later chapters of this series, I will discuss it in detail.
However, in cases where the accuracy requirement is not high, we can use the Mecator (UTM) projection to convert uniformly, and use the four-parameter method to fix the four parameters.
17.10. Summary¶
In this chapter, we leave a huge problem, the coordinate conversion problem. The problem is a big learning question, but we can generally understand and use algorithms in this area. In the next section, I’ll join you in discussing the other two remaining features in the basic features, the emptying function and the map location feature. In the next chapter, we will discuss together the basic function involved in the more difficult function, I query function, the reasonable implementation of this function and reasonable display are required to carefully study. Welcome to the continued attention.