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.LEFTCesium.HorizontalOrigin.CENTER是两种常用的对齐方式。

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

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

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

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值