• 转载:百度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)!

  • 相关阅读:
    es6 Set 和Map 数据结构
    es6 Symbol
    es6 对象的扩展
    es6 class
    es6 数组扩展方法
    Docker入门01——Image
    GORM 中文文档
    将以前的文章开始慢慢转到这里发表
    环境变量
    在 Linux 中安装 VMware Tools
  • 原文地址:https://www.cnblogs.com/Jhon-xu/p/8708755.html
Copyright © 2020-2023  润新知