cesium 缩放速度控制

cesium  缩放速度控制

需求：

cesium 缩放速度控制，  在移动端浏览器访问时，两个手指缩放地球速度有点慢，希望可以修改。

实现：

修改 zoomEventTypes，禁用cesium默认触控缩放

gvEarth.scene.screenSpaceCameraController.zoomEventTypes 默认值为

[ CameraEventType.RIGHT_DRAG , CameraEventType.WHEEL , CameraEventType.PINCH ]

修改为：

gvEarth.scene.screenSpaceCameraController.zoomEventTypes = [

        Cesium.CameraEventType.MIDDLE_DRAG,

        Cesium.CameraEventType.WHEEL,

];

js监控手指缩放动作，参考文章：移动端双指缩放图片JS事件的实践心得 - 浅笑· - 博客园

var store = {};

 document.addEventListener('touchstart', function (event) {

    var touches = event.touches;

    var events = touches[0];

    var events2 = touches[1];

    event.preventDefault();

    // 第一个触摸点的坐标

    store.pageX = events.pageX;

    store.pageY = events.pageY;

    store.moveable = true;

    if (events2) {

        store.pageX2 = events2.pageX;

        store.pageY2 = events2.pageY;

    }

});

document.addEventListener('touchmove', function (event) {

    if (!store.moveable) {

        return;

    }

    event.preventDefault();

    var touches = event.touches;

    var events = touches[0];

    var events2 = touches[1];

    // 双指移动

    if (events2) {

        // 第2个指头坐标在touchmove时候获取

        if (!store.pageX2) {

            store.pageX2 = events2.pageX;

        }

        if (!store.pageY2) {

            store.pageY2 = events2.pageY;

        }

        

        // 获取坐标之间的距离

        var getDistance = function (start, stop) {

            return Math.hypot(stop.x - start.x, stop.y - start.y);

        };

        // 双指缩放比例计算

        var zoom = getDistance({

            x: events.pageX,

            y: events.pageY

        }, {

            x: events2.pageX,

            y: events2.pageY

        }) /

        getDistance({

            x: store.pageX,

            y: store.pageY

        }, {

            x: store.pageX2,

            y: store.pageY2

        });

        if (zoom > 1) {

            zoomIn();

        }else{

          zoomOut()

        }

       store.pageX = events.pageX;

       store.pageY = events.pageY;

       store.pageX2 = events2.pageX;

       store.pageY2 = events2.pageY;

    }

});

document.addEventListener('touchend', function () {

    store.moveable = false;

    delete store.pageX2;

    delete store.pageY2;

});

document.addEventListener('touchcancel', function () {

    store.moveable = false;

    delete store.pageX2;

    delete store.pageY2;

});

let firstTime2 = performance.now();

function zoomIn(){

  const secondTime2 = performance.now();

        if (secondTime2 - firstTime2 < 200) {

          const height = gvEarth.camera.positionCartographic.height;

          gvEarth.camera.zoomIn(height / 15);

          firstTime2 = 0;

        }

        firstTime2 = secondTime2;

}

let firstTime3 = performance.now();

function zoomOut(){

  const secondTime3 = performance.now();

        if (secondTime3 - firstTime3 < 200) {

          const height = gvEarth.camera.positionCartographic.height;

          gvEarth.camera.zoomOut(height / 15);

          firstTime3 = 0;

        }

        firstTime3 = secondTime3;

}