How can I auto trigger click event without mouse click?

[Cherry]

Can I auto trigger click event without mouse click when I want to pick a 3d tile feature by setting position? If no, how should I do?

viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {

pickedFeature = viewer.scene.pick(getwindowCenter());

}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

function getwindowCenter() {

var windowPosition = new Cesium.Cartesian2(viewer.container.clientWidth / 2, viewer.container.clientHeight / 2);

return windowPosition;

}

[Omar Shehata]

I think it is possible to simulate a mouse click with JavaScript, I'd just do a general Google search for that since it's not specific to Cesium.

Although, it sounds like it would be a lot more straightforward to just do:

pickedFeature = viewer.scene.pick(getwindowCenter());  

When you want get the feature at the center of the screen. Have you tried that? 

[Cherry]

I don't want to get the feature by mouse click event. I want to give pick function a value, then i can get that tile. I have tried if only executing the code (for example: var pickfeature = viewer.scene.pick(Cesium.Cartesian2(309,306));), i get a undefined result, but if putting that code in Cesium LEFT_CLICK event (the code of the above problem), it will get a feature. 

Can you give me some advice? thanks.

[Omar Shehata]

I don't think whether or not you click should change the result. Notice that Cartesian2 is a constructor, so you have to call it with the "new" keyword, so that should be:

var pickfeature = viewer.scene.pick(new Cesium.Cartesian2(309,306));

instead of:

var pickfeature = viewer.scene.pick(Cesium.Cartesian2(309,306));

If that still doesn't work, can you put together a Sandcastle example of the issue (and verify that you're passing in the same coordinate when you click vs when you just call it directly) ? That'll help me identify the issue or figure out if there's a bug.

Thank you! 

[Cherry]

I used Cesium 3D Tiles Feature Picking Demo to modify. Please copy the code below to test. In line 91, I uses window center position to get feature, but result told me undefined(line 92). Then I use LEFT_CLICK event to test (line 94 to line 130), it can get the tile. Could you give me some advice?

javascript code:

// A simple demo of 3D Tiles feature picking with hover and select behavior

// Building data courtesy of NYC OpenData portal: http://www1.nyc.gov/site/doitt/initiatives/3d-building.page

var viewer = new Cesium.Viewer('cesiumContainer', {

    terrainProvider: Cesium.createWorldTerrain()

});

viewer.scene.globe.depthTestAgainstTerrain = true;

// Set the initial camera view to look at Manhattan

var initialPosition = Cesium.Cartesian3.fromDegrees(-74.01881302800248, 40.69114333714821, 753);

var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(21.27879878293835, -21.34390550872461, 0.0716951918898415);

viewer.scene.camera.setView({

    destination: initialPosition,

    orientation: initialOrientation,

    endTransform: Cesium.Matrix4.IDENTITY

});

// Load the NYC buildings tileset

var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(5741) });

viewer.scene.primitives.add(tileset);

// HTML overlay for showing feature name on mouseover

var nameOverlay = document.createElement('div');

viewer.container.appendChild(nameOverlay);

nameOverlay.className = 'backdrop';

nameOverlay.style.display = 'none';

nameOverlay.style.position = 'absolute';

nameOverlay.style.bottom = '0';

nameOverlay.style.left = '0';

nameOverlay.style['pointer-events'] = 'none';

nameOverlay.style.padding = '4px';

nameOverlay.style.backgroundColor = 'black';

// Information about the currently selected feature

var selected = {

    feature: undefined,

    originalColor: new Cesium.Color()

};

// An entity object which will hold info about the currently selected feature for infobox display

var selectedEntity = new Cesium.Entity();

// Get default left click handler for when a feature is not picked on left click

var clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);

// If silhouettes are supported, silhouette features in blue on mouse over and silhouette green on mouse click.

// If silhouettes are not supported, change the feature color to yellow on mouse over and green on mouse click.

