[cesium-dev] How to get rid of "Green Box" that appears when you pick something?

Most Viewer functionality is configurable at construction time. In this case you want to disable the selection indicator.

var viewer = new Cesium.Viewer(‘cesiumContainer’, {

selectionIndicator : false

});

Is there anyway to enable/disable the selectionIndicator after the viewer is constructed? For example, I would like to disable it for certain entity types based what is selected.

Something like...

if (viewer.selectedEntity.entityType == 'label'){
            viewer.selectionIndicator.viewModel.isVisible = false
}

Thanks in advance,
OG

You simple pass selectionIndicater : false to the Viewer constructor. This is true for all of the widgets in the Viewer, a complete list is in the documentation: https://cesiumjs.org/Cesium/Build/Documentation/Viewer.html

That is not what he asked. He is asking if you can disable picking for certain objects? I too would find it very helpful if only map pins were pickable

As of now, I don’t believe it is possible to selectively enable/disable picking for each entity. We have an issue written up about improving this here: https://github.com/AnalyticalGraphicsInc/cesium/issues/1592

I actually would like to pick an object so that the info box is show but I dont want to see the selectionIndicator. I have include a sandcastle sample where you can see why I dont want to see the selection indicator but still want the infoBox.

To use sample, hold down SHIFT and make a few left clicks. A line should be drawn between the points and the infoBox should display the total surface distance between the points.

var viewer = new Cesium.Viewer('cesiumContainer');

var scene = viewer.scene;
var ellipsoid = scene.globe.ellipsoid;
var handler;

// variables that support distance line
var distPosCarte = ;
var distPosCarto = ;
var surfaceDist = 0;
var distLine = viewer.entities.add({
    id : 'distLine',
    name : 'Distance Line',
    polyline : {
        width : 3,
        positions : ,
        material : new Cesium.PolylineOutlineMaterialProperty({
            color : Cesium.Color.ORANGE,
            outlineWidth : 2,
            outlineColor : Cesium.Color.BLACK
        })
    }
});

handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

handler.setInputAction(function(movement) {
    // clear distPos arrays on single click without SHIFT
    distPosCarto.length = 0;
    distPosCarte.length = 0;
    surfaceDist = 0;
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

handler.setInputAction(function(movement) {
    var cartesian = viewer.camera.pickEllipsoid(movement.position, ellipsoid);
    if (cartesian) {
        distPosCarte.push(cartesian);
        var cartographic = ellipsoid.cartesianToCartographic(cartesian);
        distPosCarto.push(cartographic);
        if(distPosCarte.length >= 2) {
            var posArray = ;
            // Build array with all points
            for (var i = 0; i < distPosCarte.length; i++){
                posArray.push(distPosCarte[i]);
            }
            // Calculate surface distance between each point
            for (var j = 1; j < distPosCarto.length; j++){
                var geodesic = new Cesium.EllipsoidGeodesic(distPosCarto[j-1], distPosCarto[j]);
                surfaceDist += geodesic.surfaceDistance;
            }

            distLine.polyline.positions = posArray;
            distLine.description = ((surfaceDist)/1000).toFixed(2) + ' km';

            viewer.selectedEntity = distLine;
        }
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK, Cesium.KeyboardEventModifier.SHIFT);

Okay, Matt’s comment above was exactly what you’re looking for then.

var viewer = new Cesium.Viewer(‘cesiumContainer’, {

selectionIndicator : false

});

The SelectionIndicator widget is what makes the green box. Disabling it will get rid of the green box, but picking and the info box will still work.

Best,

-Hannah

Sorry Hannah for the confusion…

I don’t want the selection indicator shown for the distance line ONLY. The selection indicator produces undesirable results when drawing a multi point polyline.

PastedGraphic-2.png

Thanks,

Owen

I found viewer.selectionIndicator.viewModel.showSelection but setting it to false doesn’t seem to work.

https://cesiumjs.org/Cesium/Build/Documentation/SelectionIndicatorViewModel.html?classFilter=selec

showSelection :Boolean

Gets or sets the visibility of the selection indicator.

Source: Widgets/SelectionIndicator/SelectionIndicatorViewModel.js, line 67

No problem, Owen. Sorry for not understanding.
showSelection is being overridden by the Viewer every frame, so that’s why setting it false from the code isn’t working.

Right now, there’s no way to turn the selection indicator on and off based on entity type. To get the behavior you want, you’ll have to make some changes to the Viewer code. [Here] you can find the code that’s responsible for displaying the selection indicator.

The Contributor’s Guide on GitHub wiki has instructions for downloading and building the code.

-Hannah

Joshua,

We add an 'entityType' property to any entities we add to the viewer and then you can unselect a certain type if needed. I am sure there is a better way but it seems to work.

var theEntity = viewer.entities.add('someEntity');
theEntity.addProperty('entityType');
theEntity.entityType = 'label';

viewer.clock.onTick.addEventListener(function() {

      // Do not select Labels
      if(viewer.selectedEntity && viewer.selectedEntity.entityType == "label"){
            viewer.selectedEntity = undefined;
       }
});

I have the same issue. The selectionIndicator is a really nice feature, but I have an some different modes where I would like to disable this feature. Could the SelectionIndicator object just support an ‘enable’ property?

Scott

I needed something similar: showing InfoBox only for polygons, while there are KML ground overlays at the same place. I've managed to do this by modifying the Scene object's pick method: (cv is the Cesium.Viewer object)

//
// CESIUM HACK - pick polygons only
//

// store original pick
cv.scene.oldPick=cv.scene.pick;
// new pick function
cv.scene.pick=function(e) {
    var notToPick=; // stack for non-polygons
    // use the original pick until a polygon is found or there areno more pickables.
    // If the object is not a polygon, hide the primitive from picking
    while (typeof (o=cv.scene.oldPick(e))=='object' && !o.id.polygon) {
        o.primitive.show=false;
        notToPick.push(o.primitive);
    }
    // reset 'show' attribute of non-picked primitives
    while (notToPick.length>0)
        notToPick.pop().show=true;
    // if the last object was a polygon, return it, otherwise nothing
    if (typeof o=='object' && o.id.polygon)
        return o;
    else
        return;
}

best,
Mátyás

Hi Owen,

I ran into a similar issue and was able to solve it by doing the following...

        var leftClickHandler = new Cesium.ScreenSpaceEventHandler(cesiumViewer.scene.canvas);

        leftClickHandler.setInputAction(function(action) {
            //reset visibility of selectionIndicator and infoBox
            cesiumViewer.selectionIndicator.viewModel.selectionIndicatorElement.style.visibility = 'visible';
            document.getElementsByClassName('cesium-infoBox')[0].style.visibility = "visible";

            var pickedObject = cesiumViewer.scene.pick(action.position);
            //don't do anything if we didn't click on an object
            if (!Cesium.defined(pickedObject)) { return; }
    
            //don't do anything if it's not the entity we care about
            if(entity !== pickedObject.id){ return; }

            //if this is the entity we care about, hide the selectionIndicator and infoBox
            cesiumViewer.selectionIndicator.viewModel.selectionIndicatorElement.style.visibility = 'hidden';
            document.getElementsByClassName('cesium-infoBox')[0].style.visibility = "hidden";
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

Hopefully that helps.

- Ben

1 Like