百度地圖 - 基礎學習(6): 鼠標繪製工具添加、圖形幾何運算(長度、面積等)

地圖鼠標繪製，打算分兩部分學習，主要是牽涉東西太多。今天主要是 鼠標繪製工具添加及配置，以及圖形長度和多邊形面積的計算

1、 鼠標繪製工具

鼠標繪製工具主要採用開源庫 DrawingManager，經過此工具用戶能夠在地圖任意位置上畫點、畫圓、畫折線、畫多邊形、以及畫矩形，並顯示線的距離及面的面積。

一、 鼠標繪製工具添加

<!--在頁面的頭部加載進鼠標繪製工具開源庫的文件-->
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />

二、工具初始化及配置

// 繪製模式樣式配置
styleOptions: {
  strokeColor: "red", // 邊線顏色。
    fillColor: "red", // 填充顏色。當參數爲空時，圓形將沒有填充效果。
    strokeWeight: 3, // 邊線的寬度，以像素爲單位。
    strokeOpacity: 0.8, // 邊線透明度，取值範圍0 - 1。
    fillOpacity: 0.6, // 填充的透明度，取值範圍0 - 1。
    strokeStyle: "solid" // 邊線的樣式，solid或dashed。
},

// 實例化鼠標繪製工具
addDrawingManager() {
  let that = this;
  this.drawingManager = new BMapLib.DrawingManager(that.mapInstance, {
    isOpen: false, // 是否開啓繪製模式
    enableDrawingTool: true, // 是否顯示工具欄，默認不顯示
    drawingToolOptions: {
      anchor: window.BMAP_ANCHOR_TOP_RIGHT, // 工具顯示位置
      offset: new BMap.Size(5, 5), // 偏離值
      drawingModes: [
        window.BMAP_DRAWING_CIRCLE,
        window.BMAP_DRAWING_POLYLINE,
        window.BMAP_DRAWING_POLYGON
      ] // 工具欄上能夠選擇須要顯示的繪製模式，將須要顯示的DrawingType以數組形式傳入。默認是所有
      // BMAP_DRAWING_MARKER：畫點，BMAP_DRAWING_CIRCLE：畫圓，BMAP_DRAWING_POLYLINE：折線，BMAP_DRAWING_POLYGON：多邊形，BMAP_DRAWING_RECTANGLE：矩形
      // 注：工具欄第一項(拖動地圖)不在Modes設置範圍內
    },
    circleOptions: that.styleOptions, // 圓的樣式
    polylineOptions: that.styleOptions, // 折線樣式
    polygonOptions: that.styleOptions, // 多邊形樣式
    rectangleOptions: that.styleOptions // 矩形樣式
    // 注：此處各類繪製模式樣式採用了同一個配置，實際開發中，能夠根據實際須要進行不一樣配置，從而在樣式上區分各類模式
  });
  // this.drawingManager.enableCalculate(); // 打開距離或面積計算
},

三、添加各類繪製監聽事件

// 添加繪製監聽事件
addDrawingManagerEvent() {
  let that = this;
  // 點繪製事件監聽
  this.drawingManager.addEventListener("markercomplete", function(e, overlay) {
    console.log(e);
    console.log(overlay);
  });
  // 圓繪製事件監聽
  this.drawingManager.addEventListener("circlecomplete", function(e, overlay) {
    console.log(e);
    console.log(overlay);
  });
  // 折線繪製事件監聽
  this.drawingManager.addEventListener("polylinecomplete", function(e, overlay) {
    console.log(e);
    console.log(overlay);
  });
  // 多邊形繪製事件監聽
  this.drawingManager.addEventListener("polygoncomplete", function(e, overlay) {
    console.log(e);
    console.log(overlay);
  });
  // 矩形繪製事件監聽
  this.drawingManager.addEventListener("rectanglecomplete", function(e, overlay) {
    console.log(e);
    console.log(overlay);
  });

  // 鼠標繪製事件總監聽(不管哪一種繪製，繪製完成都會調用)
  this.drawingManager.addEventListener("overlaycomplete", function(e) {
    // e.drawingMode; // 當前的繪製模式
    // e.overlay; // 對應的繪製模式返回對應的覆蓋物
    // e.calculate; // 須要開啓計算模式纔會返回這個值，當繪製線的時候返回距離、繪製多邊形、圓、矩形時候返回面積，單位爲米，
    // e.label; // 計算面積時候出如今Map上的Label對象
    let overlayList = null;
    switch (e.drawingMode) {
      case "circle": {
        // 圓(細看，圓其實是一個由41個座標構成的多邊形)
        overlayList = e.overlay.ha;
        break;
      }
      case "polyline": {
        // 折線
        overlayList = e.overlay.ha;   // 折線點座標數組
        break;
      }
      case "polygon": {
        // 多邊形
        overlayList = e.overlay.Ao;  // 多邊形各點座標數組
        break;
      }
    }
  });
},

