如何让四个Cesium Label只被认为是一个对象

Question

我创建了一个有 4 个标签的广告牌，因为我需要一个有 4 行的标签，就像这样：

现在我需要通过更改标签 pixelOffset 来拖动它。有没有办法让所有 4 个标签被视为一个标签并拖在一起？

这是我目前所拥有的，但是每一行都是单独移动的：

pointCollection = scene.primitives.add(new Cesium.BillboardCollection());
labelCollection = scene.primitives.add(new Cesium.LabelCollection());

pointCollection.add({
    position: pos,
    id: id+ 'point',
    image: pinBuilder.fromColor(Cesium.Color.SALMON, 48)
});

labelCollection.add({
    position: pos,
    id: id + 'label1',
    text: 'Linha1',
    font: '15px Helvetica',
    fillColor: Cesium.Color.WHITE,
    outlineColor: Cesium.Color.BLACK,
    style: Cesium.LabelStyle.FILL,
    pixelOffset: new Cesium.Cartesian2(-20, 37)
});
labelCollection.add({
    position: pos,
    id: id + 'label2',
    text: 'linha2',
    font: '15px Helvetica',
    fillColor: Cesium.Color.WHITE,
    outlineColor: Cesium.Color.BLACK,
    style: Cesium.LabelStyle.FILL,
    pixelOffset: new Cesium.Cartesian2(-20, 50)
});
labelCollection.add({
    position: pos,
    id: id + 'label3',
    text: 'linha3',
    font: '15px Helvetica',
    fillColor: Cesium.Color.WHITE,
    outlineColor: Cesium.Color.BLACK,
    style: Cesium.LabelStyle.FILL,
    pixelOffset: new Cesium.Cartesian2(-20, 65)
});
labelCollection.add({
    position: pos,
    id: id + 'label4',
    text: 'linha4',
    font: '15px Helvetica',
    fillColor: Cesium.Color.WHITE,
    outlineColor: Cesium.Color.BLACK,
    style: Cesium.LabelStyle.FILL,
    pixelOffset: new Cesium.Cartesian2(-20, 80)
});

var dragging = false;

handler.setInputAction(
    (click) => {
        pickedObject = scene.pick(click.position);
        console.log('teste', pickedObject);
        if (pickedObject && pickedObject.primitive instanceof Cesium.Label) {
            dragging = true;
            initialPositionX = click.position.x - diffX;
            initialPositionY = click.position.y - diffY;
            scene.screenSpaceCameraController.enableRotate = false;
            scene.screenSpaceCameraController.enableTranslate = false;
        }
    },
    Cesium.ScreenSpaceEventType.LEFT_DOWN
);

handler.setInputAction(
    (click) => {
        if (!dragging) return;
        console.log(pickedObject.primitive.pixelOffset);
        diffX = click.endPosition.x - initialPositionX;
        diffY = click.endPosition.y - initialPositionY;
        pickedObject.primitive.pixelOffset = <any>(new Cesium.Cartesian2(diffX, diffY));
    },
    Cesium.ScreenSpaceEventType.MOUSE_MOVE
);

handler.setInputAction(
    (click) => {
        dragging = false;
        scene.screenSpaceCameraController.enableRotate = true;
        scene.screenSpaceCameraController.enableTranslate = true;
    },
    Cesium.ScreenSpaceEventType.LEFT_UP
);

我还想要一些关于如何正确设置偏移量的建议，因为当我拖动一个标签，然后单击拖动另一个标签时，偏移量开始错误。

非常感谢！！

Answer 1

要同时移动多个标签，您需要按组跟踪标签。这样，当用户单击群组中的任何一个标签时，可以快速找到并移动所有群组成员。

在下面的示例中，一个名为 addPin 的新函数用于创建带有一组标签的图钉，这样标签就可以一起移动。

这是一个live demo。

