TDataView_ui/scripts/mod/gcms/gcmsShowInfos.js

/**
 * [ONEMAP.M.gcmsShowInfos]
 * @return {[object]}
 */
define([
	'html!templates/gcms/gcmsShowInfos',
    'vendorDir/handlebars/handlebars',
    'css!styles/gcms/gcmsShowInfos'],
function(tpcLayout,Handlebars){
	/**
	 * [modValue description]
	 * 数据模块
	 * @type {Object}
	 */
	var modValue = {
	    infoData:null,
	    markerGroup:null,
	    markers:{},
	    iviewer:null
	};
	/**
	 * 状态模块
	 */
	var status = {
		initialized:false,
		showVideo:false,
		showImage:false,
		showAudio:false
	};

	function init(options){
		if(!status.initialized){
			subscribe();
			setLayout();
			status.initialized = true;
		}
		modValue.infoData  = options;
		//添加markerGroup
		if(modValue.markerGroup){
			modValue.markerGroup = map23DControl.group({
			                            action: 'add'
			                        })
		}
		var markerID = null;
		if(modValue.infoData.action == 'add'){
			markerID = parsingData();
		}else if(modValue.infoData.action == 'remove'){
			removeCurMarker()
		}else if(modValue.infoData.action == 'removeAll'){
			removeAll();
		}else if(modValue.infoData.action == 'getMarkerInfos'){
			markerID = getMarkerInfos();
		}
		if(markerID){
			return markerID;
		}

	}
	function setLayout(){
		$(tpcLayout).appendTo($('body'));
	}
	/**
	 * 创建markerPoup
	 */
	function buildMarkerPoup(options){
		var popupHtml =  '<div class="popup_html marker">'+
		                 '    <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">'+
		                 '        <div class="gems_marker" style="padding:30px 5px 0px 5px">'+options.content+
		                 '        </div>'+
		                 '    </div>'+
		                 '</div>'
		return popupHtml;
	}
	/**
	 * 解析数据
	 */
	function parsingData(){
		var curData  = JSON.parse(modValue.infoData.data),markerPoup,locationData,markerOptions,dataUrl;
		switch (curData.table){
			case "record_note"://文本
				textHtml = curData.gcms_title+'<br/>'+curData.description;
				markerOptions  ={
					markerPoup:buildMarkerPoup({
									name:curData.gcms_title,
            						content:textHtml
								}),
					markerData:curData
				}
			break;
			case "record_picture"://图片
				var imageData = JSON.parse(curData.location_image).features[0];
				dataUrl = imageData.properties.file;
				var imageName = imageData.properties.name;
				markerOptions  ={
					markerPoup:buildMarkerPoup({
									name:curData.gcms_title,
            						content:'<a href="javascript:ONEMAP.M.gcmsShowInfos.showImage(\''+dataUrl+'\')">查看'+imageName+'</a>'
								}),
					markerData:curData,
					markerRecord:'location_image'
				}
			break;
			case "record_audio"://音频
				var audioData = JSON.parse(curData.location_audio).features[0];
				dataUrl = audioData.properties.file;
				var audioName = audioData.properties.name;
				markerOptions  ={
					markerPoup:buildMarkerPoup({
									name:curData.gcms_title,
            						content:'<a href="javascript:ONEMAP.M.gcmsShowInfos.showAudio(\''+dataUrl+'\')">查看'+audioName+'</a>'
								}),
					markerData:curData,
					markerRecord:'location_audio'

				}
			break;
			case "record_video"://视频
				var videoData = JSON.parse(curData.location_video).features[0];
				dataUrl = videoData.properties.file;
				var videoName = videoData.properties.name;
				markerOptions  ={
					markerPoup:buildMarkerPoup({
									name:curData.gcms_title,
            						content:'<a href="javascript:ONEMAP.M.gcmsShowInfos.showVideo(\''+dataUrl+'\')">查看'+videoName+'</a>'
								}),
					markerData:curData,
					markerRecord:'location_video'
				}
			break;
		}
		return showMarker(markerOptions)
	}
	/**
	 * [showMarker description]
	 * 添加marker点
	 * @return {[type]} [description]
	 */
	function showMarker(markerOptions){
		var markerData = markerOptions.markerData;
		var coordinates,locationData,title;
		if(markerOptions.markerRecord){
			locationData = markerData[markerOptions.markerRecord];
			locationData = JSON.parse(locationData).features[0];
			coordinates = locationData.geometry.coordinates;
			title = locationData.properties.name;
		}else{
			coordinates = [markerData.lon,markerData.lat];
			title = markerData.gcms_title;
		}
		var markerId = map23DControl.marker({
		            action:'add',
		            groupId:modValue.markerGroup,
		            geojson:{
		                "type": "Feature",
		                "properties": {
		                    iconUrl: map23DConfig.map23DAssetsUrl+'/images/gcms/icon_'+markerData.table+'.png',
							iconSize: [35,50], 
		                    iconAnchor: [17,50], 
		                    popupAnchor: [0,-50],
		                    altitude:0,
		                    altitudeMode:1,
		                },
		                "geometry": {
		                    "type": "Point",
		                    "coordinates": coordinates
		                }
		            } 
		        })  
		map2DViewer.markers[markerId].bindPopup(markerOptions.markerPoup,{title:title});
		modValue.markers[markerId] = {
			guid:markerId,
			location:markerOptions.markerRecord || 0,
			metaData:markerData
		};
		map23DControl.setView({
		    center: {
		        lat: coordinates[1],
		        lng: coordinates[0]
		    }
		})
		return markerId;
	}
	/**
	 * 移除单个标记
	 */
	function removeCurMarker(){
		var curGuid = modValue.infoData.guid;
		map23DControl.marker({
		    action: 'remove',
		    guid: curGuid
		})
		delete modValue.markers[curGuid];
	}
	/**
	 *移除全部标记点
	 */
	function removeAll(){
		map23DControl.group({
		    action: 'cleanAll',
		    guid: modValue.markerGroup
		})
	}
	/**
	 * 获取标记点信息
	 * 根据guid单个获取     
	 * 传递参数'all'  可以获取所有标记点信息
	 */
	function getMarkerInfos(){
		var markerInfos = [];
		if(modValue.infoData.guid == "all"){
			$.each(modValue.markers,function(i,t){
				markerInfos.push(creatMeta(t));
			})
		}else{
			var metaData = modValue.markers[modValue.infoData.guid];
			markerInfos.push(creatMeta(metaData))
		}
		return markerInfos;
	}
	function creatMeta(t){
		var meta;
		if(t.location == 0) {
			meta = {
				id:t.metaData.gcms_id,
				title:t.metaData.gcms_title,
				note:t.metaData.description,
				lon:t.metaData.lon,
				lat:t.metaData.lat,
				type:t.metaData.type,
				createId:t.guid
			}
		}else{
			var curRecord = JSON.parse(t.metaData[t.location]).features[0];
			meta = {
				id:t.metaData.gcms_id,
				title:t.metaData.gcms_title,
				note:t.metaData.description,
				lon:curRecord.geometry.coordinates[0],
				lat:curRecord.geometry.coordinates[1],
				type:t.metaData.type,
				url:curRecord.properties.file,
				createId:t.guid
			}
		}
		return meta;
	}
	/**
	 * 查看图片
	 */
	function showImage(url){
		var showImageTemplate = Handlebars.compile($('#picture-item-template').html());
		if(status.showImage){
			$("#gcmsShowInfosPictureViewer").remove()
		}else{
			status.showImage = true;
		}
		$('body').append(showImageTemplate());
		url = onemapUrlConfig.gcmsServiceUrl+'/file'+url;
		if(modValue.iviewer){
		    modValue.iviewer.iviewer('loadImage', url);
		    return false;
		}else {                
		    modValue.iviewer = $("#gcmsShowInfosPictureViewerBox").iviewer(
		    {
		        zoom_max:200,
		        zoom_min:5,
		        zoom:100,
		        src: url,
		        update_on_resize:true,
		    });
		}
		$('#gcmsShowInfosPictureViewer .close').bind('click', function() {
		   $("#gcmsShowInfosPictureViewer").remove()
		});
		$('#gcmsShowInfosPictureViewer .modal-body').css({height:$(window).height()/3*2});   
		var $box2 = $('#gcmsShowInfosPictureViewer').on('mousedown', '#coorForShowInfosPictureViewer', function(e) {
		    var posix = {
		            'w': $box2.width(), 
		            'h': $box2.height(), 
		            'x': e.pageX, 
		            'y': e.pageY
		        };
		    
		    $.extend(document, {'move': true, 'call_down': function(e) {
		        $box2.css({
		            'width': Math.max(30, e.pageX - posix.x + posix.w),
		            'height': Math.max(30, e.pageY - posix.y + posix.h)
		        });
		        var bodyHeight = Math.max(30, e.pageY - posix.y + posix.h )-75;
		        $("#gcmsShowInfosPictureViewer .modal-body").css({height:bodyHeight});  
		        $("#gcmsShowInfosPictureViewerBox").iviewer('update');                    
		    }});
		    return false;
		});

		//拖拽
		$("#gcmsShowInfosPictureViewer .popup-ct").dragmove($('#gcmsShowInfosPictureViewer'));
	};
	/**
	 * 播放视频
	 */
	function showVideo(url){
		var showVideoTemplate = Handlebars.compile($('#video-item-template').html());
		if(status.showVideo){
			$("#gcmsShowInfosModal").remove()
		}else{
			status.showVideo = true;
		}
		$('body').append(showVideoTemplate());
		var videoFileUrl = onemapUrlConfig.gcmsServiceUrl+'/file'+url;
		var flashPlayerInfo = flashChecker();
        if (flashPlayerInfo && flashPlayerInfo.v > 10) {
            var videPlayerHtml = _setFlashPlayer("videoPlayer", "scripts/vendor/player/snplayer.swf?file=type:mp4;url:" + videoFileUrl + "", "100%", "100%", "SkinURL=skin/default.zip", true);
        } else {
            if (document.all) {
                var flashPlayerLink = onemapUrlConfig.siteUrl+'/soft/flashplayer_winax.exe';
            } else {
                var flashPlayerLink = onemapUrlConfig.siteUrl+'/soft/flashplayer_win.exe';
            }
            var videPlayerHtml = '<div class="install-flash-player" style="text-align:center">' +
                '<p><strong>请安装Adobe flash player 11以上版本的播放器。</strong></p>' +
                '<a href="' + flashPlayerLink + '"><img src="images/layout/get_flash.png"/><br/><span>Adobe Flash Player 11</span></a>' +
                '</div>';
        }
        $('#gcmsShowInfosVideoPlayer').empty().html(videPlayerHtml);

        $('#gcmsShowInfosModal .popup-ct .close').bind('click', function() {
            $("#gcmsShowInfosModal").remove()
        });

        $('#gcmsShowInfosModal .popup-ct').dragmove($('#gcmsShowInfosModal'));


        var $box2 = $('#gcmsShowInfosModal').on('mousedown', '#coorForShowInfosVideoModal', function(e) {
            var posix = {
                    'w': $box2.width(), 
                    'h': $box2.height(), 
                    'x': e.pageX, 
                    'y': e.pageY
                };
            
            $.extend(document, {'move': true, 'call_down': function(e) {
                $box2.css({
                    'width': Math.max(30, e.pageX - posix.x + posix.w),
                    //'height': Math.max(30, e.pageY - posix.y + posix.h)
                });
                var bodyHeight = Math.max(30, e.pageY - posix.y + posix.h )-145;
                $("#gcmsShowInfosModal .modal-body").css({height:bodyHeight});                        
            }});

            $.extend(document, {'move': true, 'call_up': function(e) {
                $('#gcmsShowInfosVideoList .selected').click();
            }});

            return false;
        });
	};
	/**
	 * 播放音频
	 */
	function showAudio(url){
		var showAudioTemplate = Handlebars.compile($('#audio-item-template').html());
		if(status.showAudio){
			$("#gcmsShowInfosModal").remove()
		}else{
			status.showAudio = true;
		}
		$('body').append(showAudioTemplate());
		var flashPlayerInfo = flashChecker();
		var audioFileUrl = onemapUrlConfig.gcmsServiceUrl+'/file'+url;
		if (flashPlayerInfo && flashPlayerInfo.v > 10) {
		    var audioPlayerHtml = _setFlashPlayer("audioPlayer", "scripts/vendor/player/snplayer.swf?file=type:mp3;url:" + audioFileUrl + "", "100%", "100%", "SkinURL=skin/default.zip", true);
		} else {
		    if (document.all) {
		        var flashPlayerLink = onemapUrlConfig.siteUrl+'/soft/flashplayer_winax.exe';
		    } else {
		        var flashPlayerLink = onemapUrlConfig.siteUrl+'/soft/flashplayer_win.exe';
		    }
		    var audioPlayerHtml = '<div class="install-flash-player" style="text-align:center">' +
		        '<p><strong>请安装Adobe flash player 11以上版本的播放器。</strong></p>' +
		        '<a href="' + flashPlayerLink + '"><img src="images/layout/get_flash.png"/><br/><span>Adobe Flash Player 11</span></a>' +
		        '</div>';
		} 
		$('#gcmsShowInfosAudioPlayer').empty().append(audioPlayerHtml);

		$('#gcmsShowInfosAudioModal .close').bind('click', function() {
		    $("#gcmsShowInfosAudioModal").remove()
		});

		$('#gcmsShowInfosAudioModal .popup-ct').dragmove($('#gcmsShowInfosAudioModal'));

		var $box2 = $('#gcmsShowInfosAudioModal').on('mousedown', '#coorForShowInfosAudioModal', function(e) {
		    var posix = {
		            'w': $box2.width(), 
		            'h': $box2.height(), 
		            'x': e.pageX, 
		            'y': e.pageY
		        };
		    
		    $.extend(document, {'move': true, 'call_down': function(e) {
		        $box2.css({
		            'width': Math.max(30, e.pageX - posix.x + posix.w),
		            //'height': Math.max(30, e.pageY - posix.y + posix.h)
		        });
		        var bodyHeight = Math.max(30, e.pageY - posix.y + posix.h )-145;
		        $("#gcmsShowInfosAudioModal .modal-body").css({height:bodyHeight});                        
		    }});

		    $.extend(document, {'move': true, 'call_up': function(e) {
		        $('#gcmsShowInfosAudioList .selected').click();
		    }});
		    return false;
		});
	};
	function flashChecker(){
	    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
	    };
	}

	/**
	 * 添加Flash Player
	 * @type {Function}
	 * @param id {String} 容器id
	 * @param url {String} url
	 * @param width {Number} 宽度
	 * @param height {Number} 高度
	 * @param vars {String} 参数
	 * @param transparent {String} 是否透明
	 * @returns {string} flash player code
	 * @private
	 */
	function _setFlashPlayer(id, url, width, height, vars, transparent){
	    $('#DIVSNplayerWMPvideoPlayer').remove();
	    var wmode = transparent ? "transparent" : "opaque";
	    var html = '';
	    html += '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ';
	    html += 'width="'+width+'" ';
	    html += 'height="'+height+'" ';
	    html += 'id="'+id+'"';
	    html += '>';
	    html += '<param name="movie" value="'+url+'" />';
	    html += '<param name="allowFullScreen" value="true" />';
	    html += '<param name="allowScriptAccess" value="always" />';
	    html += '<param name="quality" value="high" />';
	    html += '<param name="wmode" value="'+wmode+'" />';
	    html += '<param name="flashvars" value="'+vars+'" />';
	    html += '<embed type="application/x-shockwave-flash" ';
	    html += 'width="'+width+'" ';
	    html += 'height="'+height+'" ';
	    html += 'name="'+id+'" ';
	    html += 'src="'+url+'" ';
	    html += 'allowfullscreen="true" ';
	    html += 'allowscriptaccess="always" ';
	    html += 'quality="high" ';
	    html += 'wmode="'+wmode+'" ';
	    html += 'flashvars="'+vars+'"'
	    html += '></embed>';
	    html += '</object>';
	    return html;
	};
	/**
	 * 注册订阅
	 * @type {Function}
	 * 推送：ONEMAP.C.publisher.publish(options,'moduleName::type');
	 * 订阅：ONEMAP.C.publisher.subscribe(layoutResize,'sideBarLayoutChange');
	 */
	function subscribe(){}

	/**
	 * 取消订阅
	 * @type {Function}
	 * 取消订阅：ONEMAP.C.publisher.unSubscribe(layoutResize,'sideBarLayoutChange');
	 */
	function unSubscribe(){}

	/**
	 * 模块移除
	 * @return {[type]} [description]
	 */
	function remove(){

	    //取消订阅
	    unSubscribe();
	}


	return ONEMAP.M.gcmsShowInfos = {
		init:init,
		showImage:showImage,
		showVideo:showVideo,
		showAudio:showAudio
	}
})


