开发项目时用到了鼠标绘制工具,绘制多边形时,鼠标离开地图后,地图会自动平移。用close方法也停止不了。
看下源码中这样的代码:
/**
* 开启鼠标到地图边缘,自动平移地图
*/
Mask.prototype.enableEdgeMove = function() {
this._enableEdgeMove = true;
}
/**
* 关闭鼠标到地图边缘,自动平移地图
*/
Mask.prototype.disableEdgeMove = function() {
clearInterval(this._edgeMoveTimer);
this._enableEdgeMove = false;
}
发现在绘制开始时会调用mask.enableEdgeMove (); 结束时会调用mask.disableEdgeMove();还有其他地方调用。总之就是这里的原因啦!我是这样改的:
/**
* 鼠标移动过程的事件
*/
var mousemoveAction = function(e) {
//自定义---如果超出范围,禁止地图自动平移
if(me._outRange){
mask.disableEdgeMove();
return;
}
overlay.setPositionAt(drawPoint.length - 1, e.point);
}
outRange是我自定义的,标志鼠标是否超出绘制范围。如果超出范围,就禁止地图自动平移。这样就可以解决我的问题了。时间有限,就先这么着了。
VUE页面相关代码:
mounted(){
var _this=this;
_this.drawingManager = new BMapLib.DrawingManager(_this.map, {
isOpen: true, //是否开启绘制模式
enableDrawingTool: false, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏离值
drawingModes: [
BMAP_DRAWING_POLYGON
]
},
polygonOptions: _this.styleOptions, //多边形的样式
outRange:false,
hasLabel:false
});
_this.drawingManager.enableCalculate();
_this.drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON);
},
methods:{
//添加多边形层并显示,如果添加了或修改了某网格,则所有子网格重新画一遍
drawPolygon(){
var child="";
for(var c=0;c<this.parentArea.children.length;c++){
child=this.parentArea.children[c];
var ply = new BMap.Polygon(child.points, { strokeWeight: 1, strokeColor: child.gridcolor, fillOpacity: 0.2, fillColor: child.gridcolor }); //建立多边形覆盖物
ply.id=child.Id;
ply.addEventListener("mouseover", this.mouseover);
ply.addEventListener("mouseout", this.mouseout);
if(this.id==child.Id){
this.companyMap.acreage=child.acreage;
this.companyMap.points= child.points;
ply.setFillColor(child.gridColor);
this.drawingManager.close();
this.drawPly=ply;
}
this.map.addOverlay(ply);
this.childPlyArr.push(ply);
}
},
//子网格鼠标移入事件,如果正在绘制,并且绘制模式为选中状态
mouseover(evt) {
if(this.drawingManager._isOpen && this.drawingManager.getDrawingMode()!='marker'){
if(!this.drawingManager._outRange){
this.drawingManager.outRangeAction();
}
}
},
mouseout(evt) {
if(this.drawingManager._isOpen && this.drawingManager.getDrawingMode()!='marker'){
if(this.drawingManager._outRange){
this.drawingManager.inRangeAction();
}
}
},
//绘制完成
overlaycomplete(e){
if(e.calculate==null){
alert("面积为0,请重绘");
this.map.removeOverlay(e.overlay);
return;
}
//如果结果的点不在区域内,则删除并出范提示超围
var pointsArr=e.overlay.getPath();//保存在数组库
var inrange=true;
for(var i=0;i<pointsArr.length;i++){
//判断点是否在父网格范围内,不在则超出范围
for(var j=0;j<this.parentPly.length;j++){
inrange=BMapLib.GeoUtils.isPointInPolygon(pointsArr[i], this.parentPly[j]);
if(inrange)break;
}
}
if(!inrange){
alert("超出范围");
this.map.removeOverlay(e.overlay);
return;
}
this.drawPly=e.overlay;
var resultPoints="";
for(var i=0;i<pointsArr.length;i++){
var end=(i==pointsArr.length-1)?"":";";
resultPoints+=pointsArr[i].lng+","+pointsArr[i].lat+end;
}
this.companyMap.points=resultPoints;
this.companyMap.acreage=e.calculate;//面积
}
}