var viewer = new Cesium.Viewer('cesiumContainer', {
    navigationHelpButton: false,
    animation: false,
    timeline: false
});
var scene = viewer.scene;
var pointCollection = scene.primitives.add(new Cesium.BillboardCollection());
var labelCollection = scene.primitives.add(new Cesium.LabelCollection());
var pinBuilder = new Cesium.PinBuilder();
var labelGroups = {};

function addPin(id, pos) {
    pointCollection.add({
        position: pos,
        id: id + '|point',
        image: pinBuilder.fromColor(Cesium.Color.SALMON, 48)
    });

    labelGroups[id] = [];

    labelGroups[id].push(labelCollection.add({
        position: pos,
        id: id + '|label1',
        text: 'Linha1',
        font: '15px Helvetica',
        fillColor: Cesium.Color.WHITE,
        outlineColor: Cesium.Color.BLACK,
        style: Cesium.LabelStyle.FILL,
        pixelOffset: new Cesium.Cartesian2(-20, 37)
    }));
    labelGroups[id].push(labelCollection.add({
        position: pos,
        id: id + '|label2',
        text: 'linha2',
        font: '15px Helvetica',
        fillColor: Cesium.Color.WHITE,
        outlineColor: Cesium.Color.BLACK,
        style: Cesium.LabelStyle.FILL,
        pixelOffset: new Cesium.Cartesian2(-20, 50)
    }));
    labelGroups[id].push(labelCollection.add({
        position: pos,
        id: id + '|label3',
        text: 'linha3',
        font: '15px Helvetica',
        fillColor: Cesium.Color.WHITE,
        outlineColor: Cesium.Color.BLACK,
        style: Cesium.LabelStyle.FILL,
        pixelOffset: new Cesium.Cartesian2(-20, 65)
    }));
    labelGroups[id].push(labelCollection.add({
        position: pos,
        id: id + '|label4',
        text: 'linha4',
        font: '15px Helvetica',
        fillColor: Cesium.Color.WHITE,
        outlineColor: Cesium.Color.BLACK,
        style: Cesium.LabelStyle.FILL,
        pixelOffset: new Cesium.Cartesian2(-20, 80)
    }));
}

// NOTE: The pins are added here, by calling the function above.
addPin('a', Cesium.Cartesian3.fromDegrees(-70, 40));
addPin('b', Cesium.Cartesian3.fromDegrees(-140, 40));

var dragging = false;
var pickedObjectId;
var lastPosition = new Cesium.Cartesian2();
var diff = new Cesium.Cartesian2();
var scratch = new Cesium.Cartesian2();

var handler = viewer.screenSpaceEventHandler;
handler.setInputAction(
    function (click) {
        var pickedObject = scene.pick(click.position);
        if (pickedObject && pickedObject.id && pickedObject.primitive instanceof Cesium.Label) {
            dragging = true;
            pickedObjectId = pickedObject.id.split('|')[0];
            Cesium.Cartesian2.clone(click.position, lastPosition);
            scene.screenSpaceCameraController.enableRotate = false;
            scene.screenSpaceCameraController.enableTranslate = false;
        }
    },
    Cesium.ScreenSpaceEventType.LEFT_DOWN
);

handler.setInputAction(
    function (click) {
        if (dragging) {
            Cesium.Cartesian2.subtract(click.endPosition, lastPosition, diff);
            Cesium.Cartesian2.clone(click.endPosition, lastPosition);
            var labelsToMove = labelGroups[pickedObjectId];
            var len = labelsToMove.length;
            for (var i = 0; i < len; ++i) {
                var primitive = labelsToMove[i];
                primitive.pixelOffset = Cesium.Cartesian2.add(
                    primitive.pixelOffset, diff, scratch);
            }
        }
    },
    Cesium.ScreenSpaceEventType.MOUSE_MOVE
);

handler.setInputAction(
    function (click) {
        dragging = false;
        scene.screenSpaceCameraController.enableRotate = true;
        scene.screenSpaceCameraController.enableTranslate = true;
    },
    Cesium.ScreenSpaceEventType.LEFT_UP
);

如何让四个Cesium Label只被认为是一个对象

How to make four Cesium Label be considered just one object

javascript

cesium