/**
 * 模块调用方法
 */
//add
//ONEMAP.M.gcmsShowInfos.init({
//	action:'add',
//	data:data
//})
//
//ONEMAP.M.gcmsShowInfos.init({
//	action:'remove',   getMarkerInfos
//	guid:guid
//})
//
//ONEMAP.M.gcmsShowInfos.init({
//	action:'removeAll'
//})
//
//ONEMAP.M.gcmsShowInfos.init({
//	action:'getMarkerInfos'
//	guid:'all'
//})
//
//
//
//{
//    "updatetime":1512732052000,
//    "gcms_secret_level":0,
//    "gcms_comment":"[{\"remark\": \"1\", \"auditor\": \"map_super_user\", \"time\": 1512972448364}, {\"remark\": \"1\", \"auditor\": \"map_super_user\", \"time\": 1512972098504}, {\"remark\": \"1\", \"auditor\": \"map_super_user\", \"time\": 1512971452320}]",
//    "gcms_publisher":"14",
//    "gcms_publish_time":1512972501575,
//    "gcms_title":"图像",
//    "gcms_status":3,
//    "location_image":"{\"type\":\"FeatureCollection\",\"features\":[{\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[119.31152344,34.57895241]},\"properties\":{\"type\":\"PictureLocation\",\"name\":\"连云港\",\"popupContent\":\"\",\"style\":{\"iconUrl\":\"/common/c1046a12-676d-11e7-91c9-0242ac110021.png\",\"iconSize\":[28,32],\"iconAnchor\":[14,16]},\"file\":\"/content/record_picture/133/a686d740-de39-11e7-b5c0-0242ac110016.jpg\"}}]}",
//    "description":"此为添加图像示例",
//    "gcms_create_time":1512733166995,
//    "gcms_auditor_name":"map_super_user",
//    "gcms_auditor":"14",
//    "gcms_id":133,
//    "gcms_toptime":0,
//    "gcms_audit_time":1512972499776,
//    "gcms_publisher_name":"map_super_user",
//    "gcms_istop":0,
//    "gcms_creator":"1535",
//    "gcms_read_number":188,
//    "gcms_creator_name":"867106023867663@xdc.org",
//    "gcms_change_time":1512972494784,
//    "model":"record_picture",
//    "table":"record_picture",
//    "tablename":"图片"
//}