文章版權由作者李曉暉和博客園共有，若轉載請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/。
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查詢功能，該功能的合理實現和合理展現均是需要仔細推敲的。歡迎大家持續關注。
-----歡迎轉載，但保留版權，請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/
如果您覺得本文確實幫助了您，可以微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^
