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

本文轉載自查看原文 2021-01-06 17:50 364 百度地圖/ Vue全家桶

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

一、鼠標繪制工具 DrawingManager

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

1、鼠標繪制工具添加

<!--在頁面的頭部加載進鼠標繪制工具開源庫的文件-->
<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" />

2、工具初始化及配置

// 繪制模式樣式配置
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(); // 打開距離或面積計算
},

3、添加各種繪制監聽事件

// 添加繪制監聽事件
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, geoUtilsValue = 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;
      }
      case "rectangle": {
        // 矩形
        overlayList = e.overlay.Ao; // 矩形各點坐標數組
        break;
      }
    }
  });
},

上述步驟完成后，鼠標繪制工具就可以使用了。

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

二、圖形幾何運算 GeoUtils

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

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

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

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

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

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

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

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

1、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>

2、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);

這次以北京歡樂水魔方水上公園為例：百度資料顯示是500畝[即0.3333333 平方千米]，地圖上框出來的區域計算是：0.33334941175584426平方千米，兩者相當接近，精度非常高了。

(密閉多邊形面積計算)、(BMapLib.GeoUtils.getPolygonArea() 方法計算面積值)