转载:百度API测距到测面的完美逆袭

最近在做的项目中需要根据百度地图的API封装百度地图,就在快要发布版本的时候遇到一个相当棘手的问题,即百度地图API提供的绘制多边形的接口不兼容IE9,使得封装后的测面功能无法在IE9中正常使用,而项目的主推浏览器就是IE9,与项目经理沟通后,项目经理说暂时不予处理,因为属于API的问题,当时我表示可以试一试更改百度API的源代码,经过苦思冥想我如愿找到了解决办法,使得在IE9下完美的完成了测面功能!思路很简单,代码也不麻烦。拿来和大家分享下!

主要思想:

完成这个功能的前提是你对百度地图的API很熟悉,尤其是测距功能。此功能我主要是在测距将结束时双击地图触发的操作(distDblclick)中完成的。

1、 利用鼠标测距的时候会把所有在地图上点击的点都记录下来,将这些点存下来到一个数组points中;

首先你要创建一个数组:var points = [];//存储折线经过的所有点数据

然后将绘制折线所经过的点存储下来(这个过程在测距过程中,点击地图时,触发的操作distClick中完成):points = me._points;//放所有折线点

2、 利用这些点的数组points创建一个百度的polygon对象。

Var newPolygon =

new BMap.Polygon(points,{strokeColor:"blue",strokeWeight:1.5,strokeOpacity:0.8});

在new 百度polygon的时候的参数可以是多边形对象也可以是构成该多边形的点数组。

recPolygon = newPolygon ;这一步主要是在清除测面时用到,这之前得设置一个对象 recPolygon 保存新建的多边形:var recPolygon = null;

3、 然后把创建的多边形添加到地图上,并调用GeoUtils计算多边形的面积。

me._map.addOverlay(newPolygon);

var resultArea = BMapLib.GeoUtils.getPolygonArea(newPolygon);//计算多边形的面积(单位米)

4、 给newPolygon绑定一些事件。

//当鼠标进入多边形区域时会触发

newPolygon.addEventListener("mouseover",function(){

           newPolygon.setStrokeColor("red");

         me._map.addOverlay(polygonLabel);//显示面积

});

//给多边形添加鼠标"移动"事件

newPolygon.addEventListener("mousemove",function(event){

         polygonLabel.setPosition(event.point);

});

//鼠标离开多边形时触发此事件

newPolygon.addEventListener("mouseout",function(){

            newPolygon.setStrokeColor("blue");

         me._map.removeOverlay(polygonLabel);

});

//点击多边形后会触发此事件

newPolygon.addEventListener("click",function(){

           me._map.zoomIn();

           newPolygon.setStrokeColor("red");

});

5、 创建跟随鼠标的多边形标签,显示多边形的面积。

//创建多边形标签

var polygonLabel = new BMap.Label("<b>此多边形面积(㎡):</b>"+resultArea,{offset: new BMap.Size(10,-10)});

polygonLabel.setStyle({"z-index":"1000000","padding":"10px","width":"","border":"1px solid #ccff00"});

6、 初始化points数组,以备下一次画多边形用。

points = [];

 

开启方法仍然和测距的是一样的,

var ltControls = new BMapLib. DistanceTool (this.map,{//实例化鼠标绘制工具
isOpen: false, //是否开启绘制模式
enableCalculate:true,//开启测面模式
polygonOptions: defaultOptions.PolygonStyle //多边形的样式

});

currentControl.open();

 

var defaultOptions={


PolygonStyle:{
strokeColor:"red", //边线颜色
fillColor:"#FAFFF0", //填充颜色,当参数为空时,圆形将没有填充效果
strokeWeight:1, //边线的宽度,以像素为单位
strokeOpacity:1, //边线透明度,取值范围0 - 1
fillOpacity:0.6, //填充的透明度,取值范围0 - 1
strokeStyle:'solid' //边线的样式,solid或dashed
}

}

7、想要清除改多边形,调用map的removeOverlay(recPolygon)方法,里面的参数是多边形对象即可。这一步主要是在点击测距完成后左上方的关闭按钮(点击关闭按钮,绑定关闭按钮事件)中完成。到这里,功能已经实现了。当然,还有其他的实现方法,有兴趣的可以摸索!效果如下图所示:

    

这里要注意下:就是在清除绘制的多边形时,原来测距只是清除了点和线数据,而我们现在是根据点又创建了一个Polygon对象,所以在清除的时候,必须要再对Polygon对象进行清除一次,同时,要明确这个recPolygon只是作为了保存每次新创建的Polygon对象,为了不出现绘制多个多边形时,删除出现不一致的bug,这里需要

在“处理最后一次操作,当用户双击或测距被强行退出时调用”的方法_processLastOp中将每次创建的Polygon对象保存在定义的disObj对象中(该对象保存本次测面对象),具体为:disObj.recPolygon = recPolygon;即可。所以在调用map的removeOverlay(recPolygon)方法,里面的参数是多边形对象时,对应写为removeOverlay(disObj.recPolygon)!

原文地址:https://www.cnblogs.com/Jhon-xu/p/8708755.html