Slow down mouse wheel zoom in-out speed in Cesium
Personal
JavaScript
CesiumJS
  • Cancels the standard zoom function.
  • Calculates the coordinate of the cursor's last point of movement.
  • Multiply the camera height by the wheel approximation coefficient, divide by 2000 and get closer.

- cancels the standard zoom function.
- calculates the coordinate of the cursor's last point of movement.
- multiply the camera height by the wheel approximation coefficient, divide by 2000 and get closer.

Description :

Simple Expression :
directionToZoom = viewer.camera.getPickRay(mousePosition).direction;
zoomAmount = wheelZoomAmount * cameraHeight / 2000;
viewer.camera.move(directionToZoom, zoomAmount);
Example :
var viewer = new Cesium.Viewer("cesiumContainer");
//Based code on https://gist.github.com/scothis

var eventHandler, mousePosition;

//Cancels the standard zoom function.
viewer.scene.screenSpaceCameraController.enableZoom = false;
eventHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

//Calculates the coordinate of the cursor's last point of movement.
eventHandler.setInputAction(function (event) {
    mousePosition = event.endPosition;
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

//Multiply the camera height by the wheel approximation coefficient, divide by 2000 and get closer.
eventHandler.setInputAction(function (wheelZoomAmount) {
    var cameraHeight, directionToZoom, zoomAmount, maximumHeight;
    if (mousePosition) {
        maximumHeight = viewer.scene.globe.ellipsoid.maximumRadius * 4;
        cameraHeight = viewer.camera.positionCartographic.height || maximumHeight;
        directionToZoom = viewer.camera.getPickRay(mousePosition).direction;
        zoomAmount = wheelZoomAmount * cameraHeight / 2000;
        viewer.camera.move(directionToZoom, zoomAmount);
    }
}, Cesium.ScreenSpaceEventType.WHEEL);
2025 Jan