Day5 Cesium可视化利器： Label 和 Billboard 2025-08-19 Cesium基础开发教程 無 # Day5 Cesium可视化利器： Label 和 Billboard > 在三维视图中，精确美观的标记是展示的关键 在cesium构建的三维地理场景中，label和billboard是两种常用的标记方式，它们分别用于展示文本和图标。 ## Label 和 Billboard 的区别 - Label：用于展示文本，可以设置文本内容、大小、颜色、位置等属性，支持自动换行和旋转。 - Billboard：用于展示图标，可以设置图标的大小、位置、颜色等属性，支持旋转和缩放。 ## Label 的使用 ```HTNL <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cesium.com/downloads/cesiumjs/releases/1.132/Build/Cesium/Cesium.js"></script> <link href="https://cesium.com/downloads/cesiumjs/releases/1.132/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> <title>Cesium Earth</title> <style> /* 重置基本样式 */ html, body, #earth { width: 100%; height: 100%; margin: 0; padding: 0; } .cesium-widget-credits { display: none !important; } </style> </head> <body> <div id="earth"></div> <script> const viewer = new Cesium.Viewer('earth', { animation: false,// 去除左下角的动画控件 geocoder: false,// 去除右上角的搜索控件 cesiumWidget: false,// 去除右上角的版权信息 fullscreenButton: false,// 去除右上角的全屏控件 homeButton: false,// 去除右上角的主页控件 sceneModePicker: false,// 去除右上角的场景模式控件 timeline: false,// 去除下方的时间线控件 navigationHelpButton: false,// 去除右上角的帮助控件 baseLayerPicker: false, // 去除默认的影像图层 }); const entity = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(116.39, 39.91,200), label: { text: "北京故宫", font: "24px sans-serif", fillColor: Cesium.Color.WHITE, outlineColor: Cesium.Color.BLACK, outlineWidth: 4, style: Cesium.LabelStyle.FILL_AND_OUTLINE, verticalOrigin: Cesium.VerticalOrigin.TOP, pixelOffset: new Cesium.Cartesian2(0, -30) } }); viewer.zoomTo(entity); </script> </body> </html> ``` ### 参数说明 - position：标记的位置，可以是经纬度坐标，也可以是Cartesian3坐标。 - label：标记的文本内容，可以设置文本内容、大小、颜色、位置等属性。 - text：文本内容。 - font：字体大小和样式。 - fillColor：填充颜色。 - outlineColor：描边颜色。 - outlineWidth：描边宽度。 - style：文本样式，可以是Cesium.LabelStyle.FILL、Cesium.LabelStyle.OUTLINE、Cesium.LabelStyle.FILL_AND_OUTLINE。 - verticalOrigin：垂直对齐方式，可以是Cesium.VerticalOrigin.BOTTOM、Cesium.VerticalOrigin.CENTER、Cesium.VerticalOrigin.TOP。 - pixelOffset：像素偏移量，可以设置x和y方向的偏移量。  ## Billboard 的使用 ```javascript const entity = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 200), billboard: { image: "./商店-01.png", width: 50, height: 50, scale: 0.5 } }); ``` ### 参数说明 - position：标记的位置，可以是经纬度坐标，也可以是Cartesian3坐标。 - billboard：标记的图标内容，可以设置图标的大小、位置、颜色等属性。 - image：图标的URL地址。 - width：图标的宽度。 - height：图标的高度。 - scale：图标的缩放比例  ## Label 和 Billboard 的组合使用 ```javascript const entity = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 200), name: "北京故宫", // 实体的名称 label: { text: "北京故宫", font: "24px sans-serif", fillColor: Cesium.Color.WHITE, outlineColor: Cesium.Color.BLACK, outlineWidth: 4, style: Cesium.LabelStyle.FILL_AND_OUTLINE, verticalOrigin: Cesium.VerticalOrigin.TOP, pixelOffset: new Cesium.Cartesian2(0, -30) }, billboard: { image: "./商店-01.png", width: 50, height: 50, scale: 0.5, verticalOrigin: Cesium.VerticalOrigin.TOP, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1000) }, }); viewer.zoomTo(entity); ``` ### 效果展示  ### 解释代码 这里我们只创建了一个entity，但是同时设置了label和billboard，这样就可以在同一个位置上同时显示文本和图标。 position设置了标记的位置，name设置了实体的名称，label设置了文本的内容和样式，billboard设置了图标的内容和样式。 - label和billboard的verticalOrigin都设置为Cesium.VerticalOrigin.TOP，这样文本和图标就会在同一个位置上显示，并且文本会显示在图标的上方。 - billboard的distanceDisplayCondition设置了显示的距离范围，当相机距离标记的距离小于1000米时，图标才会显示出来。 - viewer.zoomTo(entity)设置了相机视角，将相机视角移动到标记的位置上。 #### Entity 的其他属性 - show：是否显示实体，默认为true。 - availability：实体的可用时间范围，可以设置一个时间段，在这个时间段内实体才会显示出来。 - description：实体的描述信息，可以设置一个HTML字符串，当鼠标悬停在实体上时，会显示这个描述信息。 ## 总结 - **如何在Cesium中创建一个标记** - **设置标记的文本内容和样式** - **设置标记的图标内容和样式** - **将文本和图标组合在一起显示** - **设置实体的其他属性** ## 任务尝试 尝试创建多个标记，并设置不同的文本和图标，实体的可用时间范围和描述信息。 ## 结束语 _恭喜你完成了这次学习，你已经基本了解了如何在Cesium中创建标记，并设置标记的文本和图标，以及实体的其他属性。希望这些知识能够帮助你更好地使用Cesium进行地理信息可视化。如果你有任何问题，欢迎随时向我提问。_ Loading content...
评论已关闭