jsgkj/gkjsjy/trunk/WebContent/static/editgisinfo/gis.anchored.js

var gis = gis || {};
gis.anchored = function() {
	
};

var framedCloud;

gis.anchored.popup = function(lonlat,data){
	//alert(JSON.stringify(data));
	//alert(gis.anchored.tohtml(data));
	/*
	data={popupBorder:"1px solid #A5AAB4",width:320,height:155,title:"专题",
			style:["width:30%","text-align:center;"],
			data:[['港口名称','南京港'],['港区个数','2'],['锚地个数','2'],['作业区个数','16']]};
	*/
	var chicken=$('#chicken');
	chicken.remove();
	
	data=gis.anchored.portinfo({portName:'南京港',portNumber:2,anchorageNumber:2,chanceNumber:16})
    var popup = new SuperMap.Popup.Anchored(
            "chicken",
            lonlat,
            new SuperMap.Size(data.width,data.height),
            gis.anchored.tohtml(data),
            null,
            true,
            null
    );

    popup.setBorder(data.popupBorder||"0px solid #A5AAB4");
    //popup.updateSize();
    //chicken_contentDiv
    popup.extdataheight=data.height;
    
    return popup;
}

/*
 * 弹出框显示，并且控制显示位置
 */
gis.anchored.popupHtml = function(lonlat,data,toHtml,e){
	var chicken=$('#chicken');
	chicken.remove();
	var popup;
	if(e){
		//console.log("event",e);
		
		//e.clientX,e.clientY
		if(gis.script.isNum(e.clientX)&&gis.script.isNum(e.clientY)){
			//alert(treedivWidth);
			var twidth=treedivWidth||0;
			var clientx=e.clientX-twidth;
			var clienty=e.clientY;
			
			//alert((clientx+data.width+25)+"=="+$("#bgrounddiv").width())
			
			if((clienty+data.height+25)>$("#bgrounddiv").height()){
				//alert((clienty+data.height)+"--"+$("#bgrounddiv").height())
				if((clientx+data.width+25)>$("#bgrounddiv").width()){
					lonlat=   map.getLonLatFromPixel(new SuperMap.Pixel(clientx-(data.width+32),clienty-(data.height)));
					toHtml=toHtml+'<div id="chicken_zxj" class="smPopupzxjBox" style="width: 20px; height: 24px; position: absolute;right:-19px;top:'+(data.height-28)+'px;"></div>';
				}else{
					lonlat=   map.getLonLatFromPixel(new SuperMap.Pixel(clientx+20,clienty-(data.height)));
					toHtml=toHtml+'<div id="chicken_yxj" class="smPopupyxjBox" style="width: 20px; height: 24px; position: absolute;left:-19px;top:'+(data.height-28)+'px;"></div>';					
				}
			
			}else{
				if((clientx+data.width+25)>$("#bgrounddiv").width()){
					lonlat=   map.getLonLatFromPixel(new SuperMap.Pixel(clientx-(data.width+32),clienty-28));
					toHtml=toHtml+'<div id="chicken_zsj" class="smPopupzsjBox" style="width: 20px; height: 24px; position: absolute;right:-19px;top:28px;"></div>';
				}else{
					lonlat=   map.getLonLatFromPixel(new SuperMap.Pixel(clientx+20,clienty-28));
					toHtml=toHtml+'<div id="chicken_ysj" class="smPopupysjBox" style="width: 20px; height: 24px; position: absolute;left:-19px;top:28px;"></div>';					
				}
			
			}
			
		    popup = new SuperMap.Popup(
		            "chicken",
		            lonlat,
		            new SuperMap.Size(data.width,data.height),
		            toHtml,
		            true,
		            null

		    );				
			
			
			/*
			lonlat=   map.getLonLatFromPixel(new SuperMap.Pixel(e.clientX-twidth+20,e.clientY-28));
			toHtml=toHtml+'<div id="chicken_ysj" class="smPopupysjBox" style="width: 20px; height: 24px; position: absolute;left:-20px;top: 28px;"></div>'
		    var popup = new SuperMap.Popup(
		            "chicken",
		            lonlat,
		            new SuperMap.Size(data.width,data.height),
		            toHtml,
		            true,
		            null

		    );
		    */
			
		}
		
	}/*else{
	    popup = new SuperMap.Popup.Anchored(
	            "chicken",
	            lonlat,
	            new SuperMap.Size(data.width,data.height),
	            toHtml,
	            null,
	            true,
	            null
	    );		
	}*/
	
	if(!popup){
	    popup = new SuperMap.Popup.Anchored(
	            "chicken",
	            lonlat,
	            new SuperMap.Size(data.width,data.height),
	            toHtml,
	            null,
	            true,
	            null
	    );		
	}
	
    
    popup.setBorder(data.popupBorder||"1px solid #A5AAB4");
    //popup.updateSize();
    //chicken_contentDiv
    popup.extdataheight=data.height;
    
    return popup;
}

