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;
}
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?
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.
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!
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
';viewer.selectedEntity = selectedEntity;
selectedEntity.description = ‘
| BIN | ’ + pickedFeature.getProperty(‘BIN’) + ‘ |
|---|---|
| DOITT ID | ’ + pickedFeature.getProperty(‘DOITT_ID’) + ‘ |
| SOURCE ID | ’ + pickedFeature.getProperty(‘SOURCE_ID’) + ‘ |
}, 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
';viewer.selectedEntity = selectedEntity;
selectedEntity.description = ‘
| BIN | ’ + pickedFeature.getProperty(‘BIN’) + ‘ |
|---|---|
| DOITT ID | ’ + pickedFeature.getProperty(‘DOITT_ID’) + ‘ |
| SOURCE ID | ’ + pickedFeature.getProperty(‘SOURCE_ID’) + ‘ |
| Longitude | ’ + pickedFeature.getProperty(‘longitude’) + ‘ |
| Latitude | ’ + pickedFeature.getProperty(‘latitude’) + ‘ |
| Height | ’ + pickedFeature.getProperty(‘height’) + ‘ |
| Terrain Height (Ellipsoid) | ’ + pickedFeature.getProperty(‘TerrainHeight’) + ‘ |
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);*/
}
function getwindowCenter() {
var windowPosition = new Cesium.Cartesian2(viewer.container.clientWidth / 2, viewer.container.clientHeight / 2);
console.log(windowPosition);
return windowPosition;
}
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:
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.
Thanks for your help, greatly appreciated. I will pay attention to similar problems in the future.