Cesium - first middle click causes the map to fly to a random location

CesiumJS
1

I posted the following on StackOverflow and figured I might get better responses here, so I’ve attached the link to the stackoverflow post and a copy of the referenced question.

The first time I perform a middle click the map flies to a random location in the middle of the ocean. The project is using Resium (the Cesium react wrapper). The odd thing is that none of the examples on the cesium website have this issue.

Below are some of my attempts to try to address the middle click issue, but none of them are able to stop the event from occurring.

I am using cesium 1.73, but recently tried upgrading to cesium 1.76 and was still having this issue.

Any help would be much appreciated! Thanks in advance!

Here’s the code in my CesiumMap component where I am attempting to handle the middle click.

<Viewer
   ref={e => this.getRef(e)}
   ...
>
   <ScreenSpaceEventHandler useDefault element={this.canvas && this.viewer.canvas}>
       <ScreenSpaceEvent
           action={this.onMiddleClick}
           type={ScreenSpaceEventType.MIDDLE_CLICK}
       />
   </ScreenSpaceEventHandler>
</Viewer>

the Cesium reference

getRef = e => {
        const me = this;
        const { view, config } = this.props;
        if (!this.viewer) {
            this.viewer = e && e.cesiumElement;
            if (this.viewer) {

                // Handle click event
                this.clickHandler =
                    this.clickHandler || new Cesium.ScreenSpaceEventHandler(scene.canvas);

                this.clickHandler.setInputAction(movement => {
                     // maybe do something with the viewer here?
                }, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
            }
        }
    };

I also tried adding the following to my componentDidUpdate():

this.viewer.scene.canvas.addEventListener('auxclick', this._handleMiddleClick);

_handleMiddleClick:

_handleMiddleClick = e => {
     e.preventDefault();
     if (e.button === 1) {
         console.log("middle button clicked");
     }
};
2

Hello @Nick_Viens,

The Cesium Viewer doesn’t have a MIDDLE_CLICK action set by default, so it sounds like this might be a bug in Resium, which is something I’m not very familiar with. You might have better luck opening an issue in the Resium Github repo.

Good luck!

Hannah

1 Like
3

Hi Hannah,

Thank you for your quick response! I will open an issue in the Resium repo and see what info I can glean from them.

I will report back here what I find out or a link to the other post in case anyone else has this issue and comes across this post.

~ Nick

4

Keep in mind that a MIDDLE_CLICK often simulates a LEFT_DOUBLE_CLICK (a bit hardware / platform dependant). A double click on an entity will do a camera reorientation, and I think if not on an entity but the globe is what you get. We had this issue ages ago which was “fixed” by disabling the double-left-click like so;

viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)

Wouldn’t hurt to try.

Cheers,

Alex