cesium label文字左对齐
时间: 2023-08-11 16:05:42 浏览: 357
80.(cesium篇)cesium动态纹理-文字.zip
5星 · 资源好评率100%
要让Cesium Label的文字左对齐,可以使用CSS的text-align属性来实现。具体做法如下:
1. 在创建Label时,设置其style属性,添加text-align:left样式,例如:
```
var label = new Cesium.LabelGraphics({
text: 'This is a left-aligned label',
style: new Cesium.LabelStyle({
font: '14px Helvetica',
textFill: Cesium.Color.WHITE,
backgroundColor: Cesium.Color.BLUE,
backgroundPadding: new Cesium.Cartesian2(7, 5),
textOutlineWidth: 2,
textOutlineColor: Cesium.Color.BLACK,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
pixelOffset: new Cesium.Cartesian2(10, -20),
eyeOffset: new Cesium.Cartesian3(0.0, 0.0, -100.0),
scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.1),
translucencyByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.0),
pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.0)
}),
show: true,
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 0.0)
});
label.style.textAlign = 'left';
```
2. 如果已经创建了Label,可以通过获取其对应的DOM元素,然后设置其style属性来实现左对齐,例如:
```
var label = viewer.entities.add({
label: {
text: 'This is a center-aligned label',
font: '14px Helvetica',
fillColor: Cesium.Color.WHITE,
backgroundColor: Cesium.Color.BLUE,
backgroundPadding: new Cesium.Cartesian2(7, 5),
outlineWidth: 2,
outlineColor: Cesium.Color.BLACK,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
pixelOffset: new Cesium.Cartesian2(0, -20),
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 0.0),
show: true
}
});
var labelElement = label._labelRenderer._element;
labelElement.style.textAlign = 'left';
```
阅读全文