【地图】【一】曲线覆盖物

    // 挂载SVG控制库到百度地图对象上
    BMap.Raphael = BMap.Raphael || Raphael;
 
    // 创建曲线绘制命令对象
    // 使用 SVGPATH 命令进行曲线绘制
    function CurveCommand(c,params){
        // 命令参数 目前支持M和C
        this._c = c;
        // 命令具体参数
        this._params = params;  
    }
    // 挂载曲线命令对象到百度地图对象上
    BMap.CurveCommand = CurveCommand;

    // 创建曲线类
    function Curve(commandList,opts){
        // 命令列表
        this._cl = commandList; 
        // 样式
        this._opts = opts; 
        // 显示标识
        // this._show = false; 
        var me = this;
        // 移除事件
        function removeEvent(){
            me._map = null;
            this.removeEventListener('remove',removeEvent)
        } 
        this.addEventListener('remove',removeEvent);
    }
    // 将曲线对象挂载到百度地图覆盖物上
    Curve.prototype = new BMap.Overlay();

    // 通过命令列表获得真正的用于绘制的SVGPATH命令
    Curve.prototype.__getSvgPath = function(){
        var buf = '';
        for(var i = 0;i<this._cl.length;i++){
            var cc = this._cl[i];
            buf += cc._c;
            for(var j=0;j<cc._params.length;j++){
                var pbuf = this._map.pointToOverlayPixel(cc._params[j]);
                buf += pbuf.x+" "+pbuf.y;
                if(j!=cc._params.length-1){
                    buf += " ";
                }
            }
        }
        return buf;
    };

    // 根据百度覆盖物实现对应方法
    // 初始化覆盖物
    Curve.prototype.initialize = function(map){
        // 地图引用
        this._map = map; 
        var svgP = this.__getSvgPath();
        // 设置图层
        var div = this.container = document.createElement('div');
        div.style.cssText = 'position:absolute;top:0px;left:0px;z-index:199;';
      
        this._paper = BMap.Raphael(div,1800,1600);
        this._paper.setViewBox(-500,-500,1800,1600);
      
        this.obj = this._paper.path(svgP);
        if(this._opts){
            this.obj.attr(this._opts);
        }else{
            this.obj.attr({
                "stroke-width":4,
                "cursor":"pointer",
                "stroke":"#3a6bdb",
                "stroke-opacity":0.7
            });
        } 
        this._map.getPanes().markerPane.appendChild(div);
        div.firstChild.style.cssText='position:absolute;top:-500px;left:-500px;width:1800px;height:1600px;';
        return div;
    };

    // 绘制曲线覆盖物
    Curve.prototype.draw = function(){
        var map   = this._map,
            point = map.pixelToPoint(new BMap.Pixel(0, 0)),
            pixel = map.pointToOverlayPixel(point);
        this.container.firstChild.style.left = (pixel.x-500) + "px";
        this.container.firstChild.style.top  = (pixel.y-500) + "px"; 
        this._paper.setViewBox(pixel.x-500,pixel.y-500,1800,1600);
        var svgPath = this.__getSvgPath();
        this.obj.attr({
            path:svgPath
        });
    };

    // 获取地图对象
    Curve.prototype.getMap = function(){
        return this._map;
    };

    // 获取命令列表
    Curve.prototype.getCommandList = function(){
      return this._cl;
    };

    // 设置命令列表
    Curve.prototype.setCommandList = function(cl){
      this._cl = cl;
      var svgPath = this.__getSvgPath();
      this.obj[0].setAttribute('d',svgPath);
    };
    // 挂载曲线覆盖物到爆肚地图对象上
    BMap.Curve = Curve;