1. A concise explanation of the problem you’re experiencing.
My app uses the mouse to drag and drop a selection area over a cesium map. Right now, it’s dynamically resizing an unfilled polygon every time the mouse moves, but this looks laggy in the UI unless I use setTimeout to give a 100ms dead period between resizing the box, at which point it’s less laggy but looks jittery. Is there a way to make a drag and drop selection box in cesium that’s smooth?
2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.
// Mouse is already down at this point
const color = new Cesium.ColorMaterialProperty(new Cesium.Color(1, 0, 0, 0.2));
// Instantiate the entity
this.selection = this.viewer.entities.add({
polygon: {
fill: false,
outline: true,
outlineColor: color,
material : color
}
});
// Bind this.moveSelection to mouse move
this.area_select_handler.setInputAction(this.moveSelection.bind(this), Cesium.ScreenSpaceEventType.MOUSE_MOVE);
this.ready = true;
this.moveSelection = function(movement) {
// Pick Ellipsoid
this.end_pos = Cesium.Cartographic.fromCartesian(this.pickEllipsoid(movement.endPosition), this.viewer.scene.globe.ellipsoid);
this.selection.polygon.hierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromRadiansArray([this.start_pos.longitude, this.start_pos.latitude,
this.end_pos.longitude, this.start_pos.latitude,
this.end_pos.longitude, this.end_pos.latitude,
this.start_pos.longitude, this.end_pos.latitude]
));
};
3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
To make a smooth drag and drop box to select an area in my cesium viewer
4. The Cesium version you’re using, your operating system and browser.
Cesium 1.29. The operating system that hosts our cesium application is Linux Debian 3.16. We mostly use chrome to use the app because firefox and safari end up being too laggy for us.