CODEWITHSUNDEEP
javascriptcesiumjs
Pri Santos
Pri Santos

Reputation: 409

Change offset of label using Cesium JS

I want to drag a label (or label collection) in Cesium without changing its position. I thought about changing its pixelOffset after I created the label. I did this:

            var entity = mapa.getViewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
            billboard: {
                image: pinBuilder.fromColor(Cesium.Color.SALMON, 48),
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM
            },
            label: {
                text: ' Ponto',
                verticalOrigin: Cesium.VerticalOrigin.TOP,
                horizontalOrigin: Cesium.HorizontalOrigin.RIGHT,
                font: '20px Helvetica',
                fillColor: Cesium.Color.WHITE,
                outlineWidth: 1,
                style: Cesium.LabelStyle.FILL,
                pixelOffset: new Cesium.Cartesian3(0,0,0)
            }
            });
            //Tried to update the pixelOffset value
            entity.pixelOffset = new Cesium.Cartesian3(200, 20);

But nothing happens. I logged the entity on console and the value of pixelOffset appears, but there is no change on the map.

Thanks in advance!

Upvotes: 0

Views: 1911

Answers (1)

Matthew Amato
Matthew Amato

Reputation: 2022

There are 2 problems with your code.

  1. The last line assigning entity.pixelOffset is incorrect. It should be entity.label.pixelOffset. That's the main reason your doesn't work.
  2. LabelGraphics.pixelOffset is a Cartesian2 instance, not a Cartesian3 instance. The code will work either with either because of JavaScript's dynamic typing, but it's good practice to use the correct type and will help the browser better optimize the code.

There's also no need to set the pixelOffset during creation time, since the default is Cartesian2.ZERO and creating a new instance will just waste memory.

Here's an updated working version of your code:

var entity = mapa.getViewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
    billboard: {
        image: pinBuilder.fromColor(Cesium.Color.SALMON, 48),
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM
    },
    label: {
        text: ' Ponto',
        verticalOrigin: Cesium.VerticalOrigin.TOP,
        horizontalOrigin: Cesium.HorizontalOrigin.RIGHT,
        font: '20px Helvetica',
        fillColor: Cesium.Color.WHITE,
        outlineWidth: 1,
        style: Cesium.LabelStyle.FILL
    }
});

entity.label.pixelOffset = new Cesium.Cartesian2(200, 20);

Upvotes: 3

Related Questions