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_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获取的，关闭按钮也是一一对应的。

效果如下：

上一篇文章——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_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获取的，关闭按钮也是一一对应的。

效果如下：