if (Cesium.PostProcessStageLibrary.isSilhouetteSupported(viewer.scene)) {

    // Silhouettes are supported

    var silhouetteBlue = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();

    silhouetteBlue.uniforms.color = Cesium.Color.BLUE;

    silhouetteBlue.uniforms.length = 0.01;

    silhouetteBlue.selected = [];

    var silhouetteGreen = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();

    silhouetteGreen.uniforms.color = Cesium.Color.LIME;

    silhouetteGreen.uniforms.length = 0.01;

    silhouetteGreen.selected = [];

    viewer.scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createSilhouetteStage([silhouetteBlue, silhouetteGreen]));

    // Silhouette a feature blue on hover.

    viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {

        // If a feature was previously highlighted, undo the highlight

        silhouetteBlue.selected = [];

        // Pick a new feature

        var pickedFeature = viewer.scene.pick(movement.endPosition);

        if (!Cesium.defined(pickedFeature)) {

            nameOverlay.style.display = 'none';

            return;

        }

        // A feature was picked, so show it's overlay content

        nameOverlay.style.display = 'block';

        nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + 'px';

        nameOverlay.style.left = movement.endPosition.x + 'px';

        var name = pickedFeature.getProperty('name');

        if (!Cesium.defined(name)) {

            name = pickedFeature.getProperty('id');

        }

        nameOverlay.textContent = name;

        // Highlight the feature if it's not already selected.

        if (pickedFeature !== selected.feature) {

            silhouetteBlue.selected = [pickedFeature];

        }

    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    var position = getwindowCenter();

    var pickedFeature = viewer.scene.pick(position);

    alert(pickedFeature);

    // Silhouette a feature on selection and show metadata in the InfoBox.

    /*viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {

        // If a feature was previously selected, undo the highlight

        silhouetteGreen.selected = [];

        // Pick a new feature

        var pickedFeature = viewer.scene.pick(position);

        alert(pickedFeature);

        if (!Cesium.defined(pickedFeature)) {

            clickHandler(movement);

            return;

        }

        // Select the feature if it's not already selected

        if (silhouetteGreen.selected[0] === pickedFeature) {

            return;

        }

        // Save the selected feature's original color

        var highlightedFeature = silhouetteBlue.selected[0];

        if (pickedFeature === highlightedFeature) {

            silhouetteBlue.selected = [];

        }

        // Highlight newly selected feature

        silhouetteGreen.selected = [pickedFeature];

        // Set feature infobox description

        var featureName = pickedFeature.getProperty('name');

        selectedEntity.name = featureName;

        selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';

        viewer.selectedEntity = selectedEntity;

        selectedEntity.description = '<table class="cesium-infoBox-defaultTable"><tbody>' +

                                     '<tr><th>BIN</th><td>' + pickedFeature.getProperty('BIN') + '</td></tr>' +

                                     '<tr><th>DOITT ID</th><td>' + pickedFeature.getProperty('DOITT_ID') + '</td></tr>' +

                                     '<tr><th>SOURCE ID</th><td>' + pickedFeature.getProperty('SOURCE_ID') + '</td></tr>' +

                                     '</tbody></table>';

    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);*/

} else {

    // Silhouettes are not supported. Instead, change the feature color.

    // Information about the currently highlighted feature

    var highlighted = {

        feature : undefined,

        originalColor : new Cesium.Color()

    };

    // Color a feature yellow on hover.

    viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {

        // If a feature was previously highlighted, undo the highlight

        if (Cesium.defined(highlighted.feature)) {

            highlighted.feature.color = highlighted.originalColor;

            highlighted.feature = undefined;

        }

        // Pick a new feature

        var pickedFeature = viewer.scene.pick(movement.endPosition);

        if (!Cesium.defined(pickedFeature)) {

            nameOverlay.style.display = 'none';

            return;

        }

        // A feature was picked, so show it's overlay content

        nameOverlay.style.display = 'block';

        nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + 'px';

        nameOverlay.style.left = movement.endPosition.x + 'px';

        var name = pickedFeature.getProperty('name');

        if (!Cesium.defined(name)) {

            name = pickedFeature.getProperty('id');

        }

        nameOverlay.textContent = name;

        // Highlight the feature if it's not already selected.

        if (pickedFeature !== selected.feature) {

            highlighted.feature = pickedFeature;

            Cesium.Color.clone(pickedFeature.color, highlighted.originalColor);

            pickedFeature.color = Cesium.Color.YELLOW;

        }

    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    

    // Color a feature on selection and show metadata in the InfoBox.

    /*viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {

        // If a feature was previously selected, undo the highlight

        if (Cesium.defined(selected.feature)) {

            selected.feature.color = selected.originalColor;

            selected.feature = undefined;

        }

        // Pick a new feature

        var pickedFeature = viewer.scene.pick(movement.position);

        if (!Cesium.defined(pickedFeature)) {

            clickHandler(movement);

            return;

        }

        // Select the feature if it's not already selected

        if (selected.feature === pickedFeature) {

            return;

        }

        selected.feature = pickedFeature;

        // Save the selected feature's original color

        if (pickedFeature === highlighted.feature) {

            Cesium.Color.clone(highlighted.originalColor, selected.originalColor);

            highlighted.feature = undefined;

        } else {

            Cesium.Color.clone(pickedFeature.color, selected.originalColor);

        }

        // Highlight newly selected feature

        pickedFeature.color = Cesium.Color.LIME;

        // Set feature infobox description

        var featureName = pickedFeature.getProperty('name');

        selectedEntity.name = featureName;

        selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';

        viewer.selectedEntity = selectedEntity;

        selectedEntity.description = '<table class="cesium-infoBox-defaultTable"><tbody>' +

                                     '<tr><th>BIN</th><td>' + pickedFeature.getProperty('BIN') + '</td></tr>' +

                                     '<tr><th>DOITT ID</th><td>' + pickedFeature.getProperty('DOITT_ID') + '</td></tr>' +

                                     '<tr><th>SOURCE ID</th><td>' + pickedFeature.getProperty('SOURCE_ID') + '</td></tr>' +

                                     '<tr><th>Longitude</th><td>' + pickedFeature.getProperty('longitude') + '</td></tr>' +

                                     '<tr><th>Latitude</th><td>' + pickedFeature.getProperty('latitude') + '</td></tr>' +

                                     '<tr><th>Height</th><td>' + pickedFeature.getProperty('height') + '</td></tr>' +

                                     '<tr><th>Terrain Height (Ellipsoid)</th><td>' + pickedFeature.getProperty('TerrainHeight') + '</td></tr>' +

                                     '</tbody></table>';

    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);*/

}

function getwindowCenter() {   

    var windowPosition = new Cesium.Cartesian2(viewer.container.clientWidth / 2, viewer.container.clientHeight / 2);

    console.log(windowPosition);

    return windowPosition;

} 

[Omar Shehata]

Thanks for sharing a complete example!

Your code is correct. The only problem is that it runs before anything has loaded, so there is nothing to pick, that's why it returns undefined. To verify this, I added a 5 second delay by changing:

var position = getwindowCenter();

var pickedFeature = viewer.scene.pick(position);

alert(pickedFeature);

to:

setTimeout(function(){

    var position = getwindowCenter();

    var pickedFeature = viewer.scene.pick(position);

    alert(pickedFeature);

}, 5000);

Depending on what you need to do in your application, you could add a timer like above, or use one of the event listeners on the tileset, like this one that fires when all the tiles have loaded for the current view:

https://cesiumjs.org/Cesium/Build/Documentation/Cesium3DTileset.html?classFilter=Tileset#allTilesLoaded

However, I think calling pick inside of that event listener will cause an error (because pick under the hood will call a render and that will keep calling recursively forever). A better way might be to just check if tilesLoaded is true. Here's a complete Sandcastle example.

[Cherry]

Thanks for your help, greatly appreciated. I will pay attention to similar problems in the future.