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

/**
 * 经纬网 网格显示
 * Author: Song.Huang
 * Date: 13-11-27
 * Time: 上午8:38
 */
L.Control.STLatLngLayer = L.Control.extend({

    //是否初始化
    _initialized:false,

    _STLayerGroup : new L.FeatureGroup(),
    _STLayerTextGroup : new L.FeatureGroup(),
    _offsetX :[0,0,108000,72000,54000,27000,13500,10800,5400,2700,1350,675,450,225,135,90,45,30,20,10],
    _offsetY :[0,0,72000,54000,36000,18000,9000,7200,3600,1800,900,450,300,150,90,60,30,20,10,5],


_options:{
        position:'topright',
        autoZIndex:true
    },

    initialize:function(options){
        L.setOptions(this,options);
        return this;
    },

    onAdd:function(map){
        this._map = map;
        this._createControl();
        this._map.on('cleanMap',this.disableST,this);
        return this._container;
    },

    _createControl:function(){
        var _this = this;
        this._container = L.DomUtil.create('div','leaflet-bar leaflet-control-st-latlng-layer');
        var link = L.DomUtil.create('a','leaflet-bar leaflet-control-st-latlng-layer-link',this._container);
        link.title = '经纬网';
        var span = L.DomUtil.create('span','',link);
        span.innerHTML = '经纬网';

        L.DomEvent
            .on(link,'click', L.DomEvent.stopPropagation)
            .on(link,'click', L.DomEvent.preventDefault)
            .on(link,'dblclick', L.DomEvent.preventDefault)
            .on(link,'dblclick', L.DomEvent.stopPropagation)
            .on(this._container,'contextmenu',L.DomEvent.stopPropagation)
            .on(link,'click',function(){
                if(_this._initialized){
                    _this._initialized = false;
                    L.DomUtil.removeClass(_this._container,'active');
                    _this._hideSTLayer();
                    _this._map.off('zoomend moveend resize',_this._addMapEvent,_this);
                }else {
                    _this._initialized = true;
                    L.DomUtil.addClass(_this._container,'active');
                    _this._STLayerGroup.addTo(_this._map);
                    _this._STLayerTextGroup.addTo(_this._map);
                    _this._showSTLayer({zoom:_this._map.getZoom(),bounds:_this._map.getBounds(),group:_this._STLayerGroup,textGroup:_this._STLayerTextGroup});
                    _this._map.on('zoomend moveend resize',_this._addMapEvent,_this);

                }
            });

    },

    disableST:function(){
        this.changStatus(false);
    },

    changStatus:function(status){
        var _this = this;
        if(!status){
            _this._initialized = false;
            L.DomUtil.removeClass(_this._container,'active');
            _this._hideSTLayer();
            _this._map.off('zoomend moveend resize',_this._addMapEvent,_this);
        }else {
            _this._initialized = true;
            L.DomUtil.addClass(_this._container,'active');
            _this._STLayerGroup.addTo(_this._map);
            _this._STLayerTextGroup.addTo(_this._map);
            _this._showSTLayer({zoom:_this._map.getZoom(),bounds:_this._map.getBounds(),group:_this._STLayerGroup,textGroup:_this._STLayerTextGroup});
            _this._map.on('zoomend moveend resize',_this._addMapEvent,_this);

        }
    },

    _addMapEvent:function(){
        var _this = this;
        if(_this._map.getZoom() > 1 && _this._map.getZoom() < 19){
            _this._STLayerGroup.clearLayers();
            _this._STLayerTextGroup.clearLayers();
            _this._showSTLayer({zoom:_this._map.getZoom(),bounds:_this._map.getBounds(),group:_this._STLayerGroup,textGroup:_this._STLayerTextGroup});
        }else {
            _this._STLayerGroup.clearLayers();
            _this._STLayerTextGroup.clearLayers();
        }
    },

    /**
     * 分格式化
     * @param  {[type]} latlng [分]
     * @return {[type]}        [description]
     */
    formatHMS: function (latlng){

        var lat = latlng.hasOwnProperty('lat')?latlng.lat:latlng[0];
        var lng = latlng.hasOwnProperty('lng')?latlng.lng:latlng[1];

        function setHMS(f){

            var h = parseInt(f/3600);
            var m = parseInt((f-h*3600)/60);
            var s = parseInt((f-h*3600-m*60));
            
            if(m.toString().length == 1){
                m = '0' + m.toString();
            }
            if(s.toString().length == 1){
                s = '0' + s.toString();
            }
            return h + '\u00b0' + m + '\u2032' + s + '\u2033';
        }

        var nLat = '';
        var nLng = '';

        if (lat < 0) {
            nLat = setHMS(lat * -1)+'S';
        } else {
            nLat = setHMS(lat)+'N';
        }
        if (lng < 0) {
            nLng = setHMS(lng * -1)+'W';
        } else {
            nLng = setHMS(lng)+'E';
        }

        return {lat:nLat,lng:nLng};
    },

    _showSTLayer:function(options){
        var _this = this;

        if(_this._map.getZoom() < 2){
            _this._STLayerGroup.clearLayers();
            return false;
        }

        var offsetX = _this._offsetX[options.zoom];
        var offsetY = _this._offsetY[options.zoom];

        var startSW = {lat:(parseInt(options.bounds._southWest.lat*3600/offsetY)-1)*offsetY,
            lng:(parseInt(options.bounds._southWest.lng*3600/offsetX)-1)*offsetX};

        var startNE = {lat:(parseInt(options.bounds._northEast.lat*3600/offsetY)+1)*offsetY,
            lng:(parseInt(options.bounds._northEast.lng*3600/offsetX)+1)*offsetX};
            
        //todo 这里需要做下优化  优化内容: 经纬度坐标文字更新和画线更新分离开来，让地图移动的时候让文字始终靠在界面边上
        for(var i = startSW.lat;i < startNE.lat;i+=offsetY){

            L.polyline([[i/3600,startSW.lng/3600],[i/3600,startNE.lng/3600]],{weight:1,color:'#04cfed',opacity:0.86}).on('mouseover',function(){
                this.setStyle({color:"#ff6600",weight:3,opacity:1})
            }).on('mouseout',function(){
                    this.setStyle({color:"#04cfed",weight:1,opacity:0.86})
                }).addTo(options.group);

            //左
            if(L.Util.verifyLatLng(i/3600,options.bounds._southWest.lng)){
                //var lL = L.olabel(L.latLng(i/3600,options.bounds._southWest.lng),_this.formatHMS([i,options.bounds._southWest.lng*3600]).lat,{className:'st-label st-lable-left',offset:[0,0]});
                var lL = L.circleMarker(L.latLng(i/3600,options.bounds._southWest.lng),{
                    radius:0,
                    stroke:false
                })
                lL.addTo(options.textGroup);
                lL.bindTooltip(_this.formatHMS([i,options.bounds._southWest.lng*3600]).lat,{
                    permanent:true,
                    offset:[60,0]
                }).openTooltip();
                if(!L.Browser.ie){
                    _this._map.on('move',function(){
                        this.setLatLng(L.latLng(this.getLatLng().lat,_this._map.getBounds()._southWest.lng));
                    },lL);
                }
            }
            
            //右
            if(L.Util.verifyLatLng(i/3600,options.bounds._northEast.lng)){
                //var rL = L.olabel(L.latLng(i/3600,options.bounds._northEast.lng), _this.formatHMS([i,options.bounds._northEast.lng*3600]).lat,{className:'st-label st-lable-right',offset:[0,0]});
                var rL = L.circleMarker(L.latLng(i/3600,options.bounds._northEast.lng),{
                    radius:0,
                    stroke:false
                });
                rL.addTo(options.textGroup);
                rL.bindTooltip(_this.formatHMS([i,options.bounds._northEast.lng*3600]).lat,{
                    permanent:true,
                    offset:[-10,0]
                }).openTooltip();
                if(!L.Browser.ie){
                    _this._map.on('move',function(){
                        this.setLatLng(L.latLng(this.getLatLng().lat,_this._map.getBounds()._northEast.lng));
                    },rL);
                }
            }


        }

        for(var ii = startSW.lng;ii < startNE.lng;ii+=offsetX){           
           
            L.polyline([[startSW.lat/3600,ii/3600],[startNE.lat/3600,ii/3600]],{weight:1,color:'#04cfed',opacity:0.86}).on('mouseover',function(){
                this.setStyle({color:"#ff6600",weight:3,opacity:1})
            }).on('mouseout',function(){
                    this.setStyle({color:"#04cfed",weight:1,opacity:0.86})
                }).addTo(options.group);

            if(L.Util.verifyLatLng(options.bounds._southWest.lat,ii/3600)){
                //var bL = L.olabel(L.latLng(options.bounds._southWest.lat,ii/3600),  _this.formatHMS([options.bounds._southWest.lng*3600,ii]).lng,{className:'st-label st-lable-bottom',offset:[0,0]});
                bL = L.circleMarker(L.latLng(options.bounds._southWest.lat,ii/3600),{
                    radius:0,
                    stroke:false
                });
                bL.addTo(options.textGroup);
                bL.bindTooltip(_this.formatHMS([options.bounds._southWest.lng*3600,ii]).lng,{
                    permanent:true,
                    offset:[0,-60]
                }).openTooltip();
                if(!L.Browser.ie){
                    _this._map.on('move',function(){
                        this.setLatLng(L.latLng(_this._map.getBounds()._southWest.lat,this.getLatLng().lng));
                    },bL);
                }
            }
            

            if(L.Util.verifyLatLng(options.bounds._northEast.lat,ii/3600)){
                //var tL = L.olabel(L.latLng(options.bounds._northEast.lat,ii/3600), _this.formatHMS([options.bounds._northEast.lng*3600,ii]).lng,{className:'st-label st-lable-top',offset:[0,0]});
                tL = L.circleMarker(L.latLng(options.bounds._northEast.lat,ii/3600),{
                    radius:0,
                    stroke:false
                });
                tL.addTo(options.textGroup);
                tL.bindTooltip(_this.formatHMS([options.bounds._northEast.lng*3600,ii]).lng,{
                    permanent:true,
                    offset:[0,90]
                }).openTooltip();
                if(!L.Browser.ie){
                    _this._map.on('move',function(){
                        this.setLatLng(L.latLng(_this._map.getBounds()._northEast.lat,this.getLatLng().lng));
                    },tL);
                }
            }



        }

    },

    _hideSTLayer:function(){
        var _this = this;
        _this._STLayerGroup.clearLayers();
        _this._map.removeLayer(_this._STLayerGroup);

        _this._STLayerTextGroup.clearLayers();
        _this._map.removeLayer(_this._STLayerTextGroup);
    }


});

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