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:
                `
${label.properties.name}
`, 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

则是mars3d在写label标签的时候,会出现label展示位置和自己定点位置不同_第1张图片

 如果属性值是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中灵活地控制对象在水平方向上的位置和对齐方式。

你可能感兴趣的:(Mars3d,前端,3d)