echarts+百度地图多边形的增、删、改

基于echarts+百度地图+vue 

一、增（新增多边形）

新增多边形，需要使用到 BMapLib.DrawingManager 类库。

let styleOpt = { // 绘制多边形时的样式设置
  strokeColor: 'black',
  fillColor: '#EE8F00',
  strokeWeight: 1,
  strokeOpacity: 0.5,
  fillOpacity: 0.3,
  strokeStyle: 'dashed',
};

下图为绘制过程中的多边形： 

 

this.drawingManager = new BMapLib.DrawingManager(this.bmap, {
  isOpen: true, // 是否开启绘制模式
  enableDrawingTool: false, // 是否显示工具栏 不显示
  polygonOptions: styleOpt, // 设置绘制多边形时的样式
});

此处设置结束后，地图默认的功能栏会隐藏，如下图是功能栏：

 

【在没有功能栏的时候，需要添加事件来触发绘制新多边形】 

this.drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON); // 设置当前绘制模式为多边形

this.drawingManager.addEventListener('overlaycomplete', overlaycomplete); // 监听绘制完成的事件

 下面是监听绘制完成的事件，可在此处设置绘制结束后的操作：

let _this = this;
let overlaycomplete = function(e) { // 区域绘制完成的方法
  // 回调函数会返回event参数，包括以下返回值： 
  // {"drawingMode : {DrawingType} 当前的绘制模式 
  // "overlay：{Marker||Polyline||Polygon||Circle} 对应的绘制模式返回对应的覆盖物 
  // "calculate：{Number} 需要开启计算模式才会返回这个值，当绘制线的时候返回距离、绘制多边形、圆、矩形时候返回面积，单位为米， 
  // "label：{Label} 计算面积时候出现在Map上的Label对象 
  // e.overlay是绘制完成后的区域

  _this.polygon = e.overlay;
  _this.polygon.enableEditing(); // 设置绘制好的区域可编辑【根据相关业务设置】
  let divs = document.getElementsByClassName("BMap_mask")[0].nextSibling; // 在结合echarts使用的时候 需要将可编辑的层级调的低一些（小于200即可） 否则可编辑时的小正方形不能拖动
  if (divs) {
    let nths = divs.childNodes[3];
    nths['style'].zIndex = 198; // 原本是500
  }
};

如果需要设置除了双击结束绘制新的多边形外，比如点击“完成”按钮，则要加上下面2点：

this.drawingManager.close(); // 关闭绘制的状态

this.drawingManager._mask.disableEdgeMove(); // 关闭地图在绘制状态下惯性移动

二、删（删除多边形）

this.bmap.removeOverlay(this.polygon);

在对地图上的覆盖物进行批量删除的时候，需要先遍历所有的覆盖物，因为不能删除以下的两种覆盖物，删除的话会影响到整体的地图层而报错【即使只使用百度地图的方法，在批量使用removeOverlay()清除覆盖物的时候，下面的覆盖物也不能清除】：

三、改（编辑功能）

设置绘制好的多边形为this.polygon，编辑的时候使用this.polygon.ebableEditing(); 可使多边形处于可编辑状态，如下图：

 在编辑状态下，要将编辑状态的层级设置低于200，否则小正方形不能拖拽（参考新增的设置）；

 在可编辑的时候，如果想删除某个点，设置右键弹框选择框，是否删除该点，如下图：

 

let _this = this;
let vectex = document.getElementsByClassName("BMap_vectex BMap_vectex_node"); // 获取可编辑的实心小正方形的点
let vectexT = document.getElementsByClassName("BMap_vectex"); // 获取可编辑的所有小正方形的点
let vecLen = vectex.length - 1;
if (vectex.length > 0) { // 给重合的点设置不同的z-Index值 如果z-index一致的话 删除时会删除不了选择的点
  for (let j = 0; j < vectexT.length; j++) {
    vectexT[j]['style'].zIndex = -1;
  }
  vectex[0]['style'].zIndex = -7985090;
  vectex[vecLen]['style'].zIndex = -10000000;
}
let squarePlg = polygon;
for (let node = 0; node < vectex.length; node++) { // 遍历可编辑的实心点
  vectex[node]['onmouseup'] = function(e) { // 监听鼠标点击事件
    if (e.button === 2) { // e.button 0：左键 1：中键（滚轮） 2：右键
      if (event) { // 阻止冒泡
        event.stopPropagation();
      }
      _this.isRemoveLine = true;
      for (let index = 0; index < vectex.length; index++) { // 先将vectex[index]内的html清空 为了防止没有点击取消删除时 右键其他的小正方形引起的原来弹框没有清空的情况
        vectex[index].innerHTML = '';
      }
      if (vectex[node]['style'].zIndex !== '') { // 不知道哪里影响到了z-index 点了取消 再右键的时候小正方形会显示在弹框上面 因此先设置一个固定的不会影响弹框的层级
        vectex[node]['style'].zIndex = 0;
      }
      vectex[node].innerHTML = '
' +
        '
是否删除该点？
'+
        '确定' +
        '取消' +
        '
'; // 鼠标右键弹出的弹框
    } else {
      let sureId = document.getElementById('sureDeleteId');
      let cancelId = document.getElementById('cancelDeleteId');
      if (sureId !== null) {
        sureId.onclick = function() {
          if (event) {
            event.stopPropagation();
          }
          window.sureDelete();
        }
      }
      if (cancelId) {
        cancelId.onclick = function() {
          if (event) {
            event.stopPropagation();
          }
          window.cancelDelete();
        }
      }
    }
    window['sureDelete'] = function(e) { // 确定删除
      _this.removeDrawOverlay('noLabel'); // 清除除了label外的覆盖物
      squarePlg.splice(node, 1); // 将选择删除的点从点列表中去掉
      let polygonCvs = _this.drawMapPolygon(squarePlg, 'red'); // 绘制删除了一个点后的多边形
      polygonCvs.enableEditing(); // 设置新的多边形可编辑
    };
    window['cancelDelete'] = function() { // 取消删除
      vectex[node].innerHTML = '';
    };
  };
}

如果需要实时监听可编辑状态下拖拽的情况，则需要对可编辑的多边形设置监听lineupdate事件：

this.polygon.addEventListener('lineupdate', function(e) {}); // 对编辑的多边形监听lineupdate 覆盖物的属性发生变化时触发

 当编辑完成时设置this.polygon.disableEditing(); 并且需要将之前设置的z-index级别设置为原来的：

let divs = document.getElementsByClassName("BMap_mask")[0].nextSibling;
if (divs) {
  let nths = divs.childNodes[3];
  nths['style'].zIndex = 500; // 原本是500
}