Cesium.js实现显示点位对应的自定义信息弹窗(数据面板)
    		       		warning:
    		            这篇文章距离上次修改已过452天,其中的内容可能已经有所变动。
    		        
        		                
                在Cesium.js中,你可以使用Entity来表示一个点,并通过description属性为其添加自定义的HTML信息。然后,通过Viewer的infoBox来控制描述信息的显示。以下是一个简单的示例代码:
// 假设你已经创建了Cesium.Viewer实例叫做viewer
 
// 创建一个点实体
var entity = viewer.entities.add({
    name: '自定义点位',
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), // 纬度, 经度
    point: {
        pixelSize: 10,
        color: Cesium.Color.RED
    },
    description: '<div style="color: black;"><strong>自定义信息</strong><p>这是附加在点上的自定义信息弹窗</p></div>' // 自定义HTML信息
});
 
// 当点击实体时,显示描述信息
viewer.screenSpaceEventHandler.setInputAction(function (click) {
    if (Cesium.defined(entity)) {
        viewer.selectedEntity = entity;
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);在上面的代码中,我们创建了一个实体,并通过description属性为其添加了自定义的HTML信息。当用户点击地图上的点时,Cesium会自动显示这个描述信息。
请确保你的Cesium.js库已经正确加载到你的项目中,并且你有一个初始化好的Cesium Viewer实例。
评论已关闭