how can i zoom in or zoom out map with mouse point ?

CesiumJS
1

how can i zoom in or zoom out map with mouse point ? but not screen center point?

2

Great idea. I too hope this is possible. Thoughts?

3

Checked in Cesium Sandcastle:

var viewer = new Cesium.Viewer('cesiumContainer');
var canvas=viewer.canvas;
var scene=viewer.scene;
var ellipsoid=scene.globe.ellipsoid;
var camera=scene.camera;
var minCameraHeight=50;
var maxCameraHeight=2*camera.positionCartographic.height;
ownZoom(viewer);

function getPick(winCoord) {
    var result = null;
    if (scene.mode == Cesium.SceneMode.SCENE3D) {
        var pickRay = null;
        pickRay = camera.getPickRay(winCoord);
        result = scene.globe.pick(pickRay, scene);
        if (result == undefined && result == null) {
            result = scene.camera.pickEllipsoid(winCoord);
        }
    } else {
        result = scene.camera.pickEllipsoid(winCoord);
    }
    return result;
}

function ownZoom(widget) {
    var scene=widget.scene;
    scene.screenSpaceCameraController.enableZoom = false;
   
    function zoom(newCameraHeight,x,y) {
        if (newCameraHeight < minCameraHeight) {
                newCameraHeight = minCameraHeight;
        } else if (newCameraHeight > maxCameraHeight) {
                newCameraHeight = maxCameraHeight;
        }
        var cameraHeight=camera.positionCartographic.height;
        if (newCameraHeight !== cameraHeight) {
            var cx =canvas.width / 2;
            var cy = canvas.height / 2;
            var dx = cx - x;
            var dy = cy - y;
            var cartPick = null;
            if (newCameraHeight < cameraHeight) {
                    cartPick = getPick(new Cesium.Cartesian2(x + dx / 2, y + dy / 2));
            } else if (newCameraHeight > cameraHeight) {
                    cartPick = getPick(new Cesium.Cartesian2(x + dx * 2, y + dy * 2));
            }

            if (cartPick) {
                    var geoPick = ellipsoid.cartesianToCartographic(cartPick);
                    if (geoPick !== undefined && geoPick !== null) {
                            var cameraRadX = geoPick.longitude;
                            var cameraRadY = geoPick.latitude;
                            cameraHeight = newCameraHeight;
                            if(scene.mode == Cesium.SceneMode.SCENE2D){
                                camera.setPositionCartographic(new Cesium.Cartographic(cameraRadX, cameraRadY, 2*cameraHeight));
                            }else{
                                camera.setPositionCartographic(new Cesium.Cartographic(cameraRadX, cameraRadY, cameraHeight));
                            }
                    }else{
                        console.log("Error");
                    }
            }
        }
        
    }
    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    var mousePosition=null;
    //mose move
    handler.setInputAction(function(e){
        mousePosition=e.endPosition;
    },Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    //double click
    handler.setInputAction(function(e){
        var newHeight=0.5 * camera.positionCartographic.height;
        zoom(newHeight, mousePosition.x, mousePosition.y);
    },Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
    //wheel
    handler.setInputAction(function(delta){
        var newHeight = 0;
        if (delta > 0) {
                newHeight =0.5 * camera.positionCartographic.height;
        } else {
                newHeight = 2 * camera.positionCartographic.height;
        }
        zoom(newHeight, mousePosition.x, mousePosition.y);
    },Cesium.ScreenSpaceEventType.WHEEL);
    
};

4

thanks,jet.i used this code,
1:when i changed viewer with pitch ,zoom in or zoom out,then viewer is changed to default.

在 2014年11月11日星期二UTC+8下午4时28分58秒，jet…@gmail.com写道：

5

Great stuff. Thanks all.