Cesium.js实现显示点位对应的自定义信息弹窗(数据面板)
warning:
这篇文章距离上次修改已过203天,其中的内容可能已经有所变动。
在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实例。
评论已关闭