展示示例图：

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: '

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';

}

}

}

}

});