/*
 * 根据参数设置弹出框，以及显示数据的（表格）样式
 */
gis.anchored.addPopup = function(map,popup,feature){
    map.addPopup(popup);
    //$('#chicken_close').css("display","none");

    var contentDiv=$('#chicken_contentDiv');
    //alert($('#chicken_GroupDiv').width());//overflow:visible
    contentDiv.css("overflow","visible");
    //contentDiv.css("position","absolute");
    //contentDiv.css("border","1px solid #A5AAB4");
    contentDiv.css("width",$('#chicken_GroupDiv').width());//alert(contentDiv.width());
    //alert(contentDiv.width()+"**"+$('#chicken_GroupDiv').width());

    
    
    var tableDiv=$('.tabledivClass');
    //alert($('.titleClass').height());
    //tableDiv.css("height",tableDiv.height());
    tableDiv.css("height",popup.extdataheight-26);
    //tableDiv.css("width",contentDiv.width());
    /*
    if($.support&&$.support.leadingWhitespace&&contentDiv.width()==$('#chicken_GroupDiv').width()){
   	 	contentDiv.css("width",$('#chicken_GroupDiv').width()-12);
   	 	//tableDiv.css("height",tableDiv.height()-26);
    }
    */

    
    $('.smPopupCloseBox').css("top",5);
    $('.smPopupCloseBox').css("right",5);
    
    /*
    $.each($(".altrowstable"), function(i,val){      
    	gis.anchored.tableBeautify.call(this,"#fff","#F5F5F5","#FFFFCC")
	}); 
	*/ 
    
    if(feature
    		&&gis.script.isNotBlank(feature.attributes.labelfieldid)){
    	var titleName=feature.attributes[feature.attributes.labelfieldid];
    	var titleClassDiv=$('.titleClass');
    	if(titleClassDiv&&!gis.script.isBlank(titleName)){
    		
    		titleClassDiv.html(gis.anchored.titleEllipsis(titleName,20));
    	}
    }
    
    /*
    if(feature
    		&&gis.script.isNotBlank(feature.attributes.labelfieldid)
    		&&gis.script.isNotBlank(feature.attributes[feature.attributes.labelfieldid])){
    	//console.log("feature",feature);
        var titleClassDiv=$('.titleClass');
        titleClassDiv.html(feature.attributes[feature.attributes.labelfieldid]); 

    }
	*/
    
    $.each($(".altrowstable"), function(i,val){      
    	gis.anchored.tableBeautify2.call(this);
	});
}

gis.anchored.titleEllipsis = function(tname,tlength){
	try{
		if(!gis.script.isBlank(tname)&&gis.script.isNum(tlength)&&tname.length
				&&tlength>0&&tname.length>tlength){
			tname=tname.substring(0,tlength)+'...';
		}		
	}catch(e){}

	return tname;
}

/*
 * 
 */
gis.anchored.addFramedCloud = function(lonlat,size,contentHTML){
	if(framedCloud){
		try{
			framedCloud.hide();
			framedCloud.destroy();
        }
        catch(e){}

	}
	//初始化FramedCloud类
	framedCloud = new SuperMap.Popup.FramedCloud(
	    "chicken", 
	    lonlat,
	    size,
		contentHTML,
		null,
        true,
		null,
        true
	);
	map.addPopup(framedCloud);
	
    var contentDiv=$('#chicken_contentDiv');
    //alert($('#chicken_GroupDiv').width());//overflow:visible
    contentDiv.css("overflow","visible");
    //contentDiv.css("position","absolute");
    //contentDiv.css("border","1px solid #A5AAB4");
    contentDiv.css("width",$('#chicken_GroupDiv').width());//alert(contentDiv.width());
    //alert(contentDiv.width()+"**"+$('#chicken_GroupDiv').width());
    
    /*
    var tabledivClass=$('.tabledivClass');
    tabledivClass.css("width",tabledivClass.width()-1);
    tabledivClass.css("height",222);
    */
    //var tableDiv=$('.titleClass');
    //tableDiv.css("width",tableDiv.width()-10);
    var smFramedCloudPopupContent=$('.smFramedCloudPopupContent');
    smFramedCloudPopupContent.css("padding","0");
    
    $('.smPopupCloseBox').css("top",4);
    $('.smPopupCloseBox').css("right",5);
}

/*
 * 显示数据的（表格）样式
 */
