百度地圖（41）-GL 地圖工具

 

1. 測量工具

var myDis;

function addDistanceTool(){

  map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);      // 初始化地圖,設置中心點坐標和地圖級別

  myDis = new BMapGLLib.DistanceTool(map);

// 監聽測距過程中的鼠標事件
  myDis.addEventListener('drawend', function(e) {
    console.log("drawend");
    console.log(e.points);
    console.log(e.overlays);
    console.log(e.distance);
  });
  myDis.addEventListener('addPoint',function (e) {
    console.log("addPoint");
    console.log(e.point);
    console.log(e.pixel);
    console.log(e.index);
    console.log(e.distance)
  });

  myDis.addEventListener("removepolyline",function (e) {
    console.log("removepolyline");
    console.log(e);
  });
}


function openMapDis(){
  addDistanceTool();
  myDis.open();
}

function closeMapDis() {
  if (myDis)
    myDis.close();
}

 

2. 繪制工具

function addDrawManager() {
  var styleOptions = {
    strokeColor: '#5E87DB',   // 邊線顏色
    fillColor: '#5E87DB',     // 填充顏色。當參數為空時，圓形沒有填充顏色
    strokeWeight: 2,          // 邊線寬度，以像素為單位
    strokeOpacity: 1,         // 邊線透明度，取值范圍0-1
    fillOpacity: 0.2          // 填充透明度，取值范圍0-1
  };
  var labelOptions = {
    borderRadius: '2px',
    background: '#FFFBCC',
    border: '1px solid #E1E1E1',
    color: '#703A04',
    fontSize: '12px',
    letterSpacing: '0',
    padding: '5px'
  };

  // 實例化鼠標繪制工具
  var drawingManager = new BMapGLLib.DrawingManager(map, {
    // isOpen: true,        // 是否開啟繪制模式
    enableCalculate: false, // 繪制是否進行測距測面
    enableSorption: true,   // 是否開啟邊界吸附功能
    sorptiondistance: 20,   // 邊界吸附距離
    circleOptions: styleOptions,     // 圓的樣式
    polylineOptions: styleOptions,   // 線的樣式
    polygonOptions: styleOptions,    // 多邊形的樣式
    rectangleOptions: styleOptions,  // 矩形的樣式
    labelOptions: labelOptions,      // label樣式
  });

  function draw(e) {
    var arr = document.getElementsByClassName('bmap-btn');
    for(var i = 0; i<arr.length; i++) {
      arr[i].style.backgroundPositionY = '0';
    }
    e.style.backgroundPositionY = '-52px';
    switch(e.id) {
      case 'marker': {
        var drawingType = BMAP_DRAWING_MARKER;
        break;
      }
      case 'polyline': {
        var drawingType = BMAP_DRAWING_POLYLINE;
        break;
      }
      case 'rectangle': {
        var drawingType = BMAP_DRAWING_RECTANGLE;
        break;
      }
      case 'polygon': {
        var drawingType = BMAP_DRAWING_POLYGON;
        break;
      }
      case 'circle': {
        var drawingType = BMAP_DRAWING_CIRCLE;
        break;
      }
    }
    // 進行繪制
    if (drawingManager._isOpen && drawingManager.getDrawingMode() === drawingType) {
      drawingManager.close();
    } else {
      drawingManager.setDrawingMode(drawingType);
      drawingManager.open();
    }
  };
}

 

3. 使用繪制工具制作的測量工具

/**
 * 面積測量
 */
function addAreaMeasure() {
  var styleOptions = {
    strokeColor: '#5E87DB',   // 邊線顏色
    fillColor: '#5E87DB',     // 填充顏色。當參數為空時，圓形沒有填充顏色
    strokeWeight: 2,          // 邊線寬度，以像素為單位
    strokeOpacity: 1,         // 邊線透明度，取值范圍0-1
    fillOpacity: 0.2          // 填充透明度，取值范圍0-1
  };
  var labelOptions = {
    borderRadius: '2px',
    background: '#FFFBCC',
    border: '1px solid #E1E1E1',
    color: '#703A04',
    fontSize: '12px',
    letterSpacing: '0',
    padding: '5px'
  };

// 實例化鼠標繪制工具
  var drawingManager = new BMapGLLib.DrawingManager(map, {
    enableCalculate: true,  // 繪制是否進行測距測面
    enableSorption: true,   // 是否開啟邊界吸附功能
    sorptiondistance: 20,   // 邊界吸附距離
    enableGpc: true,        // 是否開啟延邊裁剪功能
    enableLimit: true,      // 是否開啟超限提示
    limitOptions: {
      area: 50000000,     // 面積超限值
      distance: 30000     // 距離超限值
    },
    circleOptions: styleOptions,     // 圓的樣式
    polylineOptions: styleOptions,   // 線的樣式
    polygonOptions: styleOptions,    // 多邊形的樣式
    rectangleOptions: styleOptions,  // 矩形的樣式
    labelOptions: labelOptions,      // label樣式
  });

  function draw(e) {
    var arr = document.getElementsByClassName('bmap-btn');
    for(var i = 0; i<arr.length; i++) {
      arr[i].style.backgroundPositionY = '0';
    }
    e.style.backgroundPositionY = '-52px';
    switch(e.id) {
      case 'marker': {
        var drawingType = BMAP_DRAWING_MARKER;
        break;
      }
      case 'polyline': {
        var drawingType = BMAP_DRAWING_POLYLINE;
        break;
      }
      case 'rectangle': {
        var drawingType = BMAP_DRAWING_RECTANGLE;
        break;
      }
      case 'polygon': {
        var drawingType = BMAP_DRAWING_POLYGON;
        break;
      }
      case 'circle': {
        var drawingType = BMAP_DRAWING_CIRCLE;
        break;
      }
    }
    // 進行繪制
    if (drawingManager._isOpen && drawingManager.getDrawingMode() === drawingType) {
      drawingManager.close();
    } else {
      drawingManager.setDrawingMode(drawingType);
      drawingManager.open();
    }
  };

// 繪制完成后獲取相關的信息(面積等)
  drawingManager.addEventListener('overlaycomplete', function(e) {
    alert(e.calculate);
  });
}

 

4. 其中 2 和 3 都是使用了  BMapGLLib.DrawingManager 的方式。更多請參考：

https://github.com/huiyan-fe/BMapGLLib

 

5.  頁面顯示：

 

 

6. 源碼地址

https://github.com/WhatGIS/bdMap