文章版权由作者李晓晖和博客园共有，若转载请于明显处标明出处：。

1.背景

在这一章里我们将讨论基础工具栏中另外两个常用工具：距离测量工具盒面积测量工具。

距离测量工具要求实现如下功能：

a.通过鼠标点击，在地图上将每个点击点连成线段进行表示

b.每个线段处表示出此线段代表的实际距离

c.双击鼠标，停止此轮测量，表示出所有线段总长度

d.允许鼠标拖动地图

面积测量工具的需求与测量工具的需求大致相同，描述为下：

a.通过鼠标点击，在地图上将点击点连成面

b.双击鼠标，停止此轮测量，表示出面的总面积

c.允许鼠标拖动地图

2.从原理谈起

在完成上述需求时，我们首先得了解此功能涉及到的核心原理，其实就是我们在初等几何中学过的距离公式和面积公式。

这里我先给出一个模型示意图：

                       

2.1距离换算公式

L(AB)= Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));

2.2多边形面积换算公式

首先我直接给出公式:

S（total）=Math.abs(0.5*(x1*y2-y1*x2+x2*y3-y2*x3+….+xn*y1-yn*x1)));

这个公式到底是怎么推导出来的呢？我这里跟大家大致说下。

2.2.1 用坐标点表示三角形面积

 

我们都知道三角形中最通用的面积公式：S=1/2*a*h。

在我之前的文章（存储过程判断两线重合点）里还提到过另外一个公式，海伦公式：

S=Math.sqt((p*(p-a)*(p-b)*(p-c)))，其中p=1/2*(a+b+c)。

这里我们继续推导海伦公式，我们已经知道A(x1,y1),B(x2,y2),C(x3,y3)。则：

a=Math.sqt((x2-x3)*(x2-x3)+(y2-y3)*(y2-y3))，b和c同理。

将用坐标点表示的a,b,c,p代入海伦公式，我们可以得出面积在坐标系下的另外一个等同公式：

S= Math.abs(0.5*(x1*y2-y1*x2+x2*y3-y2*x3+x3*y1-y3*x1));

2.2.2 由三角形面积推导出多边形面积

如模型中，我们在多边形内部设定一个P(x0,y0)点，通过P点连接多边形中各端点，便可将多边形分割成(n-2)个三角形。

则多边形的面积变成了：

S(total)=S(PAB)+S(PBC)+S(PCD)+…+S(PNA);

将三角形的面积坐标公式代入，最后可以算出一个抵消掉了P点坐标的通用公式：

S（total）=Math.abs(0.5*(x1*y2-y1*x2+x2*y3-y2*x3+….+xn*y1-yn*x1)));

2.2.3注意

通过推导公式，我们可以看出，该公式对环状多边形的面积无效。

3.实现过程

3.1 具体步骤

距离量测和面积量测的实现方式上大致是一样的。

a.初始化三个参数，isDone为true，flag为false，isClick为false。

b.鼠标mouseDown时，首先判断done是否为true，如果是，则清掉地图上已有的绘制。记录此时的startPoint，并且给定三个参数，isDone为false，flag为true，isClick为true。

c.鼠标mouseMove时，判断此时flag是否为true。如果是true，则触发平移功能。如果是false，首先判断isDone是否为true，如果是，先对之前所有的点进行清空重绘，再判断isClick是否为true，如果是，则随着鼠标移动实时绘制线段。

d.鼠标mouseUp时，记录此时的endpoint，可以通过startpoint和endpoint算出此时的线段长度。将flag变为false，即停止平移功能。

e.鼠标doubleClick时，将isDone参数改为true,flag改为false,isClick改为false。算出整个过程中的总距离或者总面积。

3.2 注意问题

 因为此功能添加入了地图平移功能，所以在实时绘制时，如果不注意很容易出现绘制点偏移问题。

 关于该偏移的引发，我在前面两章做了比较详细的解释，也提供了解决方法，大家如果不是很明白，可以回头看看。

 在具体步骤中，我提到mouseMove事件中有个清空重绘过程，便是为了防止地图移动所照成的影响。同时，在每一个点的绘制时，一定要减去总偏移量。

3.3效果展示

这里分别给出距离量测和面积量测的两个效果图：

 

4.进一步探讨

以上，我们给出的公式，均是针对平面坐标的，即做过投影转换的坐标。假如，我们得到的坐标是经纬度坐标，此公式还能用么？

答案是不能。所以我们得自己做投影转换，将经纬度坐标转成平面坐标。这类转换公式，涉及的原理比较复杂，代码的实现也相对困难。

目前，我接触过的转换有WGS84的，BeJing54的，XiAn80的以及一些地方自己的地理坐标系，这其中还涉及到四参数和七参数方法。具体的过程，在这个系列的以后章节我再跟大家详细讨论。

不过，在精度要求不高的情况里，我们可以统一用Mecator(UTM)投影进行转换，并且使用四参数方法，将四参数固定即可。

5.总结

这一章里，我们留了一个巨大的问题，即坐标转换问题。该问题是一个很大的学问，不过我们能够一般性理解并且使用这方面的算法即可。在下一个章节里，我将跟大家一起探讨基本功能中剩下的另外两个功能，清空功能和地图定位功能。在下下章，我们将一起探讨基本功能中所涉及到的比较难的一个功能，I查询功能，该功能的合理实现和合理展现均是需要仔细推敲的。欢迎大家持续关注。

 

                                                               -----欢迎转载，但保留版权，请于明显处标明出处：

                                                                           如果您觉得本文确实帮助了您，可以微信扫一扫，进行小额的打赏和鼓励，谢谢 ^_^