TDataView_ui/scripts/vendor/map23dlib/leaflet.Control.LeadorStreetView.js

    L.Control.LeadorStreetView = L.Control.extend({

        //是否初始化
        _initialized:false,

        _isShow:false,

        _isLoad:false,

        streetLayerGuid:null,
        streetMarkerGuid:null,

        options:{
            position:'topleft',
            autoZIndex:true,
            state:false,
            onFunc:null,
            offFunc:null
        },

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

        onAdd:function(map){
            var _this = this;
            _this._map = map;
            ONEMAP.C.publisher.subscribe(_this.updateMarker23D,'change23D');
            _this._createControl();
            return _this._container;
        },
        /**
         * 创建冒泡窗
         */
        _creatPopupHtml:function(options){
            var popupHtml =  '<div class="popup_html">'+
                             '    <div class="popup-lt"></div>'+
                             '    <div class="popup-lb"></div>'+
                             '    <div class="popup-rt"></div>'+
                             '    <div class="popup-rb"></div>'+
                             '    <div class="popup-ct" style="text-indent:15px;line-height:48px">'+options.name+
                             '    </div>'+
                             '    <div class="popup-cb" style="padding-bottom:20px;color:#666666 !important">'+options.content+'</div>'+
                             '</div>'
            return popupHtml;
        },
        _vieModalHtml:'<iframe frameborder="0" class="cover-iframe"></iframe>'+
                                    '<div class="cover-content">'+
                                        '<div class="popup_html">'+
                                        '    <div class="popup-lt"></div>'+
                                        '    <div class="popup-lb"></div>'+
                                        '    <div class="popup-rt"></div>'+
                                        '    <div class="popup-rb"></div>'+
                                        '    <div class="popup-ct" style="text-indent:15px;line-height:48px">路网实景</div>'+
                                        '    <div class="popup-cb" style="padding-bottom:20px;color:#666666 !important">'+
                                        '       <div id="leadorStreetViewWrap">'+
                                                   '<div id="leadorStreetViewSwf"></div>'+
                                        '       </div>'+
                                        '    </div>'+
                                        '</div>'+
                                    '</div>',
        _createControl:function(){
            var _this = this;
            _this._container = L.DomUtil.create('div','leaflet-bar leaflet-control-leador-street-view');
            L.DomEvent.on(_this._container, 'contextmenu', L.DomEvent.stopPropagation);
            var link = L.DomUtil.create('a','leaflet-control-leador-street-view-link', this._container);
            L.DomUtil.create('span','',link);
            link.title = '路网实景';

            _this._viewModal = L.DomUtil.create('div','modal');
            _this._viewModal.id = 'leadorStreetViewModal';

            _this._viewModal.innerHTML = _this._vieModalHtml;
            document.body.appendChild(_this._viewModal);
            L.DomEvent
                .on(link, 'click', L.DomEvent.stopPropagation)
                .on(link, 'click', L.DomEvent.preventDefault)
                .on(link,'click', function(){

                    if(_this._isLoad){
                        return false;
                    }

                    if(_this.options.state){
                        _this.options.state = false;

                        _this._map.fire('leadorStreetView:off');

                        L.DomUtil.removeClass(_this._container,'active');
                        _this._removeViewMarker();
                        _this._removeViewRoadTile();
                    }else{
                        _this.options.state = true;

                        _this._map.fire('leadorStreetView:on');

                        _this._buildLeadorSwf();

                        _this._isLoad = true;
                        setTimeout(function(){
                            _this._isLoad = false;
                        },1000);
                        L.DomUtil.addClass(_this._container,'active');
                        //setTimeout(function(){
                            _this._addViewMarker();
                            _this._addViewRoadTile();
                        //},1000);
                    }
                });

            _this._map.on('leadorStreetViewPoint:on cleanMap',function(){
                if(_this.options.state){
                    _this.options.state = false;
                    _this._map.fire('leadorStreetView:off');
                    L.DomUtil.removeClass(_this._container,'active');
                    _this._removeViewMarker();
                    _this._removeViewRoadTile();
                }
            });
        },
        addShijing:function(){
            var _this = this;
            _this._groupId = ONEMAP.M.heighterControl.modValue.shijingGroup;
            _this.add3DShijing = true;
            if(!_this.options.state){
                _this.options.state = true;

                _this._map.fire('leadorStreetView:on');

                _this._buildLeadorSwf();

                _this._isLoad = true;
                setTimeout(function(){
                    _this._isLoad = false;
                },1000);
                L.DomUtil.addClass(_this._container,'active');
                //setTimeout(function(){
                    _this._addViewMarker();
                    _this._addViewRoadTile();
                //},1000);
                //ONEMAP.C.publisher.subscribe(_this.controlMyLayer,'shijikngLayer');
            }
        },
        controlShijing:function(){
            var _this = this;
            if(_this.options.state){
                _this.options.state = false;
                _this._map.fire('leadorStreetView:off');
                L.DomUtil.removeClass(_this._container,'active');
                _this._removeViewMarker();
                _this._removeViewRoadTile();
                //ONEMAP.C.publisher.unSubscribe(_this.controlMyLayer,'shijikngLayer');
            }
        },
        //设置显示和隐藏 show/hide
        changeStatus:function(type){
            var _this = this;
            switch(type){
                case 'show':
                    _this._container.style.left = '60px';
                break;
                case 'hide':
                    _this._container.style.left = '-10000px';
                    if(_this.options.state){
                        _this.options.state = false;
                        L.DomUtil.removeClass(_this._container,'active');
                        _this._removeViewMarker();
                        _this._removeViewRoadTile();
                    }
                break;
                case 'off':
                    if(_this.options.state){
                        _this.options.state = false;
                        L.DomUtil.removeClass(_this._container,'active');
                        _this._removeViewMarker();
                        _this._removeViewRoadTile();
                    }
                break;
            }
        },

        flashChecker:function(){
            var hasFlash = 0;
            var flashVersion =0;
            try{
                if(document.all){
                    var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
                    if(swf){
                        hasFlash = 1;
                        VSwf = swf.GetVariable('$version');
                        flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);
                    }
                }else {
                    if(navigator.plugins && navigator.plugins.length > 0){
                        var swf = navigator.plugins["Shockwave Flash"];
                    }
                    if(swf){
                        hasFlash = 1;
                        var words = swf.description.split(" ");
                        for(var i=0;i<words.length; i++){
                            if(isNaN(parseInt(words[i]))) continue;
                            flashVersion = parseInt(words[i]);
                        }
                    }
                }
            }catch (e) {
            }

            return {
                f:hasFlash,
                v:flashVersion
            };
        },

        //创建路径swf
        _buildLeadorSwf:function(){
            var _this = this;

            var flashPlayerInfo = _this.flashChecker();
            if(flashPlayerInfo && flashPlayerInfo.v > 10){
                /** 配置 **/
                var more = {};
                more.flashvars = {};
                LeadorStreetView.useHash = false; 
                /** 设置服务信息 **/
                more.flashvars.TrueVisionSeverUrl = onemapUrlConfig.leadorStreetBaseUrl;
                more.flashvars.Port = onemapUrlConfig.leadorStreetPort;
                more.flashvars.DataName = onemapUrlConfig.leadorStreetDataName;
                more.flashvars.TrueVisionImageUrl = onemapUrlConfig.leadorStreetImageUrl;
                more.flashvars.UIUrl = onemapUrlConfig.leadorStreetLibUrl+"/IShowChinaTVUIBJ.swf";
                more.flashvars.LogoUrl = onemapUrlConfig.leadorStreetLibUrl+'/ld-logo.png'; 
                /** 绑定DIV **/
                LeadorStreetView.bindingDIV("leadorStreetViewSwf",null,more);

                LeadorStreetView.showFullScreenUI(false);

                //位置改变
                LeadorStreetView.addCompleteEvent(function(info){
                    _this._viewMarker.setLatLng([info.lat,info.lon]);
                    _this.updateMarker23D('3d');
                    if(info.address){
                        var latlng = new L.latLng(info.lat,info.lon)
                        latlng = L.Util.formatHMS(latlng)
                        var options_popup = {
                            name:info.address,
                            content:'<p>'+latlng.lng+';'+latlng.lat+'</p>'
                        }
                        var popupHtml = _this._creatPopupHtml(options_popup);
                        _this._viewMarker.bindPopup(popupHtml).openPopup();
                        
                    }
                    map3DViewer.marker({
                        action: 'update',
                        guid:_this.streetMarkerGuid,
                        geojson: {
                            "geometry": {
                                "coordinates": [info.lng, info.lat]
                            }
                        }
                    })
                    //图标偏移到 左侧中心
                    // var holderWrap = _this._map.getContainer();
                    // var aLatLng = new L.LatLng(info.lat,info.lon);
                    // var bPoints = _this._map.project(aLatLng,_this._map.getZoom());
                    // bPoints.x += (holderWrap.clientWidth/2 - document.getElementById('leadorStreetViewWrap').offsetWidth)/4;
                    // aLatLng = _this._map.unproject(bPoints,_this._map.getZoom());

                    // _this._map.setView(aLatLng,_this._map.getZoom());
                });

                //视角改变
                LeadorStreetView.addAngleChangeEvent(function(info){
                    _this._updateViewMarker(parseInt(info.yaw));
                });


            }else {
                if(document.all){
                    var flashPlayerLink = map23DConfig.map23DAssetsUrl+"/soft/flashplayer_winax.exe";
                }else {
                    var flashPlayerLink = map23DConfig.map23DAssetsUrl+"/soft/flashplayer_win.exe";
                }
                var installFlashHtml = '<div class="install-flash-player">' +
                        '<p><strong>请安装Adobe flash player 11以上版本的播放器。</strong></p>' +
                        '<a href="'+flashPlayerLink+'"><img src="images/layout/get_flash.png"/><span>Adobe Flash Player 11</span></a>' +
                        '</div>';
                document.getElementById('leadorStreetViewSwf').innerHTML = installFlashHtml;
            }        
        },

        /**
         * 图标 添加
         * @private
         */
        _addViewMarker: function () {
            var _this = this;

            _this._viewMarkerBox = L.DomUtil.create('div','leador-street-view-marker-box');
            //创建标志
            var latlng = new L.latLng(39.91302,116.4166)
            latlng = L.Util.formatHMS(latlng)
            var options_popup = {
                name:'请把我拖动到蓝色路网上！',
                content:'<p>'+latlng.lng+';'+latlng.lat+'</p>'
            }
            var popupHtml = _this._creatPopupHtml(options_popup);
            _this._viewMarker = L.marker([39.91302,116.4166],{
                draggable:true,
                icon: L.divIcon({
                    className:'leador-street-view-marker',
                    iconSize: [89, 68],
                    iconAnchor: [43, 38],
                    popupAnchor: [-2, -35],
                    html:'<div id="leadorStreetViewMarkerBox"></div>'
                })
            }).bindPopup(popupHtml).addTo(map2DViewer.groups[_this._groupId]).openPopup();
            //创建3D标记
            var center = map23DData.view.center;
            _this.streetMarkerGuid = map3DViewer.marker({
                action:'add',
                groupId:_this._groupId,
                geojson:{
                    "properties": {
                        title:'请点击蓝色网路',
                        iconUrl: map23DConfig.map23DAssetsUrl+'/images/layout/icon-shijing4.png',
                        altitude:0,
                        altitudeMode:0,
                        iconSize: [25, 25],
                        iconAnchor: [12, 12],
                        popupAnchor:[0,-14],
                        popupContent:'请点击蓝色网路'
                    },
                    "geometry": {
                        "coordinates": [center.lng,center.lat]
                    }
                }
            })
            _this._showStreet3DView();
            _this._viewMarker.on('dragend',function(){
                _this._showStreet3DView();
            });
        },

        _updateViewMarker:function(angle){
            var mod=Math.floor(angle/30);
            var index=0;
            if(angle>(mod*30-15) && angle< (mod*30+15)){
                //index=mod*30;
                index=mod;
            }else if(angle>((mod+1)*30-15) && angle< ((mod+1)*30+15)){
                index=mod+1;
            }
            if(index==12){
                index=0;
            }
            var viewMarkerBox = document.getElementById("leadorStreetViewMarkerBox");
            viewMarkerBox.style.backgroundPosition = '0px -'+(index*68)+'px';
        },

        /**
         * 添加路网瓦片
         * @private
         */
        _addViewRoadTile:function(){
            var _this = this;
 
            /*_this.tileLayerOverAddress = new L.TileLayer(onemapUrlConfig.leadorStreetTileUrl,
                {
                    minZoom: 1,
                    maxZoom: 19,
                    zIndex: 11
                });
            _this.tileLayerOverAddress.addTo(_this._map);*/
            _this.streetLayerGuid=map23DControl.tileLayer({
                action: 'add',
                layer: {  
                    url2D: onemapUrlConfig.leadorStreetTileUrl + '?l={z}&x={x}&y={y}',
                    url3D: onemapUrlConfig.leadorStreetTileUrl + '?z=%d&x=%d&y=%d',
                    minZoom: 1,
                    maxZoom: 19,
                    maxNativeZoom: 8,
                    attribution: '',
                    opacity: 1,
                    imageType: 'png'
                }
            })

        },
        updateMarker23D:function(option,center){
            var _this = this;
            if(option === '2d'){
                if(_this._viewMarker){
                    _this._viewMarker.setLatLng([center.y,center.x]);
                    _this._showStreet3DView();
                }
                
            }else if(option === '3d'){
                if(_this._viewMarker){
                    var latlng = _this._viewMarker.getLatLng();
                    map3DViewer.marker({
                        action: 'update',
                        guid:_this.streetMarkerGuid,
                        geojson: {
                            "geometry": {
                                "coordinates": [latlng.lng, latlng.lat]
                            }
                        }
                    })
                }
            }
        },
        updateMarker3D:function(options){
            var _this = this;
            if(_this.streetMarkerGuid){
                map3DViewer.marker({
                    action: 'update',
                    guid:_this.streetMarkerGuid,
                    geojson: {
                        "geometry": {
                            "coordinates": [options.x, options.y]
                        }
                    }
                })
                _this.updateMarker23D('2d',options)
            }
        },
        controlMyLayer:function(options){
            var _this = this;
            if(options == 'show'){
                map23DControl.tileLayer({
                    action:'show',
                    guid:_this.streetLayerGuid
                })

            }else if(options =='hide'){
                map23DControl.tileLayer({
                    action:'hide',
                    guid:_this.streetLayerGuid
                })
            }
        },
        /**
         * 移除路网瓦片
         * @private
         */
        _removeViewRoadTile:function(){
            var _this = this;
            //_this._map.removeLayer(_this.tileLayerOverAddress);
            map23DControl.tileLayer({
                action: 'remove',
                guid: _this.streetLayerGuid
            })
            _this.streetLayerGuid = null;
        },

        /**
         * 标志 移除
         * @private
         */
        _removeViewMarker: function () {
            var _this = this;
            map23DControl.group({
                action:'remove',
                guid:_this._groupId
            })
            _this._viewModal.style.left = '-10000px';
            /*map3DViewer.marker({
                action:'remove',
                guid:_this.streetMarkerGuid
            })*/
            _this.streetMarkerGuid = null;
            _this._isShow = false;
            LeadorStreetView.removeBinding();
            swfobject.removeSWF(document.getElementById('leadorStreetViewWrap').id);
            setTimeout(function(){
                document.getElementById('leadorStreetViewModal').innerHTML = _this._vieModalHtml;
            }, 300);        
        },

        /**
         * 显示3d实景
         * @private
         */
        _showStreet3DView:function(){
            var _this = this;
            _this._viewLatlng = _this._viewMarker.getLatLng();
            if(!_this._isShow){
                _this._viewModal.style.left = '60px';
                _this._isShow = true;
            }

            LeadorStreetView.loadStreetViewByPosition(_this._viewLatlng.lng,_this._viewLatlng.lat);

        }

    });

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