Cesium 学习记录（5）一次刷新出多个自定义气泡窗口

但是有时候可能会需要打开一个页面就自动出来好多气泡（气泡中可能展示一些实时信息），而不是点击一个出现一个。

我的方法比较笨，求轻喷，欢迎大神有更好的方法讨论指教。o(^▽^)o

1、CSS 

CSS和上一节一样，没有什么改变

@CHARSET "UTF-8";



/*leaflet风格气泡窗口样式模板*/




.leaflet-popup {



    position: absolute;



    text-align: center;



}




.leaflet-popup-close-button {



    position: absolute;



    top: 0;



    right: 0;



    padding: 4px 4px 0 0;



    text-align: center;



    width: 18px;



    height: 14px;



    font: 16px/14px Tahoma, Verdana, sans-serif;



    color: #c3c3c3;



    text-decoration: none;



    font-weight: bold;



    background: transparent;



}




.leaflet-popup-content-wrapper {



    text-align: center;



    max-height: 200px;



    overflow-y: auto;



    background: white;



    box-shadow: 0 3px 14px rgba(0,0,0,0.4);



    padding: 1px;



    text-align: left;



    border-radius: 12px;



}




.leaflet-popup-content {



    margin: 13px 19px;



    line-height: 1.4;



}




.leaflet-popup-tip-container {



    margin: 0 auto;



    width: 200px;



    height: 100px;



    position: relative;



    overflow: hidden;



}




.leaflet-popup-tip {



    background: white;



    box-shadow: 0 3px 14px rgba(0,0,0,0.4);



    width: 17px;



    height: 17px;



    padding: 1px;



    margin: -10px auto 0;



    -webkit-transform: rotate(45deg);



    -moz-transform: rotate(45deg);



    -ms-transform: rotate(45deg);



    -o-transform: rotate(45deg);



    transform: rotate(45deg);



}



 



/*按钮样式*/




.add-button{



	



}

动态生成DIV，因为有多个DIV，所以每一个名字、ID都要都不一样

我的这一段代码是放在ajax请求后台返回数据成功后的$.each循环中的，代码中的“s”代表的就是每次循环动态添加的实体，所以每一个“s”的id都是不一样的。

需要注意的是，由于变量名不能使用字符串动态拼接，所以可以用window[变量名]来实现字符串解析，达到动态变量名的效果。

除了div变量名不同，同样气泡窗口的trackPopUp等id名也需要加上唯一的s.id，否则会出现id名相同添加content时内容都一样，或者是关闭时一起关闭的情况。所以要得到完全不同的DIV必须id名也都唯一。

window[newDiv]

var newDiv = "div"+s.id;   //生成函数名




			window[newDiv]= '<div id="trackPopUp-'+s.id+'"  style="display:block;">'+



		     '<div id="trackPopUpContent-'+s.id+'" class="leaflet-popup" style="top:5px;left:0;">'+



		       '<a id="leaflet-popup-close-button-'+s.id+'" class="leaflet-popup-close-button" href="#">×</a>'+



		       '<div class="leaflet-popup-content-wrapper">'+



		         '<div id="trackPopUpLink-'+s.id+'" class="leaflet-popup-content" style="max-width: 300px;"></div>'+



		       '</div>'+



		       '<div class="leaflet-popup-tip-container">'+



		         '<div class="leaflet-popup-tip"></div>'+



		       '</div>'+



		     '</div>'+



		   '</div>';



		$("#cesiumContainer").append(window[newDiv]);



	    var info = 



		    	 '<table><tbody><tr><th style="color:black;">站名</th><td><input style="color:black;" value='+station[id].stadiacode+'></td></tr>'+



		    	 '<tr><th style="color:black;">经度</th><td><input id="x" style="color:black;" value='+(x_k*station[id].x+x_off).toFixed(6)+'></td></tr>'+



		    	 '<tr><th style="color:black;">纬度</th><td><input id="y" style="color:black;" value='+(y_k*station[id].y+y_off).toFixed(6)+'></td></tr>'+



		 '</tbody></table>'	;



       var obj = {station:s,position:s._position._value,content:info};



       autoInfoWindow(obj);

接下来是autoInfoWindow函数的写法

将ID的名称都加上了唯一的s,id来进行字符串拼接

 var trackPopUpLink="#trackPopUpLink-"+obj.station.id;
 var trackPopUp="#trackPopUp-"+obj.station.id;
  var trackPopUpContent="#trackPopUpContent-"+obj.station.id;
  var close="#leaflet-popup-close-button-"+obj.station.id;

function autoInfoWindow(obj) {



	



            var trackPopUpLink="#trackPopUpLink-"+obj.station.id;



            var trackPopUp="#trackPopUp-"+obj.station.id;



            var trackPopUpContent="#trackPopUpContent-"+obj.station.id;



            var close="#leaflet-popup-close-button-"+obj.station.id;



            



            $(".cesium-selection-wrapper").show();



            $(trackPopUpLink).empty();



            $(trackPopUpLink).append(obj.content);



     		function positionPopUp (c) {



     			var x = c.x - ($(trackPopUpContent).width()) / 2;



     			var y = c.y - ($(trackPopUpContent).height());



     			$(trackPopUpContent).css('transform', 'translate3d(' + x + 'px, ' + y + 'px, 0)');



     		}



     		var c = new Cesium.Cartesian2(obj.position.x, obj.position.y);



     		$(trackPopUp).show();



     		positionPopUp(c); 



			//动态变量名




     		var stationHandler = obj.station.id;   //生成函数名




     	    window[stationHandler] = viewer.scene.postRender.addEventListener(function () {



     	    var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, obj.station._position._value);



     			// If things moved, move the




						// popUp too




     			if ((c.x !== changedC.x) || (c.y !== changedC.y)) {



     				positionPopUp(changedC);



     				c = changedC;



     			}



     		});



     		// PopUp close button event handler




     	   $(close).click(function() {



     			$(trackPopUp).hide();



     			$(trackPopUpLink).empty();



     			$(".cesium-selection-wrapper").hide();



     			window[stationHandler].call();



     			return false;



     		});	            				



         }

这样一进入页面就可以看到很多个DIV了，每一个信息都是根据自己对应的entity获取的，关闭按钮也是一一对应的。

效果如下：