TDataView_ui/scripts/vendor/map23dlib/leaflet.LayerOpacity.js

/**
 * 图层透明度改变模块
 * Date: 13-5-23
 * Time: 下午12:06
 * Author:Song.Huang
 */
L.Control.LayerOpacity = L.Control.extend({
    options:{
        position:'bottomcenter',
        autoZIndex:true,
        timeOut:null
    },

    _mapZoomScope:{},

    initialize:function(layerObj,options){
        var _this = this;
        this._layer = layerObj;
        L.setOptions(this,options);
    },

    onAdd:function(map){
        this._mainMap = map;
        this._mapZoomScope.minZoom = this._mainMap.getMinZoom();
        this._mapZoomScope.maxZoom = this._mainMap.getMaxZoom();

        //this._mainMap.setZoomScope(this.options.min_zoom,this.options.max_zoom);
        this._mainMap.fire('singleLayer:addToMap',this._layer);
        this._createControl();
        return this._container;
    },

    /**
     * 面板移除事件
     */
    onRemove:function(){
        var _this = this;
        this._mainMap.setZoomScope(this._mapZoomScope.minZoom,this._mapZoomScope.maxZoom);
        _this._mainMap.off('click dragstart zoomend',_this._changeState,this);
        _this._mainMap.fire("layerOpacity:remove",this);

        _this._mainMap.off('click dragstart zoomend',_this._changeState,this);  
        L.DomEvent.off(_this._draggerContainer, 'click', this._onSliderClick, this);
        L.DomEvent.off(_this._dragger, 'mousedown', this._onSliderMove, this);

        if(_this.options.showFavBtn){
            L.DomEvent.off(_this._favBtn,'click',this._favOverLayer,this);
        }
        if(!_this.options.onlyShow){
            L.DomEvent.off(_this._closeBtn,'click',this._hideOverLayer,this);
        }
        L.DomEvent.off(_this._container,'mousemove',this._changeState,this);
        L.DomEvent.off(_this._dragger, 'touchmove', function(e){
            _this._changeOpacity(_this._updateDraggerPosition(e.touches[0]));
        });
    },

    /**
     * 创建控件
     * @returns {*}
     * @private
     */
    _createControl:function(){
        var _this = this;
        _this._container = L.DomUtil.create('div','leaflet-control-layerOpacity'+(_this.options.onlyShow?' only-show':''));

        _this._titleLabel = L.DomUtil.create('span','title-label',_this._container);
        _this._titleLabel.innerHTML = "透明度：";
        _this._numMaxLabel = L.DomUtil.create('span','numMax-label',_this._container);
        _this._numMaxLabel.innerHTML = "100";

        _this._draggerContainer = L.DomUtil.create('div','dragger-container',_this._container);
        _this._draggerBg = L.DomUtil.create('div','dragger-bg',_this._draggerContainer);
        _this._dragger = L.DomUtil.create('div','dragger',_this._draggerContainer);
        _this._opacityNum = L.DomUtil.create('div','opacity-num',_this._draggerContainer);
        _this._opacityNum.innerHTML = '100%';

        _this._numMinLabel = L.DomUtil.create('span','numMin-label',_this._container);
        _this._numMinLabel.innerHTML = "0";

        if(_this.options.showFavBtn || !_this.options.onlyShow){
            _this._optionsWrap = L.DomUtil.create('div','options-wrap',_this._container);
        }

        if(_this.options.atlas){
            _this._infoBtn = L.DomUtil.create('a','info_Btn',_this._optionsWrap);
            _this._infoBtn.title = '详情';
            _this._infoBtn.innerHTML = '详情';
            if(_this.options.showFavBtn){
                _this._optionsWrap.style.right = '-80px';
            }else{
                _this._optionsWrap.style.right = '-54px';
            }
            L.DomEvent.on(_this._infoBtn,'click',this._getShowInfo,this);
        }

        if(_this.options.showFavBtn){
            _this._favBtn = L.DomUtil.create('a','fav_abtn',_this._optionsWrap);
            _this._favBtn.title = '收藏';
            _this._favBtn.innerHTML = '收藏';
            //_this._optionsWrap.style.right = '-54px';
            L.DomEvent.on(_this._favBtn,'click',this._favOverLayer,this);
        }
        if(!_this.options.onlyShow){
            _this._closeBtn = L.DomUtil.create('a','close_abtn',_this._optionsWrap);
            _this._closeBtn.title = '关闭';
            _this._closeBtn.innerHTML = '关闭';
            L.DomEvent.on(_this._closeBtn,'click',this._hideOverLayer,this);
        }
        

        L.DomEvent
            .on(_this._container,'click', L.DomEvent.stopPropagation)
            .on(_this._container,'click', L.DomEvent.preventDefault)
            .on(_this._container, 'contextmenu', L.DomEvent.stopPropagation);

        _this._container.onselectstart=function(){
            return false;
        };

        _this._mainMap.on('click dragstart zoomend',_this._changeState,this);       

        L.DomEvent.disableClickPropagation(this._container);
        L.DomEvent.on(_this._draggerContainer, 'click', this._onSliderClick, this);
        L.DomEvent.on(_this._dragger, 'mousedown', this._onSliderMove, this);
        L.DomEvent.on(_this._container,'mousemove',this._changeState,this);
        L.DomEvent.on(_this._dragger, 'touchmove', function(e){
            _this._changeOpacity(_this._updateDraggerPosition(e.touches[0]));
        });

        return _this._container;
    },

    /**
     * 点击改变进度条
     * @param e
     * @private
     */
    _onSliderClick: function (e) {
        var _this = this;
        var first = (e.touches && e.touches.length === 1 ? e.touches[0] : e);
        _this._changeOpacity(_this._updateDraggerPosition(first));
    },
    /**
     * 添加详情
     */
    _getShowInfo:function(){
        this.options.getShowInfoCallback(this.options.thematic_data);
    },
    /**
     * 鼠标滑动改变进度条
     * @param e
     * @private
     */
    _onSliderMove:function(){
        var _this = this;
        document.onmousemove = function(e){
            e = e || window.event;
            _this._changeOpacity(_this._updateDraggerPosition(e));
        };
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup   = null;
        };
    },

    /**
     * 更新进度条的位置
     * @param e
     * @returns {number}
     * @private
     */
    _updateDraggerPosition:function(e){
        var _this = this;
        var x = L.DomEvent.getMousePosition(e,_this._draggerContainer).x -
            _this._dragger.offsetWidth*0.5;
        if(x<0){
            x=0;
        }else if(x>_this._draggerContainer.offsetWidth-_this._dragger.offsetWidth){
            x=_this._draggerContainer.offsetWidth-_this._dragger.offsetWidth;
        }
        _this._dragger.style.left = x + 'px';
        _this._opacityNum.style.left = x + 'px';

        var op = 1-x/_this._draggerContainer.offsetWidth;
        if(op < 0.15){op = 0;}

        _this._opacityNum.innerHTML = parseInt(op*100)+'%';

        return op;

    },

    /**
     * 改变图层的透明度
     * @param opacity
     * @private
     */
    _changeOpacity:function(opacity){
        var _this = this;
        if(opacity >=0 && opacity <=1){
            _this._layer.setOpacity(opacity);
            _this._mainMap.fire("layerOpacity:change",{'layerOpacity':opacity});
        }
    },

    /**
     * 收藏专题图
     * @private
     */
    _favOverLayer:function(){
        this.options.favCallback(this.options.thematic_data);
    },

    /**
     * 隐藏专题图
     * @private
     */
    _hideOverLayer:function(){
        this.options.closeCallback(this.options);
    },


    /**
     * 改变面板显示/隐藏 3秒非操作状态 自动隐藏
     * @private
     */
    _changeState:function(){
        
    },
        

});

L.control.layerOpacity = function(options){
    return new L.Control.LayerOpacity(options);
};