上述步驟完成後，鼠標繪製工具就能夠使用了。

(添加工具完成，當前只添加了畫圓、折線、多邊形三種模式)、(畫圓)、(多邊形)

2、圖形幾何運算

單純畫出的各類圖形實際上用處不大，真正有用的是在這些圖形上的進一步交互，如：一、斷定某個座標是否在區域內；二、計算兩點之間的距離；三、判斷點(某個地址)是否在折線(行程線路)上 等等。

DrawingManager 自身帶有必定的計算功能(默認關閉)，經過調用 DrawingManager類的 enableCalculate() 方法打開，打開後也能夠調用另外一個方法 disableCalculate() 予以關閉。

this.drawingManager.enableCalculate(); // 打開距離或面積計算

this.drawingManager.disableCalculate(); // 關閉距離或面積計算

以北京景山公園爲例：百度資料顯示是23公頃[即0.23平方公里]，地圖上框出來的面積是：0.26514128平方公里左右，實際上相差不大(仍是比較準)。

(密閉多邊形框圖面積計算值)、(enableCalculate()方法返回的結果單位爲平方米)(折線合成多邊形框圖計算值)、(enableCalculate()方法沒法計算折線合成多邊形的面積，只能計算長度)

雖然 DrawingManager類自身帶有必定計算功能，但計算功能相對而言比較弱勢，從上面例子就能夠看出(折線合成多邊形的面積，都只能另外找方法計算)。因此在此次的圖形計算學習中，關閉了DrawingManager類自帶的計算功能，改用另外一個開源庫 GeoUtils。

 

開源庫 GeoUtils，GeoUtils類提供了若干幾何算法，用來幫助用戶判斷點與矩形、 圓形、多邊形線、多邊形面的關係，並提供計算折線長度和多邊形的面積的公式。 

一、 GeoUtils類的引入

GeoUtils類的引入纔是最坑的，文檔上只說【該類提供的都是靜態方法，勿需實例化便可使用】，並且是掛載在 BMapLib 上使用的，給人一種 GeoUtils類 和 DrawingManager類同樣，都是BMapLib的子類，直接調用就行，可是當你正調用的時候就報各類 undefined。

，

緣由是 GeoUtils類雖然是掛載在 BMapLib 使用的，但 GeoUtils倒是一個獨立庫，須要單獨引用。

<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>

二、 GeoUtils類 方法的使用

BMapLib.GeoUtils.getPolygonArea(overlayList)    
// 多邊形(不規則密閉多邊形、矩形)計算面積，該方法只能計算閉合的多邊形，自相交多邊形沒法計算。具體使用可翻閱文檔：http://api.map.baidu.com/library/GeoUtils/1.2/docs/symbols/BMapLib.GeoUtils.html

// 密閉多邊形面積計算
overlayList = e.overlay.Ao; // 多邊形各點座標數組
geoUtilsValue = BMapLib.GeoUtils.getPolygonArea(overlayList) / 1000000 + "平方公里"; // 多邊形計算面積(除以1000000，將平方米換算成平方公里)
alert(geoUtilsValue);

(密閉多邊形面積計算)