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

转载：https://blog.csdn.net/zlx312/article/details/79825111

上一篇文章——Cesium 学习记录（4）自定义气泡窗口 中讲述了如何自定义leaflet风格气泡窗口，并且点击物体后根据物体id获取需要的信息填充进气泡窗口中。

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

我的方法比较笨，求轻喷，欢迎大神有更好的方法讨论指教。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{
	
}

2.JS

动态生成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_kstation[id].x+x_off).toFixed(6)+’></td></tr>’+
		    	 ‘<tr><th style=“color:black;”>纬度</th><td><input id=“y” style=“color:black;” value=’+(y_kstation[id].y+y_off).toFixed(6)+’></td></tr>’+
		 ‘</tbody></table>’	;
       var obj = {station?,position?._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();
            KaTeX parse error: Expected '}', got 'EOF' at end of input: …an> 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©; 
			//动态变量名
     		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获取的，关闭按钮也是一一对应的。

效果如下：