百度地图-矩形编辑的模拟实现

矫情吗；* 2022-03-07 08:36 1080阅读 0赞

百度地图的绘制功能drawingManager其中矩形和多边形采用的是同一种绘制原理  
![矩形和多边形构造函数是一致的][3675301616-5c6cac3b6aace_articlex]  
因此在面可编辑模式enableEditing下矩形就会和多边形一样产生多个节点的可选状态  
![矩形的编辑状态][3048475836-5c6a7422cae2b_articlex]  
更重要的是，拖动角点不会作为矩形移动  
![矩形的拖动状态][122240324-5c6a745e243ca_articlex]

--------------------

在网上搜也没看到对应的解决，因此自己就把一个模拟的解决方案分享一下吧，  
实现原理：

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)
                ];
            }

效果如下

![动态效果图][3883354082-5c6a74a0b783a_articlex]

[3675301616-5c6cac3b6aace_articlex]: /images/20220307/d23393856d4a4772a1a599101ecbe5d3.png
[3048475836-5c6a7422cae2b_articlex]: /images/20220307/afae6246473f465aa75ec0f30e0627ca.png
[122240324-5c6a745e243ca_articlex]: /images/20220307/ea11e3e8230141f7b52529eade42a062.png
[3883354082-5c6a74a0b783a_articlex]: /images/20220307/ead484f4859c45819e17fe347143cbde.png