展示示例图：
Cesium自定义HTML弹窗
核心的实现思路部分：
(1)cesium 的点击事件 Cesium.ScreenSpaceEventType.LEFT_CLICK 监听左键单击鼠标事件获取当前位置坐标，然后根据当前笛卡尔坐标去确认气泡窗口div的显示位置；
(2)监听 cesium 的 postRender 每一帧变化的监听事件，该事件就是为了确认你在转动球体时，气泡只定位到当前位置，不会出现偏差，该事件每帧的移动时，重新对气泡进行重新定位，屏幕坐标到笛卡尔坐标的转换。
1.左键鼠标单击监听事件
//获取当前点击的位置坐标
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {
/* var windowPosition = viewer.camera.getPickRay(movement.position);
var cartesianCoordinates = viewer.scene.globe.pick(windowPosition, viewer.scene);
var cartoCoordinates = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesianCoordinates); */
var cartesian2 = viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
var carto2 = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian2);
latitude = carto2.latitude * 180 / Math.PI;
longitude = carto2.longitude * 180 / Math.PI;
//alert("纬度:"+latitude+","+"经度:"+longitude);
var cartesian = viewer.scene.pickPosition(movement.position);
//弹窗 参数
var paramObj = {
id: 'trackPopUpContent',
HTMLdiv: '
' +
'
纬度:' +
latitude + ',
经度:' + longitude + '
' +
'
',
Offset: {
x: 0,
y: 0
},
coordinate: cartesian, //笛卡尔坐标参数
lineStyle: {
Linewidth: 3,
Lineheight: 25,
Linebackground: '#409EFF'
},
CircleStyle: {
Circleradius: 8,
Circlecolor: '#409EFF'
},
heighthidenum: 1000, //高度隐藏值
}
//固定弹窗 位置
PopupCoordinatePositioning(paramObj);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
2.地图每一帧变化的监听事件
viewer.scene.postRender.addEventListener(function() { // 每一帧都去计算气泡的正确位置
if (Popups.length > 0) {
for (var i = 0; i < Popups.length; i++) {
var infoboxContainer = document.getElementById(Popups[i].PopupsID); //morphComplete
if (infoboxContainer != null) {
//var infoboxContainer = document.getElementById("bubble");//morphComplete
if (Popups[i].scenePosition) {
var canvasHeight = viewer.scene.canvas.height;
var windowPosition = new Cesium.Cartesian2();
Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, Popups[i].scenePosition, windowPosition);
infoboxContainer.style.bottom = (canvasHeight - windowPosition.y + Popups[i].paramObj.Offset.y) + 'px';
infoboxContainer.style.left = (windowPosition.x + -(infoboxContainer.scrollWidth / 2)) + 'px';
}
}
}
}
});
