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

您处理偏移的方式存在一些问题。试一试。点击＆＃34;运行代码段＆＃34;底部的按钮。

＆＃13;

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
);

＆＃13;

html, body, #cesiumContainer {
    width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
    font-family: sans-serif;
}

＆＃13;

<link href="http://cesiumjs.org/Cesium/Build/Cesium/Widgets/widgets.css" 
      rel="stylesheet"/>
<script src="http://cesiumjs.org/Cesium/Build/Cesium/Cesium.js"></script>
<div id="cesiumContainer"></div>

＆＃13;

如何将四个Cesium标签视为一个对象

1 个答案: