CesiumJS中的标签是用来表示各种对象的文本标签,例如地名、标记、标绘线等等。标签可以用于标识位置、信息、状态等等。 标签可以设置在地球表面、三维模型上、屏幕空间中等多种情况下。
要创建一个标签,首先需要指定标签要显示在哪个位置。这个位置可以是地球表面上某个点的经纬度,也可以是三维模型上某个面的中心点坐标,或者是屏幕空间坐标系中的点。接下来就是设置标签的属性,例如文本内容、字体大小、颜色、边框等等。
以下是一个创建标签的示例:
// 在地球表面上创建标签
var label = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(121.5236, 31.0630),
label: {
text: '上海',
font: '18px sans-serif',
pixelOffset: new Cesium.Cartesian2(0, -30)
}
});
// 在三维模型上创建标签
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(121.5236, 31.0630),
model: {
uri: 'static/models/CesiumAir/Cesium_Air.glb',
minimumPixelSize: 128
},
label: {
text: '飞机',
font: '18px sans-serif',
pixelOffset: new Cesium.Cartesian2(0, -30)
}
});
// 在屏幕空间中创建标签
var screenSpacePosition = new Cesium.Cartesian2(100, 100);
var label = viewer.entities.add({
position: screenSpacePosition,
label: {
text: '一些信息',
font: '18px sans-serif',
pixelOffset: new Cesium.Cartesian2(0, -30)
}
});
以上示例分别创建了一个在地球表面上、一个在三维模型上和一个在屏幕空间中的标签,并设置了它们的文本内容、字体、偏移量等属性。
创建标签时可以设置的属性包括:
text
: 标签的文本内容font
: 标签的字体大小和样式fillColor
: 标签的填充颜色outlineColor
: 标签的边框颜色outlineWidth
: 标签的边框宽度pixelOffset
: 标签相对于位置的像素偏移量eyeOffset
: 标签在视线方向上的偏移量heightReference
: 指定标签在什么高度上显示(默认是相对于地球表面)horizontalOrigin
: 标签的水平对齐方式verticalOrigin
: 标签的垂直对齐方式showBackground
: 是否显示标签的背景backgroundColor
: 标签背景的颜色backgroundPadding
: 标签背景的填充间隙上述属性的详细说明可以参考Cesium文档。
标签可以通过设置不同的属性来实现不同的样式效果。例如,设置fillColor
和outlineWidth
可以让标签有填充和描边效果:
var label = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(121.5236, 31.0630),
label: {
text: '上海',
font: '18px sans-serif',
pixelOffset: new Cesium.Cartesian2(0, -30),
fillColor: Cesium.Color.YELLOW,
outlineWidth: 2
}
});
标签的背景可以通过设置showBackground
、backgroundColor
和backgroundPadding
来实现:
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(120.8317, 31.3521),
label: {
text: '苏州',
showBackground: true,
backgroundColor: Cesium.Color.YELLOW.withAlpha(0.5),
backgroundPadding: new Cesium.Cartesian2(10, 5)
}
});
标签的对齐方式可以通过设置horizontalOrigin
和verticalOrigin
来实现:
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(113.2644, 23.1291),
label: {
text: '深圳',
font: '18px sans-serif',
pixelOffset: new Cesium.Cartesian2(0, -30),
horizontalOrigin: Cesium.HorizontalOrigin.RIGHT,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
}
});
CesiumJS中的标签是一个非常方便的工具,可以用来标识各种对象的位置和信息。通过设置不同的属性可以实现不同的样式效果。在实际项目中,标签通常会和其他的图形元素一起使用,来构建更加丰富和复杂的场景。