[SOLVED] Pan map with mouse wheel click instead of left click

Pan map with mouse wheel click instead of left click

The default behavior of panning the map is via left click + drag I would like to change that behavior to be with wheel click + drag. Is this possible?

Solution

That's handled by the ScreenSpaceCameraController, and is configurable. For example:

const viewer = new Cesium.Viewer("cesiumContainer");

// for 3D mode
viewer.scene.screenSpaceCameraController.rotateEventTypes = Cesium.CameraEventType.MIDDLE_DRAG;

// for 2D mode
viewer.scene.screenSpaceCameraController.translateEventTypes = Cesium.CameraEventType.MIDDLE_DRAG;

// remove MIDDLE_DRAG from the top of the tiltEventTypes.
viewer.scene.screenSpaceCameraController.tiltEventTypes.shift();

That last command above uses Array.shift to remove the first element of the tiltEventTypes array. The default value of this array (for many versions of Cesium) is shown here:

this.tiltEventTypes = [
    CameraEventType.MIDDLE_DRAG,
    CameraEventType.PINCH,
    {
      eventType: CameraEventType.LEFT_DRAG,
      modifier: KeyboardEventModifier.CTRL,
    },
    {
      eventType: CameraEventType.RIGHT_DRAG,
      modifier: KeyboardEventModifier.CTRL,
    },
  ];

This is showing us that one can still issue "tilt" events even after shifting away the MIDDLE_DRAG entry. We can CTRL-left-drag, for example, to get the same action.