百度地图的绘制功能drawingManager其中矩形和多边形采用的是同一种绘制原理
因此在面可编辑模式enableEditing下矩形就会和多边形一样产生多个节点的可选状态
更重要的是，拖动角点不会作为矩形移动
在网上搜也没看到对应的解决，因此自己就把一个模拟的解决方案分享一下吧，
实现原理：1.定位两斜角点;
2.使用marker对两点进行标注;3.监听marker的移动状态;4.根据移动状态使用setPath实现多边形的重绘，模拟矩形的可编辑状态;主要代码
//初始化绘制工具栏const drawingManager = new BMapLib.DrawingManager(this.map, { isOpen: false, enableDrawingTool: true, enableCalculate: false, drawingToolOptions: { anchor: BMAP_ANCHOR_TOP_LEFT, drawingModes : [ BMAP_DRAWING_CIRCLE, BMAP_DRAWING_RECTANGLE, BMAP_DRAWING_POLYGON ] } });//监听绘制完成drawingManager.addEventListener("overlaycomplete", (e)=> { /* 在此判断分离出矩形的方法 */ if (e.drawingMode=='rectangle') { var myIcon = new BMap.Icon(select, new BMap.Size(13,13));//增加icon，可以截取百度默认的选择框增加相似度 e.overlay.ia.map((item,index)=>{ if (index==0) {//左上角点 this.startPoint=item let markerStart = new BMap.Marker(item,{icon:myIcon}) markerStart.enableDragging() markerStart.addEventListener('dragging',(target)=>{ this.startPoint = target.point e.overlay.setPath(this._getRectanglePoint(target.point,this.endPoint),this.options); }) this.map.addOverlay(markerStart); }else if (index==2) {//右下角点 this.endPoint=item let markerEnd = new BMap.Marker(item,{icon:myIcon}) markerEnd.enableDragging() markerEnd.addEventListener('dragging',(target)=>{ this.endPoint=target.point e.overlay.setPath(this._getRectanglePoint(this.startPoint,target.point),this.options); }) this.map.addOverlay(markerEnd); } }) }else{ //其它图形打开编辑功能 e.overlay.enableEditing(); } });_getRectanglePoint(startPoint,endPoint){ return [ new BMap.Point(startPoint.lng,startPoint.lat), new BMap.Point(endPoint.lng,startPoint.lat), new BMap.Point(endPoint.lng,endPoint.lat), new BMap.Point(startPoint.lng,endPoint.lat) ]; } 效果如下
