转载: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获取的,关闭按钮也是一一对应的。
效果如下: