百度地圖的繪制功能drawingManager其中矩形和多邊形采用的是同一種繪制原理

因此在面可編輯模式enableEditing下矩形就會(huì)和多邊形一樣產(chǎn)生多個(gè)節(jié)點(diǎn)的可選狀態(tài)

更重要的是，拖動(dòng)角點(diǎn)不會(huì)作為矩形移動(dòng)

---

在網(wǎng)上搜也沒(méi)看到對(duì)應(yīng)的解決，因此自己就把一個(gè)模擬的解決方案分享一下吧，
實(shí)現(xiàn)原理：

1.定位兩斜角點(diǎn);
2.使用marker對(duì)兩點(diǎn)進(jìn)行標(biāo)注;
3.監(jiān)聽(tīng)marker的移動(dòng)狀態(tài);
4.根據(jù)移動(dòng)狀態(tài)使用setPath實(shí)現(xiàn)多邊形的重繪，模擬矩形的可編輯狀態(tài);

主要代碼

//初始化繪制工具欄 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]}}); //監(jiān)聽(tīng)繪制完成 drawingManager.addEventListener("overlaycomplete", (e)=> {/*在此判斷分離出矩形的方法*/if (e.drawingMode=='rectangle') {var myIcon = new BMap.Icon(select, new BMap.Size(13,13));//增加icon，可以截取百度默認(rèn)的選擇框增加相似度e.overlay.ia.map((item,index)=>{if (index==0) {//左上角點(diǎn)this.startPoint=itemlet markerStart = new BMap.Marker(item,{icon:myIcon})markerStart.enableDragging()markerStart.addEventListener('dragging',(target)=>{this.startPoint = target.pointe.overlay.setPath(this._getRectanglePoint(target.point,this.endPoint),this.options);})this.map.addOverlay(markerStart); }else if (index==2) {//右下角點(diǎn)this.endPoint=itemlet markerEnd = new BMap.Marker(item,{icon:myIcon})markerEnd.enableDragging()markerEnd.addEventListener('dragging',(target)=>{this.endPoint=target.pointe.overlay.setPath(this._getRectanglePoint(this.startPoint,target.point),this.options);})this.map.addOverlay(markerEnd); }})}else{//其它圖形打開(kāi)編輯功能 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)];}

效果如下

總結(jié)

以上是生活随笔為你收集整理的百度地图-矩形编辑的模拟实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。