百度地圖-矩形編輯的模擬實現

百度地圖的繪製功能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)
            ];
        }

效果以下