gis.anchored.tableBeautify = function(oddColor,evenColor,ouseoverColor){
	//alert(this);return;
	if(this){
		//var tr=this.getElementsByTagName("tr");
		for(var i=0;i<this.rows.length;i++){
			var temptr=this.rows[i];
			if(i%2==0){
				temptr.style.backgroundColor=oddColor;
				/*
				if(i==0){
					continue;
				}
				*/
				//鼠标离开
				temptr.onmouseout=function(){
					this.style.backgroundColor=oddColor;
				}
			}else{
				temptr.style.backgroundColor=evenColor;
				//鼠标离开
				temptr.onmouseout=function(){
					this.style.backgroundColor=evenColor;
				}				
			}

			//鼠标进入
			temptr.onmouseover=function(){
				//alert(this.style.backgroundColor+"-->"+ouseoverColor);
				this.style.backgroundColor=ouseoverColor;
			}
			
			/*
			temptr.onclick=function(){
				//alert(this.sectionRowIndex);
			}
			*/
			var tagName_td=temptr.getElementsByTagName("td");
			if(tagName_td){
				var presentColsAmount=temptr.getElementsByTagName("td").length;
				if(presentColsAmount&&presentColsAmount>=4){
					for(var cc=1;cc<presentColsAmount;cc++){
						//alert(tagName_td[cc]);
						//$(tagName_td[cc]).css("color","red");
						$(tagName_td[cc]).css("border-left","1px solid #A5AAB4");
					}
				}
			}
			
		}
	}
}

/*
 * 显示数据的（表格）样式2
 */
gis.anchored.tableBeautify2 = function(){
	//alert(this);return;
	if(this){
		//var tr=this.getElementsByTagName("tr");
		//$(this).css("frame","void");
		for(var i=0;i<this.rows.length;i++){
			var temptr=this.rows[i];
			var tagName_td=temptr.getElementsByTagName("td");
			if(tagName_td){
				var presentColsAmount=temptr.getElementsByTagName("td").length;
				if(presentColsAmount){
					for(var cc=0;cc<presentColsAmount;cc++){
						
						if(cc==0){
							$(tagName_td[cc]).css("border-left","0");
						}
						if(cc==presentColsAmount-1){
							$(tagName_td[cc]).css("border-right","0");
						}
						if(i==this.rows.length-1){
							$(tagName_td[cc]).css("border-bottom","0");
						}
						if(cc%2==0){
							//temptr.style.backgroundColor=oddColor;
							//
							//alert($(tagName_td[cc]).html());
							$(tagName_td[cc]).css("backgroundColor","#e6eff9");
							//$(tagName_td[cc]).css("text-align","right");
							$(tagName_td[cc]).css("color","#185f8a");
							//    text-align: right;//color: #185f8a;
							if(gis.script.isNotBlank($(tagName_td[cc]).html())){
								$(tagName_td[cc]).html($(tagName_td[cc]).html()+"：");
							}
							
						}
						$(tagName_td[cc]).css("text-align","left");
					}
				}
			}
		}
	}
}

gis.anchored.tohtml = function(data){
	//alert(JSON.stringify(data));
	//$("<div id='popupWin'></div>").addClass("popupWindow").appendTo($("#result"));
	var html=new Array();
	var nvlval='';
	if(data){
		if(data.title){
			
			html.push("<div class='titleClass'>");
			html.push(data.title);
			html.push("</div>");
		}
		
		if(data.data){
			//html.push("<div class='tableClass' style='width: 335px; height: 115px; position: relative;border:1px solid #A5AAB4;overflow:auto;'>");
			html.push("<div class='tabledivClass'>");
			//html.push(data.title);html.push("<br>");
			html.push("<table class='altrowstable'>");
			for(var i=0;i<data.data.length;i++){
				var o=data.data[i];
				
				html.push("<tr>");
				for(var j=0;j<o.length;j++){
					html.push("<td style='"+(data.style[j]||nvlval)+"'>");
					html.push(o[j]);
					html.push("</td>");
				}
				html.push("</tr>");
			}
			html.push("</table>");
			html.push("</div>");
		}	
			
		
	}
	//alert(html.join(""));
	return html.join("");
}

gis.anchored.portinfo = function(data){
	var obj={popupBorder:"1px solid #A5AAB4",width:320,height:152,title:"港口信息",
		style:["width:30%","text-align:center;"],
		data:[['港口名称',data.portName],['港区个数',data.portNumber],['锚地个数',data.anchorageNumber],['作业区个数',data.chanceNumber]]};
	
	
	return obj;
}

gis.anchored.nvlinfo = function(data){
	var obj={popupBorder:"1px solid #A5AAB4",width:320,height:155,title:data.poptitle,
		style:["width:30%","text-align:center;"],
		data:[['名称',data.portName]]};
	
	
	return obj;
}

$(document).ready(function() {
	
});