mars3d在写label标签的时候，会出现label展示位置和自己定点位置不同

1、代码

const demo = (map, graphicLayer, label) => {
    const graphic = new mars3d.graphic.DivGraphic({
        position: label.geometry.coordinates,
        stopPropagation: true,
        attr:label.geometry,
        style: {
            html:
                `<div class="park-car-label">
            <div class="title">${label.properties.name}</div>
        </div>
            `,
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition( 0, 3999),
            label: {
                backgroundColor: '#000',
                color: "#fff"
            }
        },
    })
    graphic.on(mars3d.EventType.click, function (event) {
        if (event.graphic.attr.id) {
            dataStatus.setDialog({
                status: true,
                type: dialogTypeEnum.park_car,
                condition: {
                    id: event.graphic.attr.id.toString(),
                    parkCar: label.properties
                },
            })
        } else {
            ElMessage({
                showClose: true,
                message: '未关联',
                type: 'warning',
                offset: 50,
            })
        }
        map.flyToGraphic(graphic, {
            // radius: 300,
            // heading: 359,
            // pitch: -47.2,
            // duration: 2,
        })
    })
    graphicLayer.addGraphic(graphic)
}

2、注意这个 horizontalOrigin:

如果是属性值是 Cesium.HorizontalOrigin.CENTER

则是

如果属性值是Cesium.HorizontalOrigin.LEFT

则是正常现象

3、原因是

在Cesium中，Cesium.HorizontalOrigin是一个枚举类型，用于指定水平方向的对齐方式。其中，Cesium.HorizontalOrigin.LEFT和Cesium.HorizontalOrigin.CENTER是两种常用的对齐方式。

Cesium.HorizontalOrigin.LEFT表示水平对齐方式为左对齐。当使用此对齐方式时，对象（如标签、图片等）的位置将以其左侧边缘作为参考点进行对齐。换句话说，对象将以其左侧边缘为基准来确定其在水平方向上的位置。

Cesium.HorizontalOrigin.CENTER表示水平对齐方式为居中对齐。当使用此对齐方式时，对象的位置将以其水平中心点作为参考点进行对齐。也就是说，对象将以其水平中心点为基准来确定其在水平方向上的位置。

这两种对齐方式的区别在于参考点的选择。Cesium.HorizontalOrigin.LEFT选择左侧边缘作为参考点，而Cesium.HorizontalOrigin.CENTER选择水平中心点作为参考点。具体选择哪种对齐方式取决于你想要实现的效果和需求。

例如，如果你希望一个标签或图像的左侧边缘与某个位置对齐，可以使用Cesium.HorizontalOrigin.LEFT。而如果你想要标签或图像水平居中对齐，可以使用Cesium.HorizontalOrigin.CENTER。

通过使用不同的水平对齐方式，可以在Cesium中灵活地控制对象在水平方向上的位置和对齐方式。

mars3d在写label标签的时候，会出现label展示位置和自己定点位置不同

猜你喜欢